We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Reordering columns without a fieldId

Thread ID:

Created:

Updated:

Platform:

Replies:

131993 Aug 7,2017 01:01 PM Aug 8,2017 08:36 AM ASP.NET MVC 1
loading
Tags: Grid
Andrew
Asked On August 7, 2017 01:01 PM

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 [Syncfusion]
Replied On August 8, 2017 08:36 AM

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. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;