Merge pull request #4654 from syncfusion-content/989596-selection-dev

989596: Included partial selection topic - Development

Author: rajapandiyan-settu

ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+   ViewBag.dataSource = OrderDetails.GetAllRecords();        
+   return View();
+}

ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor

@@ -0,0 +1,16 @@
+Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+{
+    col.Type("checkbox").Width("40").Add();
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("110").ValidationRules(new { required = true }).Add();
+    col.Field("CustomerName").HeaderText("Customer Name").Width("120").ValidationRules(new { required = true }).Add();
+    col.Field("Product").HeaderText("Product").Width("110").EditType("dropdownedit").Add();
+    col.Field("Amount").HeaderText("Amount").Width("110").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = true }).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("110").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).EditType("datepickeredit").Format("yMd").Add();
+    col.Field("Status").HeaderText("Status").Width("110").EditType("dropdownedit").Add();
+}).AllowPaging().AllowSorting().AllowFiltering().Toolbar(new List<string>() { "Edit", "Update", "Cancel" }).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)).EditSettings(edit => {edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Normal);}).SelectionSettings(select => select.PersistSelection(true)).IsRowSelectable("isRowSelectable").Render()
+<script>
+    function isRowSelectable(data, columns) {
+        return data.Status !== 'Cancelled';
+    }
+</script>
+

ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper

@@ -0,0 +1,20 @@
+<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() { "Edit", "Update", "Cancel" })" isRowSelectable="isRowSelectable">
+    <e-grid-selectionSettings persistSelection="true"></e-grid-selectionSettings>
+    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
+    <e-grid-editSettings allowEditing="true" allowAdding="false" allowDeleting="false"></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column type="checkbox" width="40"></e-grid-column>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="110" validationRules="@(new { required = true })"></e-grid-column>
+        <e-grid-column field="CustomerName" headerText="Customer Name" width="120" validationRules="@(new { required = true })"></e-grid-column>
+        <e-grid-column field="Product" headerText="Product" width="110" editType="dropdownedit"></e-grid-column>
+        <e-grid-column field="Amount" headerText="Amount" width="110" format="C2" textAlign="Right" validationRules="@(new { required = true })"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" width="110" textAlign="Right" editType="datepickeredit" format="yMd"></e-grid-column>
+        <e-grid-column field="Status" headerText="Status" width="110" editType="dropdownedit"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    function isRowSelectable(data, columns) {
+        return data.Status !== 'Cancelled';
+    }
+</script>

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md

@@ -88,6 +88,23 @@ In the following sample, the selection of specific rows has been prevented based
 
 ![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif)
 
+## Partial selection using isRowSelectable
+
+The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows.
+
+For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting.
+
+In the example below, it prevents selection of rows with canceled orders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/selection/prevent-checkbox-selection/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="checkbox.cs" %}
+{% include code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## How to select single row in checkbox selection mode
 
 The ASP.NET MVC Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected.

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md

@@ -88,6 +88,23 @@ In the following sample, the selection of specific rows has been prevented based
 
 ![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif)
 
+## Partial selection using isRowSelectable
+
+The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows.
+
+For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting.
+
+In the example below, it prevents selection of rows with canceled orders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/selection/prevent-checkbox-selection/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="checkbox.cs" %}
+{% include code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## How to select single row in checkbox selection mode
 
 The ASP.NET CORE Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected.