Archive

Posts Tagged ‘Grid’

ASP.NET # MVC # 21 Telerik Grid with checkboxes problem – Grid does not maintain the state of the checkboxes on changing page index

Telerik provides the best UI controls for the ASP.NET MVC application development.
Especially the Telerik Grid is used often in the web development.

However Checkbox column functionality of Telerik Grid does not maintain the state of the checkboxes on the page index changing event.
If user selects check boxes on the first page and then goes to the other and the checks made on the first page disappears.

Solution for above problem is explained with the help of following example by using the jQuery live event and the JavaScript arrays:

In this example we have a grid with checkboxes that is bound to the Model class name Order.

The order class has three properties OrderId,OrderName and IsChecked.                  IsChecked property is a Boolean  flag to see whether order is previously checked or not.

Controller code contains _ChckBoxesAjax method with a GridAction attribute that returns the IEnumerable list of type Order class.

Code on Controller
  1. [GridAction]
  2.       public ActionResult _CheckBoxesAjax()
  3.       {
  4.           List<Order> lstOrder = new List<Order>();
  5.  
  6.           lstOrder.Add(new Order { OrderId = 1, OrderName = "Order 1", IsChecked = false });
  7.           lstOrder.Add(new Order { OrderId = 2, OrderName = "Order 1", IsChecked = false });
  8.           lstOrder.Add(new Order { OrderId = 3, OrderName = "Order 2", IsChecked = true });
  9.           lstOrder.Add(new Order { OrderId = 4, OrderName = "Order 3", IsChecked = false });
  10.           lstOrder.Add(new Order { OrderId = 5, OrderName = "Order 4", IsChecked = false });
  11.           lstOrder.Add(new Order { OrderId = 6, OrderName = "Order 5", IsChecked = false });
  12.           lstOrder.Add(new Order { OrderId = 7, OrderName = "Order 6", IsChecked = true });
  13.           lstOrder.Add(new Order { OrderId = 8, OrderName = "Order 7", IsChecked = false });
  14.           lstOrder.Add(new Order { OrderId = 9, OrderName = "Order 8", IsChecked = false });
  15.           lstOrder.Add(new Order { OrderId = 10, OrderName = "Order 9", IsChecked = false });
  16.           lstOrder.Add(new Order { OrderId = 11, OrderName = "Order 10", IsChecked = true });
  17.           lstOrder.Add(new Order { OrderId = 12, OrderName = "Order 11", IsChecked = false });            
  18.           return View(new GridModel(lstOrder.AsEnumerable()));
  19.       }
  20.  
  21.   }
  22.  
  23.   public class Order
  24.   {
  25.       public int OrderId { get; set; }
  26.       public string OrderName { get; set; }
  27.       public bool IsChecked { get; set; }
  28.  
  29.   }

 

The client side code is written in the View file.There are two JavaScript function

1. RegisterLiveEventForCheckBoxes – This method should be called on the document.ready    method of the page which has the Grid on it.

2.OnCheckBoxGridDataBound – This method will be called on the OnDataBound event of the grid.

View and Client side code
  1. @{
  2.     ViewBag.Title = "_CheckBoxesAjax";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. <script type="text/javascript">
  6.  
  7.     var selectedIds;
  8.     var deselectedIds;
  9.     $(document).ready(function () {
  10.         RegisterLiveEventForCheckBoxes();
  11.  
  12.     });
  13.     function RegisterLiveEventForCheckBoxes() {    
  14.         selectedIds = []; deselectedIds = [];
  15.         $('#OrderId:checkbox').die();
  16.         $('#OrderId:checkbox').live('click', function (e) {
  17.             var $check = $(this);
  18.             if ($check.is(':checked')) {
  19.  
  20.                 if ($.inArray($(this).val(), deselectedIds) > -1) {
  21.                     deselectedIds = jQuery.grep(deselectedIds, function (value) {
  22.                         return value != $check.val();
  23.                     });
  24.                 }
  25.                 selectedIds.push($check.val());
  26.             }
  27.             else {
  28.  
  29.                 if ($.inArray($(this).val(), selectedIds) > -1) {
  30.                     selectedIds = jQuery.grep(selectedIds, function (value) {
  31.                         return value != $check.val();
  32.                     });
  33.                 }
  34.  
  35.                 deselectedIds.push($check.val());
  36.             }
  37.         });
  38.     }
  39.  
  40.     function OnCheckBoxGridDataBound(e) {
  41.         
  42.         $('input:checkbox[id*=OrderId]:checked').each(function () {
  43.             if ($.inArray($(this).val(), selectedIds) < 0) {
  44.                 selectedIds.push($(this).val());
  45.             }
  46.         });
  47.         selectedIds = jQuery.grep(selectedIds, function (item) {
  48.             return jQuery.inArray(item, deselectedIds) < 0;
  49.         });
  50.         var gridID = ($(e.target.id).selector);
  51.         $('#' + gridID + ' :checkbox').each(function () {
  52.  
  53.             $(this).attr('checked', jQuery.inArray($(this).val(), selectedIds) > -1);
  54.  
  55.         });
  56.     }
  57. </script>
  58. @{ Html.Telerik().Grid<TelerikGridWithCheckboxes.Controllers.Order>()
  59.         .Name("Grid")
  60.         .Columns(columns =>
  61.         {
  62.             columns.Bound(o => o.OrderId)
  63.             .ClientTemplate("<input type='checkbox' id='OrderId' name='OrderId' value='<#= OrderId #>' <#= IsChecked ? checked='checked' : '' #>/>")
  64.                    .Title("")
  65.                    .Width(36)
  66.                    .HtmlAttributes(new { style = "text-align:center" });
  67.  
  68.             columns.Bound(o => o.OrderId).Width(100);
  69.             columns.Bound(o => o.OrderName).Width(200);
  70.         })
  71.         .DataBinding(dataBinding => dataBinding.Ajax()
  72.                 .Select("_CheckBoxesAjax", "Home"))
  73.                 .ClientEvents(c => c.OnDataBound("OnCheckBoxGridDataBound"))
  74.         .Scrollable()
  75.         .Pageable()
  76.         .Render();
  77. }

 

Regards

Ganesh D