Sorting items on autocomplete options while filtering

[Janusz]

Hi,

I use filtering on kendo grid in row mode. This works fine, except one detail. I want to have the list sorted, not in that order you can see in the attached screen. I've noticed that if I changed the sort option to "Sort(sort => sort.Add("ClientName")", the autocomplete would get the items alphabetically. But what about another fields, where I also want to have the right order. And of course I don't want to change the global order.

@(Html.Kendo().Grid<PostTaskModel>().Name("AktualneGrid")
    .Columns(cols =>
    {
        cols.Bound(p => p.CaseNumber).Width(80).ClientTemplate("#=gotoTaskWindow(data.CaseNumber, data.Ident)#")
            .HtmlAttributes(new { @class = "link-cell" }).Locked().Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        cols.Bound(p => p.Subject).Width(200).ClientTemplate("<b>#=Subject#</b>").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        cols.Bound(p => p.DocumInfo).Width(50).Title("Niep.wiad.").ClientTemplate("#=BoldNotRead(data.DocumInfo, data.NoReadCnt)#");
        cols.Bound(p => p.Description).Width(600).ClientTemplate("#:Truncate(Description, descLength)#").Title("Opis zgłoszenia . . . . .")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        cols.Bound(p => p.ModifyDate).Width(60).Format("{0:yyyy-MM-dd HH:mm}");
        cols.Bound(p => p.Applicant).Width(100).Filterable(ftb => ftb.Multi(true));
        cols.Bound(p => p.FinishTerm).Width(60).ClientTemplate("#=BoldBeforeNow(data.FinishTerm)#");
        cols.Bound(p => p.EmployeeName).Width(100).Filterable(ftb => ftb.Multi(true));
        cols.Bound(p => p.ClientName).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        cols.ForeignKey(p => p.IssueKindId, (IEnumerable)ViewData["casetypes"], "Ident", "Description")
            .Title("Nazwa rodzaju").Width(200).Filterable(ftb => ftb.Multi(true)).Hidden();
        cols.ForeignKey(p => p.Priority, (IEnumerable)ViewData["priorities"], "Symbol", "Description")
            .Title("Opis kategorii").Width(100).Filterable(ftb => ftb.Multi(true));
        cols.Bound(p => p.ProductName).Width(200).Filterable(ftb => ftb.Multi(true));
    })
    .Sortable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Pageable(pager => pager.PageSizes(new[] { 10, 15, 20, 30, 50 }).Input(true).Refresh(true))
    .Groupable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .ColumnMenu()
    .Navigatable()
    .Selectable(sel => sel.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))
    .AllowCopy(true)
    .HtmlAttributes(new { style = "min-width:1840px;" })
    .Events(e => e.DataBound("gridFocusDataBound"))
    .AutoBind(false)
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.Ident))
        .ServerOperation(false)
        .Sort(sort => sort.Add("ModifyDate").Descending())
        .Read(read => read.Action("Aktualne_Read", "Async").Data("filterGrid"))
        .Events(events => events.Error("errorHandler"))
))

I will be grateful for your help

Josef

[Tsvetina]

Hello Josef,

Based on the code from this sample that shows how to filter the AutoComplete DataSource, you can also sort it:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(225);
        columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.ShipCity).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.Freight).Width(255).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
    })
    .Events(events => events.DataBound("sortAutoCompleteDataSource"))
// .............

function sortAutoCompleteDataSource(e) {
    e.sender.element.find(".k-autocomplete input[data-text-field='ShipName']").data("kendoAutoComplete").dataSource.sort({ field: "ShipName", dir: "asc" });
    e.sender.element.find(".k-autocomplete input[data-text-field='ShipCity']").data("kendoAutoComplete").dataSource.sort({ field: "ShipCity", dir: "asc" });
}

Regards,
Tsvetina
Telerik by Progress

[Janusz]

Thanks a lot, that works fine. I put it into a small function.

function sortAutoCompleteDataSource(e, fieldNames) {
    for (var x = 0; x < fieldNames.length; x++) {
        e.sender.element.find(".k-autocomplete input[data-text-field='" + fieldNames[x] + "']").data("kendoAutoComplete").dataSource.sort({ field: fieldNames[x], dir: "asc" });
    }
}

and use it as e.g.  

function gridAktualneDataBound(e) {
    gridFocusDataBound(e);
    sortAutoCompleteDataSource(e, ["ClientName", "Applicant", "EmployeeName"]);
}

Regards Josef