persisten checkboxes while using ajax

[Mzzl Pik]

Hello from a happy telerik user,

My question, how (if) can I enable persistent checkbox selection when using ajax binding and paging?

I was thinking about passing a array of checked items around using ViewData["selecteditems"], but since the ajax call is outside my control I don't see how to pull them out of the ajax call's result.

Binding my checkbox to those selected ids is another problem, but I did not get to that yet.

Is it possible? or should I go for an entirely different approach?

mzzl.

[Makoto]

What you can do is to assign an event handler for your checkboxes when they are clicked, and then store the checkbox ids that are checked into an array in your Javascript.

Then you can add a event handler for the Grid's OnRowDataBound event that will find your checkbox and check it if it's ID is in the array.

[Mzzl Pik]

Thanks Makoto, That looks like a way to get it working. I will try it.

Mzzl

[Matthew]

<%foreach (CartItem item in ViewData.Model.GetItems()) { %>

<tbody>

<tr>

<td class="remove">

<input type="checkbox"  name="removeid<%=  item.ID %>" src="/Content/Images/delete.gif" />

</td>

<td class="quantity">

<input type="hidden" name="updateid<%= item.ID  %>" value="<%=item.ID.ToString() %>" />

<input type="text" name="quantity<%= item.ID  %>" value="<%=item.Quantity.ToString() %>" style="width:3em;" />

</td>

<td>

<h3><%= item.PartNumber%></h3>

<p class="description"><%=item.Description%></p>

</td>

</tr>

<%}%>

Im not sure if this is entirely how you are looking for, but what I do is add a numeric identifier to the field, then it is easy to parse in javascript and etc.

But that way you can in client side identify the check box associated with each record index.

I use something like this on exactly what you are doing, and then fire an ajax update each onclicked.

[Paul den Dulk]

Thank, I used Makato's answer to do it like this:

register the event in the grid:

        .ClientEvents(events => events

            .OnRowSelected("onRowSelected")

            .OnRowDataBound("onRowDataBound"))

In javascript use an array to store the checked items:

    var selectedRows = new Array();

    function onRowSelected(e) {

        var id = e.row.cells[1].innerHTML;

        if ($.inArray(id, selectedRows) > -1) {

            selectedRows = jQuery.grep(selectedRows, function(value) { return value != id; });

        } else {

            selectedRows.push(id);

        }

        visualizeSelectedRowsInMap();

    }

    function onRowDataBound(e) {

        var id = e.row.cells[1].innerHTML;

        if ($.inArray(id, selectedRows) > -1) {

            $(e.row).find('input[type="checkbox"]')[0].checked = true;

        }

    }

[Paul den Dulk]

Hi,

For the above solution to work I need to add .Selectable() to my grid. Otherwise setting the checkbox will fail. As a consequence the rows of the grid show up blue with bold font on mouseover. The makes the site slower en in site make is ugle. Is there a way to turn this highlighting off?

Paul

[christian]

Yeah, just bind the to the click of the checkbox instead of selectedrow, on i.e class name or tagname
$(".gridcheckbox") etc