[Solved] reorder columns with clientrowtempate

[Phani]

Hi there, 

I have a grid with the clientRowTemplate and the ability to reorder columns. I'm saving the reordered columns state and retrieving on the next user login, when I call the grid.reorderColumn() on$(window).ready(), the columns are getting reordered but the rows are not. If i removethe clientrowtemplate, the rows are getting reordered too. Is there a way to reorder the rows along with the columns keeping the clientRowTemlpate on the grid? 

@(Html.Kendo().Grid<JobRequest>()
    .Name("Jobs")
    .Columns(columns =>
    {
        columns.Bound(m => m.Job_Name)
            .Width(110);
        columns.ForeignKey(m => m.TimeFrame, (IEnumerable<TimeFrameType>)Model.timeFrames, "TimeDiff", "TimeDiffName")
            .Filterable(filter => filter
                .Extra(false)
                .Operators(operators => operators
                    .ForNumber(str => str.Clear()
                        .IsLessThan("Less Than")
                    )
                    .ForString(str => str.Clear()
                        .IsEqualTo("Less Than")
                    ))
             )
            .Width(110);
        columns.Bound(m => m.Started)
            .Width(75).Filterable(false).
            Format("{0:MM/dd hh:mm}");
        columns.Bound(m => m.Run_Time)
            .Width(75)
            .Title("Run Time").Filterable(false);
        columns.Bound(m => m.Last_Update)
            .Width(75)
            .Format("{0:MM/dd hh:mm}").Filterable(false);
        columns.Bound(m => m.Job_Priority)
            .Width(40);
        columns.Bound(m => m.Job_ID)
            .ClientTemplate("<a href='javascript:showJobSetWindow(#=Job_ID#)'>#=Job_ID#</a>")
            .Width(90);
        columns.ForeignKey(m => m.Job_Class, (System.Collections.IEnumerable)ViewData["jobClass"], "Value", "Text")
            .Width(85);
        columns.Bound(m => m.WF_Name)
            .Width(200);
        columns.Bound(m => m.User_ID)
            .Width(75);
        columns.Bound(m => m.Division)
            .Width(75);
        columns.Bound(m => m.Cust_Ref)
            .Width(85);
        columns.ForeignKey(m => m.JobStatus, (System.Collections.IEnumerable)ViewData["jobStatus"], "Value", "Text")
            .Width(85);
        columns.ForeignKey(m => m.StepStatus, (System.Collections.IEnumerable)ViewData["stepStatus"], "Value", "Text")
            .Width(85);
        columns.Bound(m => m.Task_Name)
            .Filterable(false)
            .Width(270);
        columns.Bound(m => m.User_System)
            .Width(100);
        columns.ForeignKey(m => m.JobStatus, (System.Collections.IEnumerable)ViewData["jobStatus"], "Value", "Text")
           .Width(85)
           .Title("eReport");
    })
    .Events(events => events
        .FilterMenuInit("filterMenuInit").ColumnReorder("colReorder")
    )
    .ClientRowTemplate(
        "<tr class='clr#:JobStatus#'>" +
        "<td>#: Job_Name #</td>" +
        "<td>#: TimeFrame #</td>" +
        "<td>#: kendo.toString(Started, 'MM/dd hh:mm') #</td>" +
        "<td>#: Run_Time #</td>" +
        "<td>#: kendo.toString(Last_Update, 'MM/dd hh:mm') #</td>" +
        "<td>#: Job_Priority #</td>" +
        "<td><a href='javascript:showJobSetWindow(#=Job_ID#)'>#=Job_ID#</a></td>" +
        "<td>#: Job_Class #</td>" +
        "<td>#: WF_Name #</td>" +
        "<td>#: User_ID #</td>" +
        "<td>#: Division #</td>" +
        "<td>#: Cust_Ref #</td>" +
        "<td># if(JobStatus == \"ERRORED\"){#<a href='javascript:showJobLogWindow(#=Job_ID#)'>#=JobStatus#</a></td>#}else{##=JobStatus##} #</td>" +
        "<td>#: StepStatus #</td>" +
        "<td>#: Task_Name #</td>" +
        "<td>#: User_System #</td>" +
        "<td># if(JobStatus==\"COMPLETED\"){#<a href='javascript:showeReportsWindow(#=Job_ID#)'>View</a></td>#}else{}#</td>"+
         "</tr>"
    )
    .Pageable()
    .Sortable()
    .Scrollable(a => a.Height("auto"))
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Filterable(filterable => filterable
        .Enabled(true)
        .Extra(true)
        .Messages(m => m.IsTrue("Yes"))
        .Messages(m => m.IsFalse("No"))
        .Operators(operators => operators
            .ForString(str => str
                .Clear()
                .Contains("Contains")
                .DoesNotContain("Not Contains")
                .StartsWith("Starts with")
                .EndsWith("Ends with")
            )
        )
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .PageSize(20)
        .Events(e => e.RequestEnd("onReqEnd"))
        .Read(read => read.Action("ReadData", "Home")
        .Data("ReadData"))
    )

)

This is the function i'm calling on Window.ready

function reorderCheck() {
       var grid = $("#Jobs").data("kendoGrid");
       var cols = grid.columns;
       //var cs = JSON.parse($.cookie("colState"));
       var cs;
       var userSetting = '@Model.UserSetting'.replace('columns=', '').replace(/"/g, '"');
       if (userSetting != "")
           cs= JSON.parse(userSetting);
       var curColumns=grid.columns;
       if (cs) {
           if (cs.length > 0) {
               for (var i = 0; i < cs.length; i++) {
                  var curColState = cs[i];

                   $.map(grid.columns, function (elementOfArray, indexInArray) {
                       if (elementOfArray.field == curColState.field) {
                           grid.reorderColumn(i, grid.columns[indexInArray]);

                       }
                   });

               }
           }
       }
   }

Thanks!
Phani

[Dimo]

Hello Phani,

Column reordering and client row templates cannot be used at the same time, because the Grid doesn't know how to reorder the custom contents in the row template. In your case the row template resembles a standard row, but the Grid doesn't know that.

Basically, your scenario does not require a row template. You can use standard bound columns and 2-3 column templates (client templates).

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#clienttemplate

Then apply the custom table row CSS classes in the Grid's dataBound event by iterating all table rows and checking the JobStatus data item value.

- subscribe to the dataBound event
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

- get the tbody in the handler
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-tbody

- iterate the table rows in the tbody

- for each table row get the data item
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

- once you have the data item, get the desired value
http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-get

- apply a CSS class to the table row

Regards,
Dimo
Telerik