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.
Syncfusion Feedback

Customize reordering columns for syncfusion mvc grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121659 Jan 14,2016 09:20 AM UTC Jan 15,2016 10:02 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Gomtesh
Asked On January 14, 2016 09:20 AM UTC

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 [Syncfusion]
Replied On 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

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.

Warning Icon 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.Close Icon

;