This is a migrated thread and some comments may be shown as answers.

Sorting Grid on Editor Template column

5 Answers 236 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chinonso
Top achievements
Rank 1
Chinonso asked on 09 Oct 2017, 09:35 PM

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)

 

 

 

 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 11 Oct 2017, 11:14 AM
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.
0
Chinonso
Top achievements
Rank 1
answered on 11 Oct 2017, 01:45 PM
Thanks Stefan, I will try that and get back to you.
0
Peter
Top achievements
Rank 1
answered on 03 Feb 2021, 08:21 PM

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!

0
Georgi Denchev
Telerik team
answered on 05 Feb 2021, 09:43 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Peter
Top achievements
Rank 1
answered on 16 Feb 2021, 10:24 AM
Works perfectly! Thanks, Georgi!
Tags
Grid
Asked by
Chinonso
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Chinonso
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Georgi Denchev
Telerik team
Share this question
or