Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo UI Grid- - Default Sort Date Asc

I'm using kendo UI, and am looking to default sort my grid by ascending date, but can't figure out how to modify this. My understanding is that it is part of the data-source section:

@(Html.Kendo().Grid<CustomerAnimalViewModel>()
                .Name(gridId)
                .HtmlAttributes(new { @class = "grid" })
                .Columns(columns =>
                {
                    columns.Bound(c => c.AnimalId).Visible(false);
                    columns.Bound(c => c.RegistrationNumber).ClientTemplate("<a class='active' href=javascript:viewAnimal(\"" + "#: AnimalId #" + "\",\"" + "#=escape(Name) #" + "\")  >#: RegistrationNumber #</a>");
                    columns.Bound(c => c.Type);
                    columns.Bound(c => c.Prefix);
                    columns.Bound(c => c.Name);
                    columns.Bound(c => c.DateOfBirth).ClientTemplate("#= kendo.toString(DateOfBirth == null ? '' : DateOfBirth, '" + Constants.DateFormat + "') #");
                    columns.Bound(c => c.Sex);
                    columns.Bound(c => c.HMC);
                    columns.Bound(c => c.Usability).Visible(false);
                    columns.Bound(c => c.Status);
                    columns.Command(command => { command.Destroy(); }).Title(Resources.Actions);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()

                    .Model(model =>
                    {
                        model.Id(p => p.AnimalId);
                        model.Field(p => p.RegistrationNumber);
                        model.Field(p => p.Type);
                        model.Field(p => p.Prefix);
                        model.Field(p => p.Name);
                        model.Field(p => p.Status);
                        model.Field(p => p.Sex);
                        model.Field(p => p.HMC);
                        model.Field(p => p.Usability);
                        model.Field(p => p.Status);
                    })
                    .Read(read => read.Action("ReadTypes", "Customer").Data("filterData"))
                    .Destroy(destroy => destroy.Action("DeleteAnimal", "Customer"))
                )
                .Navigatable()
                .Sortable()
                .Filterable()
                .Pageable()

           )
like image 273
Mark Avatar asked Jul 30 '14 19:07

Mark


People also ask

How do I set default sort in kendo grid?

By default, the Grid applies single-column sorting when the Sortable() method is enabled. Alternatively, you can configure single-column sort mode by setting the [ SortMode ]{% if site. core %}(/api/Kendo.

How do I sort data in kendo grid?

This example demonstrates how to enable sorting for the Kendo UI Grid. Since this functionality is built-in, all you have to do is to set the sorting configuration via the sortable grid attribute. Supported sorting modes are single, multiple and mixed.


2 Answers

add .Sort(x=>x.Add("DateOfBirth").Ascending()) in dataSource

@(Html.Kendo().Grid<CustomerAnimalViewModel>()
                    .Name(gridId)
                    .HtmlAttributes(new { @class = "grid" })
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.AnimalId).Visible(false);
                        columns.Bound(c => c.RegistrationNumber).ClientTemplate("<a class='active' href=javascript:viewAnimal(\"" + "#: AnimalId #" + "\",\"" + "#=escape(Name) #" + "\")  >#: RegistrationNumber #</a>");
                        columns.Bound(c => c.Type);
                        columns.Bound(c => c.Prefix);
                        columns.Bound(c => c.Name);
                        columns.Bound(c => c.DateOfBirth).ClientTemplate("#= kendo.toString(DateOfBirth == null ? '' : DateOfBirth, '" + Constants.DateFormat + "') #");
                        columns.Bound(c => c.Sex);
                        columns.Bound(c => c.HMC);
                        columns.Bound(c => c.Usability).Visible(false);
                        columns.Bound(c => c.Status);
                        columns.Command(command => { command.Destroy(); }).Title(Resources.Actions);
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Sort(x=>x.Add("DateOfBirth").Ascending())
                        .Model(model =>
                        {
                            model.Id(p => p.AnimalId);
                            model.Field(p => p.RegistrationNumber);
                            model.Field(p => p.Type);
                            model.Field(p => p.Prefix);
                            model.Field(p => p.Name);
                            model.Field(p => p.Status);
                            model.Field(p => p.Sex);
                            model.Field(p => p.HMC);
                            model.Field(p => p.Usability);
                            model.Field(p => p.Status);
                        })
                        .Read(read => read.Action("ReadTypes", "Customer").Data("filterData"))
                        .Destroy(destroy => destroy.Action("DeleteAnimal", "Customer"))
                    )
                    .Navigatable()
                    .Sortable()
                    .Filterable()
                    .Pageable()

               )
like image 169
Mr.LamYahoo Avatar answered Oct 03 '22 14:10

Mr.LamYahoo


Single column sort:

@(Html.Kendo().Grid<T>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(x=>x.Add("DateOfBirth").Ascending())
    ....)    

Multi-column sort:

@(Html.Kendo().Grid<T>()
    .Name("grid")
    .Sortable(sortable => sortable.SortMode(GridSortMode.MultipleColumn))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(s =>
                {
                    s.Add(l => l.F_NAME).Descending();
                    s.Add(l => l.L_NAME).Descending();                        
                })
    ....)
like image 29
NinjaCoder Avatar answered Oct 03 '22 14:10

NinjaCoder