Sorting items on autocomplete options while filtering

3 posts, 1 answers
  1. Janusz
    Janusz avatar
    15 posts
    Member since:
    Jul 2012

    Posted 23 Mar Link to this post

    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

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 24 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Janusz
    Janusz avatar
    15 posts
    Member since:
    Jul 2012

    Posted 28 Mar in reply to Tsvetina Link to this post

    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

     

Back to Top