Sorting Grid on Editor Template column

3 posts, 0 answers
  1. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 09 Oct 2017 Link to this post

    Hello there. I am having a bit of an issue sorting a grid. I want to sort on dropdown column that is populated using an editor template. However, when i click on the MaterialCategory column to sort the grid, the grid is not sorted.

    Here is the grid

    01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.Text>()
    02.    .Name("PlanPlanTextGrid")
    03.    .Columns(columns =>
    04.    {
    05.        columns.Group(TextGroup => ScriptureGroup
    06.               .Title("<center>Text</center>")
    07.               .Columns(dd =>
    08.               {
    09.                   dd.Bound(e => e.MaterialCategory).Title("Type").Width(108).ClientTemplate("#=MaterialCategory.ShortName#");
    10.                   dd.Bound(e => e.Product).Title("Item #").Width(125).ClientTemplate("#=Product.ItemNumber#").Sortable(false);
    11.                   dd.Bound(e => e.ProductName).Title("Description").Width(160);
    12.               })
    13.        );
    14.        columns.Command(e => e.Destroy().Text(" ").HtmlAttributes(new { @title = "Delete" })).Width(1);
    15.    })
    16.    .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
    17.    .Editable(editable => editable.Mode(GridEditMode.InCell))
    18.    .Navigatable()
    19.    .Sortable(s => { s.SortMode(GridSortMode.SingleColumn);  })
    20.    .DataSource(dataSource => dataSource
    21.        .Ajax()
    22.        .Batch(true)
    23.        .ServerOperation(false)
    24.        .Model(model =>
    25.        {
    26.            model.Id(p => p.PlanTextID);
    27.            model.Field(p => p.MaterialCategory).DefaultValue(ViewData["defaultMaterialCategory"] as P2I_UI.Models.ViewM.MaterialCategoryVM);
    28.            model.Field(p => p.Product).DefaultValue(ViewData["defaultProduct"] as P2I_UI.Models.ViewM.ProductVM);
    29.        })
    30.        .Create("Text_Create", "PlanText")
    31.        .Read("Text_Read", "PlanText")
    32.        .Update("Text_Update", "PlanText")
    33.        .Destroy("Text_Delete", "PlanText")
    34.    )
    35.)

     

    Now if i change the materialCategory column from

    dd.Bound(e => e.MaterialCategory).Title("Type").Width(108).ClientTemplate("#=MaterialCategory.ShortName#");

     

    To

    dd.Bound(e => e.MaterialCategory.MaterialCategoryID).Title("Type").Width(108).ClientTemplate("#=MaterialCategory.ShortName#");

     

    Then the grid's sorting function works. But, the downside to this is that if i want to edit the MaterialCategory, a textbox with the MaterialCategory Id is provided instead of a dropdown list.  How do i fix this issue? thanks 

    Here is the rest of the code.

        public class Text
        {
            public int TextID { get; set;
     
            [UIHint("MaterialCategoryEditor")]
            [Required(ErrorMessage = "MaterialCategory is required")]
            public MaterialCategoryVM MaterialCategory { get; set; }
     
            public int MaterialCategoryID { get; set; }
     
            [UIHint("ProductEditor")]
            [Required(ErrorMessage = "Product is required")]
            public ProductVM Product { get; set; }
     
            public string ProductName { get; set; }
    }
     
     
        public class MaterialCategoryVM
        {
            public int MaterialCategoryID { get; set; }
            public string MaterialCategoryName { get; set; }
            public string ShortName { get; set; }
            public bool Active { get; set; }
        }
     
        public class ProductVM
        {
            public int ProductID { get; set; }
     
            public string ItemNumber { get; set; }
     
            public string Title { get; set; }
        }
     
    MaterialCategoryEditor
    @(Html.Kendo().DropDownListFor(m => m)
            .Name("MaterialCategory")
            .DataTextField("ShortName")
            .DataValueField("MaterialCategoryID")
            .DataSource(dataSource =>
            {
                dataSource.Read(read => read.Action("GetMaterialsList", "PlanText")).Custom().Sort(s => s.Add("MaterialCategoryID"));
            })
             
    )
    @Html.ValidationMessageFor(m => m)

     

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 11 Oct 2017 Link to this post

    Hello, Chinonso,

    The described result is expected because the Grid can sort and filter automatically only standard data types(string, int, DateTime etc).

    The sorting can be achieved, but it will require custom logic on the server to filter the data based on the passed field name and direction.

    Another option will be to use the custom compare function:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-sort.compare 

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 11 Oct 2017 in reply to Stefan Link to this post

    Thanks Stefan, I will try that and get back to you.
Back to Top