Reordering columns without a fieldId

[Andrew]

I'm trying to implement a button that resets any column reordering a user has performed. To do so, I find the original order using the column data attribute setup by the unobtrusive C# code then compare each original column to the current set of columns. This works fine except when the column doesn't have a fieldId, such as a checkbox column. How can I reorder a column that doesn't have a fieldId?

An ideal solution would be to just set the Grid's columns to what comes from the data attribute instead of trying to match columns and reorder them. I have tried doing something like "grid.model.columns = originalColumns" but this doesn't work.

I'm doing all this from a ToolbarClick event if that makes a difference.

[Mani Sankar Durai]

Hi Andrew, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you are trying to reorder the non-mentioned field for the columns. We can also achieve it using index of the columns and without giving the field names. 

Refer the code example 

<button id="btn"></button> 

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

               ... 

                              .AllowReordering() 

       .Columns(col => 

        { 

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

            ... 

 

        })) 

 

<script> 

    $(function () { 

        $("#btn").ejButton({ 

            text: "reorder columns", 

            click: function (args) { 

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

                grid.reorderColumns(0, 2);   // reorder the columns using index 

 

            } 

        }) 

    }) 

</script> 

If you have enabled the property as EnablePersistance in grid and try to restore the columns in grid. We can achieve your requirement by stored the original columns ordered in window.localstorage using load in grid. Refer the code example 

<input type="button" id="restore" value="ResetColumns" />  

<input type="button" value="unobtrusive" onclick="uClick()" />  

  

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

                 .Datasource((IEnumerable<OrdersView>)ViewBag.datasource)  

                    .AllowReordering()  

                    .AllowPaging()  

                     .EnablePersistence()  

                    .ClientSideEvents(e=>e.Load("onLoad"))  

                                  .Columns(col =>  

                    {  

                        . . .  

                    })  

)  

function onLoad(args) {  

         

        if (window.localStorage.getItem("Columns") == null)    

            window.localStorage.setItem("Columns", JSON.stringify(this.model.columns));//store the grid Original ordered columns in local storage variable  while initial rendering  

    }    

 

After re-ordering the columns we can restore the original state of the columns by clicking the external button. Please refer to the following code example,  

$("#restore").ejButton({    

        click: function () {    

                         var gridModel = JSON.parse(window.localStorage.$ej$ejGridFlatGrid); //get the grid Model   

         gridModel.columns = JSON.parse(window.localStorage.getItem("Columns")); // get the initial grid columns from local storage and assign into gridmodel which is previously stored in the create event    

           $("#FlatGrid").ejGrid(gridModel);//rerender the grid which is intially loaded  columns    

    

        }    

    

    })    

 

To reset the column order from unobtrusive settings. Please refer to the following code example,  

input type="button" value="unobtrusive" onclick="uClick()" />  

  

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

...                   .AllowReordering()                    

                    .AllowPaging()  

                     .EnablePersistence()  

              .Columns(col =>  

                    {  

. . .  

                    })  

)  

 <script type="text/javascript">  

        . .  .  

function uClick() {  

         var grid = $("#FlatGrid"); //GridID  

        var gridObj = grid.ejGrid("instance");//Grid Instance  

         var originalColumns = grid.data("ej-columns");  

            var  gridModel= JSON.parse(window.localStorage.$ej$ejGridFlatGrid)  

       gridModel.columns = originalColumns;  

        $("#FlatGrid").ejGrid(gridModel);  

    }  

 

Note: Here $ej$ejGridFlatGrid means $ej-common, $ejGrid-controlName/pluginName and FlatGrid-control id  

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.