Sorting Grid on Editor Template column

[Chinonso]

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)

 

 

 

 

[Stefan]

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

[Chinonso]

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

[Peadey]

You wrote:
"...sorting can be achieved, but it will require custom logic on the server..."

May I ask how sorting can be achieved in a Grid like here:

https://demos.telerik.com/aspnet-mvc/grid/editing-custom

on "Category" Column?

 

Thanks a lot!

[Georgi Denchev]

Hi Peter,

You can modify the sort descriptor through the DataSourceRequest object in the Read Action of your controller.

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    // Check if any sorts have been applied.
    if (request.Sorts != null)
    {
        // Loop through each sort.
        foreach (var sort in request.Sorts)
        {
            // Check if the Category column is being sorted
            if (sort.Member == "Category")
            {
                // Sort by the CategoryName instead of the Object.
                sort.Member = "Category.CategoryName";
            }
        }
    }
}

Best Regards,
Georgi Denchev
Progress Telerik

[Peadey]

Works perfectly! Thanks, Georgi!