Kendo UI Grid- - 默认排序日期升序

Posted 2023-05-07

【中文标题】Kendo UI Grid- - 默认排序日期升序

【英文标题】：Kendo UI Grid- - Default Sort Date Asc

【发布时间】：2014-09-22 15:01:40

【问题描述】：

我正在使用剑道 UI，并希望默认按升序对我的网格进行排序，但不知道如何修改它。我的理解是它是数据源部分的一部分：

@(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()

           )

【参考方案1】：

在dataSource中添加.Sort(x=>x.Add("DateOfBirth").Ascending())

@(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()

               )

【讨论】：

是的，它有帮助 谢谢。 :) 但是，有一件事。它实际上是用这个触发剑道网格排序（你会在列名后面得到带有这个的排序图标）。所以，我想如果您必须在将列表显示在网格中之前对其进行排序，您必须从 API 或后端本身进行。

【参考方案2】：

单列排序：

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

多列排序：

@(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();                        
                )
    ....)

【参考方案3】：

您的数据源需要在将其发送到网格之前进行排序。

在您的“ReadTypes”操作中，您可能会得到一个 CustomerAnimalViewModel 列表。您可以通过

对列表使用 linq 查询

.OrderBy(d => d.DateOfBirth)