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. Image for the cookie policy date

Customize reordering columns for syncfusion mvc grid

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.

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team January 15, 2016 10:02 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon