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()
)
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.
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.
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()
)
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();
})
....)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With