Checkbox checked state lost during AJAX paging

[jpchenot]

Hi.

I have a grid with a checkbox in each row.

@(Html.Telerik().Grid<Order>()
                            .Name("OrdersGrid")
                            .PrefixUrlParameters(false)
                            .Columns(columns =>
                                {
                                    columns.Bound(column => column.Id)
                                                    .ClientTemplate(
                                                                                    "<input type='checkbox' name='checkedRecords' value='<#= Id #>' class='not-clickable checkbox-parent' />"
                                                                                )
                                                    .Width(30)
                                                    .Title("")
                                                    .HtmlAttributes(new { style = "text-align:center; padding: 0px; margin: 0px;" })
                                                    .Filterable(false)
                                                    .Sortable(false);
                                    columns.LoadSettings(columnSettings);
                                })
                            .DataBinding(databind =>
                                {
                                    databind.Ajax().Select("_Index", "GridView", new { positions = String.Join(",", columnSettings.Select(c => c.Member).ToArray()), config = config });
                                })
                            .Scrollable(scroll => scroll.Enabled(false))
                            .Sortable(sort => sort.Enabled(true))
                            .Pageable(paging => paging.Enabled(true).Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown))
                            .Filterable(filter => filter.Enabled(true))
                            .Groupable(group => group.Enabled(true))
                            .Reorderable(reorder => reorder.Columns(true))
                            .Resizable(resize => resize.Columns(true))
                            .Selectable()
                            .ClientEvents(events =>
                                {
                                    events.OnColumnReorder("onReorder");
                                    events.OnColumnResize("onResize");
                                    events.OnRowSelected("onRowSelected");
                                })
                            .Footer(true)
)

Whenever I change page, the checkboxes loose their selected state. How can I handle that?

[Robbie Hughes]

Hi there

Did you ever get a solution to this problem?

Cheers

[jpchenot]

Nope.

We decided to take a different approach in the end.

You know you cannot count too much on Telerik for help. They either ignore you or they direct you to the demos which are rubbish.

Good luck anyway.

[Robbie Hughes]

I was worried that this was the case. We have phone support, apparently. I think I'll use it.

This problem even exists on their demo.

Thanks for the reply!

[Atanas Korchev]

Hi,

The checkboxes example indeed does not persist the checked state of the records during paging. We are not considering this a problem however - it is just how the example was implemented in order to reduce complexity. I would not comment on the statement that the Telerik examples are rubbish - it is simply not constructive.

It is possible to implement checkbox persistence with some additional JavaScript. Here it is (using the client-checkboxes example):

<%= Html.Telerik().Grid(Model)
  .Name("Grid")
  .Columns(columns =>
  {
   columns.Bound(o => o.OrderID)
    .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= OrderID #>' />")
    .Title("")
    .Width(36)
    .HtmlAttributes(new { style = "text-align:center" });

   columns.Bound(o => o.OrderID).Width(100);
   columns.Bound(o => o.Customer.ContactName).Width(200);
   columns.Bound(o => o.ShipAddress);
   columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
 })
 .ClientEvents(e => e.OnLoad("onLoad").OnRowDataBound("onRowDataBound"))
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_CheckBoxesAjax", "Grid"))
 .Scrollable()
 .Pageable()
%>

<script>
   // this object will store all checked records
   var checked = {};

   function onLoad() {
    // handle the click event of all checkboxes
    $(this).delegate(":checkbox", "click", function() {
        // store the checked state of the record (this.value is set to the value of the  OrderID property of the data item)
        checked[this.value] = this.checked;
     });
   }

   function onRowDataBound(e) {
     if (checked[e.dataItem.OrderID]) {
         // if the record was checked update the checked state of the checkbox
         $(e.row).find(":checkbox").attr("checked", true);
     }
   }
</script>

Regards,
Atanas Korchev
the Telerik team

[Robbie Hughes]

Hi Atanas,

Thanks for the reply. Thanks, also, for the work-around, it will be really helpful.


You can understand our frustration, can you not? The question was asked in June; I checked and it had not been answered in another thread; why would *anyone* want the checkboxes to not retain their checked status?

Cheers

[Atanas Korchev]

Hi Robbie Hughes,

 Retaining the checkbox status is probably not expected from user experience point of view. The user may never know that there are any checked items in other pages as there is no visual indication for this. Do you know of any UI which combines checkboxes and paging?

As for the question being asked in June - Telerik does not guarantee replies to forum posts as they are mainly a community driven resource. Please open a support ticket which has 24 hour guarantee response time when you need timely replies from Telerik staff.

All the best,
Atanas Korchev
the Telerik team

[Robbie Hughes]

Hi Atanas

Thanks for your answers. I see both your points and accept the second one fully.

It is perhaps true that one should not combine paging with checked grid items. What principle of UI design would you say this adheres to?

A couple of points though: if the user wants to see which items are checked, could they not filter for checked items? Wouldn't this be the visual indication you mention?

Cheers

[Atanas Korchev]

Hi Robbie Hughes,

 I think that in such cases the user should see somehow all checked records. If paging is needed in the parent grid the records which are already checked should be displayed somewhere else - another grid or some other UI widget. The grid may also show all records (if they are not too many). 

 Filtering by checked records may not work as the user can only see checked or unchecked records (but not both). Also the current grid filtering implementation can filter only by an existing field. In most cases the checbkoxes in the grid are used for selection - they are not bound to a model field. If they are they would probably used for editing - toggling the state of some property.

Regards,
Atanas Korchev
the Telerik team

[MICHAEL]

Hi Atanas

In your example, where you have the following declared:
var checked = {};

How would I pass the checked into the following ajax post call? I'm having a hard time passing that value to my controller.

            jQuery.ajax({
                url: '<%= Url.Action("CreateInvoice", "StudentInvoice") %>',
                data: checked,
                beforeSend: function (XMLHttpRequest) {
                    jQuery('#result').show();
                },
                complete: function (XMLHttpRequest, textStatus) {
                    jQuery('#result').replaceWith('<font color="red"><i>&nbsp;Done!</i></font>');
                    $('input:checkbox').each(function () {
                        this.checked = false;
                    });
                }
            });

My controller:

public ActionResult CreateInvoice(int[] checkedRecords)

{
}

[Atanas Korchev]

Hi,

 That's because checked is an object and you are expecting an array of integers. Try changing the action method parameters to a Dictionary<string, int> or create a JavaScript array from the "checked" object:

var checkedArray = [];

for (var key in checked) {
     checkedArray.push(key);
}

//use checkedArray instead of "checked" when calling $.ajax.

Kind regards,
Atanas Korchev
the Telerik team

[Moody]

Just a heads up the solution for passing the values to ActionResult seems to have a bug, basically when the user checks the checkbox and changes their mind (unchecks it) it will still be added as selected, debugging shows that the checked object has values i.e object { 2 = false, 3 = true} so when it gets to the for loop it just counts the values inside the object instead of checking which ones are true. The solution to this is changing the for loop to
  for (var item in checked) {
                if (checked[item] == true) {
                    $checkedRecords.push(item);
                }
            }