automatically check after search, filter, order or paging

[Luis Carlos]

Good evening.

I have a table with a column check, so, when it is created I automatically check some checkboxes (in this example only the row with date 05/05/2008) as you can see in the below image.

However, once I have searched, filtered or ordered, it automatically uncheck this row. Is there any way to keep this row checked?

I will be awaiting for your reply, thank you in advance.

Regards, Luis Carlos.

[Prasanna Kumar Viswanathan]

Hi Luis, 

 

Thanks for contacting Syncfusion support. 

 

Based on your query that you need to maintain the selection while performing searching and filtering operation. According to your screenshot we suspect that you have render the ejCheckBox column in Grid rows using columnTemplate.  

 

In Grid we have default support to select multiple rows Grid by using the checkbox column and it can be enable by setting the column type as checkbox. It also provides the option to select/deselect all the rows in Grid using a checkbox in the corresponding column header.  

 

If the field property of checkbox column is not defined, then it acts as a template column. If you want to perform filtering, sorting, searching then we need to enable filed property of column in Grid.  

 

Refer the below code example. 

<script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                allowPaging: true, 

                allowSearching : true, 

                allowFiltering: true, 

                allowSorting: true, 

                allowSelection: true, 

                toolbarSettings : { showToolbar : true, toolbarItems : ["search"] }, 

                 

                columns: [ 

 

                         { field:"Selection",type:"checkbox", width: 50 }, 

 

                        { field: "OrderID", headerText: "Order ID", width: 75, isPrimaryKey: true , textAlign: ej.TextAlign.Right}, 

                         

                          ---- 

 

                ] 

            }); 

        }); 

    </script> 

We have prepared a simple JsPlayground sample in the following link. 

JsPlayground link: https://jsplayground.syncfusion.com/tpjm0at3 

Refer the help documentation. 

Link: https://help.syncfusion.com/js/grid/selection#multiple-row-selection-using-checkbox-column 

 

Regards, 

Prasanna Kumar N.S.V 

[Luis Carlos]

Good evening.

I am sorry, but I could not replicate your table behaviour in my website. I have attached a zip file which contains two files, one of them is the grid settings and the other the grid model. 

First step, I have checked some checkboxes. 

Second step, I order by a column, I search something or I filter by a column. 

Third step, I see unchecked some checkboxes that I have previously checked, when they should keep checked.

I do not know why I have a different behaviour than your sample.

I will be awaiting for your reply, thank you again.

Regards, Luis Carlos.

Attachment: checkedTableSyncfusion_b1efd8fa.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

Thanks for the update.  

 

We have checked the attachments. We could see the Grid model doesn’t have field name for the checkbox column which is the root cause of the problem. To maintain the selection in Grid after performing any actions, it must to define the field name and those field must be present in the datasource bound to the Grid. Based on your code example and datasource, we have prepared a sample that can be referred from the following jsPlayground.  

 

https://jsplayground.syncfusion.com/g1btkgqq 

 

Refer to the code example.  

 

<div id="Grid"></div> 

<script type="text/javascript"> 

    $(function () { 

        var data = [{ "FaseCur": 6, "Id": "359d2243-b4ac-40ce-a132-9461ab4ae480" }, 

          . . . 

                 . . 

        ]; 

 

        for (var d = 0; d < data.length; d++) { 

            data[d].Verified = (d % 2 == 0); 

        } 

        $("#Grid").ejGrid( 

        { 

            "allowPaging": true, 

            "columns": [ 

                           { 

                               "type": "checkbox", "width": 40,  

                               "field": "Verified" 

                           }, 

            ], 

        } 

        ); 

 

    }); 

 

</script> 

  

Please make a note, for demo purpose, we have updated the checkbox column’s field in a programmatic way.  

 

Regards,  

Seeni Sakthi Kumar S.