Customize reordering columns for syncfusion mvc grid

[Gomtesh]

Hi,

I want to customize reordering columns in grid on clientside load event , I tried following code:

    function load(args) {
        var obj = $("#CustomerGrid").ejGrid("instance");
        var col = @(Html.Raw(Json.Encode(ViewBag.CustomerColumnList)));
        $.each(col,function(index,value){
            var obj1 = $("#CustomerGrid").ejGrid("instance");
            if(value.IsColumnDisplay){
                var columnIndex = obj1.getColumnIndexByField(value.ColumnName) + 1;
                var temp = obj1.getColumnByIndex(parseInt(index));
                obj1.reorderColumns(value.ColumnName, temp.field);
            }
        })
    }

but It gives following error in ej.web.all.min.js

Uncaught TypeError: Cannot read property 'find' of undefined

Is there any way to reorder columns using script.

[Prasanna Kumar Viswanathan]

Hi Gomtesh

Thanks for contacting Syncfusion support.

We analyzed the code example at our end and found that you had used load event in your sample. The load event is triggered at initial load. While reordering the columns, we are unable to get the header table in the grid. So, we suggest you to use create event of the ejGrid. This event triggered when the grid is rendered completely.

Please find the code example and sample:

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

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

         .AllowPaging()

         .AllowReordering()

        .EditSettings(edit => { edit.AllowDeleting().AllowEditing().AllowEditOnDblClick(false); })

        .ClientSideEvents(eve => eve.Create("create"))

        .Columns(col =>

            {

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

                col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

                col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();

                col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}").Add();

            })

        )

<script>

    function create(args) {

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

        var col = grid.model.columns;

        $.each(col,function(index,value){

            var obj1 = $("#FlatGrid").ejGrid("instance");

            if(value){

                var columnIndex = obj1.getColumnIndexByField(value.field) + 1;

                var temp = obj1.getColumnByIndex(parseInt(index));

                var column = obj1.getColumnByIndex(columnIndex);

                if(columnIndex <= 4)

                  obj1.reorderColumns(column.field, temp.field);

            }

        })

    }
</script>

 
Sample: http://www.syncfusion.com/downloads/support/forum/121659/ze/Sample1458621534830927

Refer to the Help document for the create event.

http://help.syncfusion.com/js/api/ejgrid#events:create

Regards,
Prasanna Kumar N.S.V