Grid Troubles :(

[Luke]

I tried to reselect rows manually using:

function SelectRows(Grid, RowIndexes) {

            var obj = Grid;

            obj.multiSelectCtrlRequest = true;

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

                obj.selectRows(RowIndexes[i]);

            }

        }

This did not appear to work though?

Updated on Aug 09, 2016 09:11 AM

I have since found Grid.selectedRowsIndexes which answers my first question however the second question remains

Updated on Aug 09, 2016 06:24 AM

Hello,

I am looking at your multiple selection example: http://asp.syncfusion.com/demos/web/grid/basicselection.aspx but I cannot find a way of getting the selected rows (a callback type of thing) I basically want to do something in javascript based on the selected rows, is this possible?

Secondly I update the grid every 30 seconds via a .net timer and a re-databind, this however loses the selected rows, is there a way of maintaining the selected rows?

Many Thanks,

Luke

[Jayaprakash Kamaraj]

Hi Luke, 

 

Thank you for contacting Syncfusion support. 

 

Query : “I update the grid every 30 seconds via a .net timer and a re-databind, this however loses the selected rows, is there a way of maintaining the selected rows?”  

  

 We can use SelectedRowIndexes property to maintain initial selection, it will select only one row and multiple rows cannot be maintained. But we can achieve this by saving the selected indexes in the localStorage on window unload event and re-select the rows in the DataBound event while re-rendering as follows.  

  

  

<ej:Grid ID="Grid" runat="server" AllowPaging="true" ClientIDMode="Static" Selectiontype="Multiple">  

    . . .   

    <ClientSideEvents RowSelected="OnRowSelected" DataBound="OnDataBound" />  

</ej:Grid>  

  

<script type="text/javascript">  

        window.addEventListener("unload", function () {  

            var grid = $("#Grid").ejGrid("instance");  

  

            /* Saving the selected row indexes  

             * grid.selectedRowIndexes will contain the index of the rows selected.  

             */   

            window.localStorage.setItem("ejGridSelection", JSON.stringify(grid.selectedRowsIndexes))  

        });  

  

        function OnDataBound() {  

            var indexes = JSON.parse(window.localStorage.getItem("ejGridSelection"));  

            if (indexes)  

                this.selectRows(indexes); //Re-Select on initial rendering  

        }  

  

</script>  

  

  

  

Please refer to the below link for DataBound event and selectRows method.  

  

https://help.syncfusion.com/js/api/ejgrid#methods:selectrows  

  

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

  

Regards, 

Jayaprakash K. 

[Luke]

Many thanks for your response on this and thanks for your superb support, I have pretty much managed to do what I was attempting using your code above, I have one small problem remaining, OnRowSelected is not being triggered when toggling a row to the unselected state. Is there another setting for this?

[Luke]

Also one other slight issue I've found is that the column filters are lost like the row selection was. Is there something similar I need to do to put these in local storage?

[Jayaprakash Kamaraj]

Hi Luke,  

 

Thank you for the update.  

 

Query 1: “Row selected event is not triggered when toggle selection enabled”  

 

This event will have triggered when the row is selected. So, That event will not being triggered when toggling row to the unselected state. We suggest you to use RecordClick event for your requirement. This event triggers when we click the record. Please refer to the code example and Help document,  

Code example:  

<Grid>  

  

<ej:Grid ID="Grid1"    AllowPaging="True"  

            EnableRowHover="true"       

              AllowReordering="false" Locale="en-US"AllowMultiSorting="false"   

              AllowSelection="True" Selectiontype="Multiple" AllowFiltering="true"  

               runat="server">  

               

    . . .  

             

             <PageSettings PageSize="15" />  

                

            <SelectionSettings EnableToggle="true"  />  

  

          <ClientSideEvents DataBound="OnDataBound" RecordClick="OnrecordClick" RowSelected="OnRowSelected"   />  

  

        </ej:Grid>  

  

<script type="text/javascript">  

  

function OnrecordClick(args) { //Will be triggered on every record click.   

  

          // Do something  

           

      }  

</scrip>  

 

Help document: https://help.syncfusion.com/js/api/ejgrid#events:recordclick  

 

Query 2: “Column filtering is not maintaining while refresh the data”  

 

Yes, we can do the same for save the previous state of filtering records. We can store the Filtered columns in Local storage and re- filtered the Grid by using DataBound event. Please refer to the below code example and Help document,  

Code example:  

window.addEventListener("unload", function () {  

          var grid = $(".e-grid").ejGrid("instance");  

           

  

          // Save the filtered record details  

          window.localStorage.setItem("ejFilterRecords", JSON.stringify(grid.model.filterSettings.filteredColumns))  

            

      });  

  

function OnDataBound() {  

  

  

          var Filter = JSON.parse(window.localStorage.getItem("ejFilterRecords"))  

            

          if (Filter) {  

              this.model.filterSettings.filteredColumns = Filter; // Re-store the filtered details  

              this.refreshContent(); // Refresh the Grid content  

          }  

  

      }  

 

Help document: https://help.syncfusion.com/js/api/ejgrid#methods:refreshcontent  

 

Regards,  

 

Jayaprakash K.