Grid multiselect keep selected records after aplying filter

[Juan Jose Uribe]

Hi, 

I have a grid with local data as datasource, multi select and allowFiltering set as true. I was wondering if there is a way to keep the selected records as selected after aplying a filter (for those selected that match the filter).

I appreciate your guide.

<ContentSection>

    <div class="col-lg-12 no-margin no-padding">

        @using (Html.BeginForm("AsignarEquiposGeotabPost", "ClienteContrato", FormMethod.Post, new { id = "formularioEquipos" }))

        {

            @*Grilla equipos*@

            @(Html.EJ().Grid<IEnumerable<object>>("ListaEquiposGeotab")

            .Datasource(equipos)

            .Columns(col =>

            {

                col.Field("IdEquiposGeotab").IsPrimaryKey(true).Visible(false).Add();

                col.Type("checkbox").Width("5em").Add();

                col.Field("DatabaseName").HeaderText("Base datos").Type("string").Width("10em").Add();

                col.Field("LicensePlate").HeaderText("Placa").Type("string").Width("10em").Add();

                col.Field("DeviceType").HeaderText("Tipo").Type("string").Width("5em").Add();

                col.Field("SerialNumber").HeaderText("Serial").Type("string").Width("10em").Add();

                col.Field("Vin").HeaderText("Vin").Type("string").Width("10em").Add();

                col.Field("IdCuentaGeotab").HeaderText("Cuenta").Type("string").Width("10em").Add();

            })

            .Locale("es-CO")

            .AllowScrolling()

            .IsResponsive()

            .AllowPaging()

            .AllowSearching()

            .AllowFiltering()

            .EditSettings(edit => { edit.AllowDeleting(); })

            .ClientSideEvents(eve => { eve.Create("filtrar"); })

            .ToolbarSettings(toolbar =>

            {

                toolbar.ShowToolbar().ToolbarItems(items =>

                {

                    items.AddTool(ToolBarItems.Search);

                });

            })

            )

        }

    </div>

<script type="text/javascript">

    function filtrar(args) {

        var gridObj = $("#ListaEquiposGeotab").data("ejGrid");

        gridObj.filterColumn("IdCuentaGeotab", "equal", $("#CuentaGeotab").val(), "and", true);

        gridObj.refreshContent();

    }

</script>

[Thavasianand Sankaranarayanan]

Hi Juan,  

Thanks for contacting Syncfusion support. 

We have analyzed your query and we found that you want to maintain the selected record after we filtering the Grid. It is not feasible to maintain the selected record after filtering the Grid. Because while filtering the data we have refresh the whole Grid content. So, selected records are also cleared. 

We have achieved your requirement using actionComplete and actionBegin event of ejGrid control.  

Refer the below code example. 

@(Html.EJ().Grid<Object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.DataSource) 

 

          ----         

 

            .ClientSideEvents(eve => { eve.ActionBegin("GridActionBeginEvent").ActionComplete("GridActionCompleteEvent"); }) 

         

       .Columns(col => 

        { 

            col.Type("checkbox").Width(80).Add(); 

             

            ---- 

             

        }) 

        ) 

    </div> 

     

 

</div> 

<script type="text/javascript"> 

    var rec = []; 

 

    // action complete event when we do for filtering 

    function GridActionCompleteEvent(args) { 

 

        if (args.requestType == "filtering") { // Check the condition 

 

            var data = this.model.currentViewData, len = this.model.currentViewData.length, arrayLength = primaryKeyValuesArray.length; 

            for (j = 0; j < len; j++) { 

 

                for (k = 0; k < arrayLength; k++) { 

 

                    var value = data[j]["OrderID"]; //Get the value of primary key when we virtual scrolling 

                    if (value == primaryKeyValuesArray[k]) { // Check the stored records primary key values and currnet view data primary key value 

                        this.multiSelectCtrlRequest = true; 

                        this.selectRows(j); //Select the row using selectRows method 

                        this.getSelectedRows().find("input").attr('checked', true); 

                    } 

                } 

            } 

        } 

    } 

 

    // Action begin event when do for filtering 

    function GridActionBeginEvent(args) { 

        if (args.requestType == "filtering") {// Check the condition 

            debugger 

            var check = this.checkSelectedRowsIndexes;  // collection which holds the page index and the selected record index 

            if (check.length) { 

                for (var pageInx = 0; pageInx < check.length; pageInx++) { 

                    if (!ej.isNullOrUndefined(check[pageInx])) 

                        rec = getRecords(pageInx, check[pageInx], this, rec); 

                } 

            } 

            var selectedRecords = rec; 

            var length = rec.length; //Get the currently selectedRecords and length using getSelectRecords method. 

 

            primaryKeyValuesArray = []; // Create a global array for future use 

 

            for (i = 0; i < length; i++) { 

                var value = selectedRecords[i]["OrderID"] 

                primaryKeyValuesArray.push(value); //Push the primary key values of currently selected records 

            } 

        } 

    } 

 

    // to get the selected record in all pages 

    function getRecords(pageInx, inx, proxy, rec) { 

        if (inx.length) { 

            for (var i = 0; i < inx.length; i++) { 

                var pageSize = proxy.model.pageSettings.pageSize;  //gets the page size of grid 

                var data = proxy.model.dataSource[pageInx * pageSize + inx[i]]; 

                rec.push(data);     //pushing all the selected Records 

            } 

        } 

        return rec; 

    } 

</script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/137152/ze/SyncfusionMvcApplication13_(11)1212805522.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:actionbegin 

Link: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

For further detail about to get the selected record in all pages. Please refer the below knowledge base link. 

KB link: https://www.syncfusion.com/kb/7624/how-to-get-selected-records-from-all-page-in-multi-checkbox-feature 

Note: if you don’t want to use the above work around then we suggest you to enable field property in the checkbox column. 

  

Regards, 

Thavasianand S. 

[Juan Jose Uribe]

Thanks so much, your code give me a guide to achive what i want.

Kind regards,

Juan J. Uribe

[Thavasianand Sankaranarayanan]

Hi Juan, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.