Grid Sort by Group

[Francois]

Hello, this is my very first day with Kendo UI for ASP.NET MVC.

 

01.@(Html.Kendo().Grid<DataLibrary.ProjectCost>()
02.    .Name("CostGrid")
03.    .Columns(columns =>
04.    {
05.        columns.Bound(c => c.Month)
06.            .Width(100)
07.            .Title("Mois")
08.            .Hidden();
09.        columns.Bound(c => c.SupplierName)
10.            .Width(300)
11.            .Title("Fournisseur")
12.            .HtmlAttributes(new { @style = "text-align:left;" })
13.            .HeaderHtmlAttributes(new { @style = "text-align:left;" });;
14.        columns.Bound(c => c.OrderAmount)
15.            .Format("{0:C}")
16.            .Width(100)
17.            .Title("Commandé")
18.            .HtmlAttributes(new { @style = "text-align:right;" })
19.            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#");
20.        columns.Bound(c => c.InvoiceAmount)
21.            .Format("{0:C}")
22.            .Width(100)
23.            .Title("Facturé")
24.            .HtmlAttributes(new { @style = "text-align:right;" })
25.            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#");
26.    })
27.    .DataSource(dataSource => dataSource
28.        .Ajax()
29.        .Sort( s =>
30.        {
31.            s.Add("Month").Descending();
32.            s.Add("SupplierName").Descending();
33.        })
34.        .Aggregates(aggregates =>
35.        {
36.            aggregates.Add(c => c.OrderAmount).Sum();
37.            aggregates.Add(c => c.InvoiceAmount).Sum();
38.        })
39.        .Group(groups =>
40.        {
41.            groups.Add(c => c.Month);
42.        })
43.        .Read(read => read.Action("CostSummary", "Project", new { ID = Model.projectID }))
44.    )
45.    .Events(events => events.DataBound("collapseGroupRows"))
46.)
47....
48.
49.
50.<script type="text/javascript">
51.    function collapseGroupRows() {
52.        var grid = $("#CostGrid").data("kendoGrid");
53.        grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));
54.        $('tr[class*="k-master-row"]').hide();
55.    };
56.</script>

 

Here's my problem: the Sort does not work for the Month column on line 31 (it does work for the SupplierName column). I suspect this has to do with the fact that the Month is hidden or that is is grouped by.

Second issue: I can't figure out how to display the header of column SupplierName left-aligned (lines 12-13); the data is properly aligned but not the header text, is HeaderHtmlAttributes not working proplerly?.

Bonus: to collapse the grid (to the month's totals level) I use a small script: is this the proper way to do this? Is there not an easier built-in method?

Thanks!

 

 

 

 

[Petar]

Hi Francois,

Attached to my reply, you will find a runnable example that, if correctly understand your scenario, is demonstrating(sorting) that is not correctly applied in your application. Can you check the example and let me know if the sorting of the "OrderDate" and "ShipName" fields is correct? 

Also, you can see that three of the column have definitions for their HeaderHtmlAttributes configurations. All three of the columns has a different alignment that is correctly applied. 

Talking about the "bonus" question, the approach you've shared is the one I would suggest to you if you've asked about how to implement the row collapse.

If the sorting in the attached example is not correct, can you give me more details about the behavior that you expect to have as a result? 

Regards,
Petar
Progress Telerik

[Francois]

Thank you for your help.

The code you posted has exactly the same problem as I have. You have:

s.Add("OrderDate").Descending();

... but the display is shown Ascending. In fact it's always shown Ascending regardless of specified sort order (or date format).

Can you please fix your code, That should fix my problem.

Bonus: Can you please change your example to have more than one single line per group, with one line we cannot see the sort order of the group's content.

Thank you kindly

[Francois]

Hello Petar, any news about this?

[Petar]

Hello Francois,

Thank you for the additional details about the targeted functionality!

Attached, you will find a runnable example that demonstrates what you want to implement. To make the grouped results sorted, the grouping should be defined as follows:

.Group(groups =>
{
    groups.AddDescending(c => c.OrderDate);
})

I have also modified the controller code to have more values under each group. Now we can see that the sorting order is correct for the ShipName field.

I hope the provided example will help you implement the targeted functionality in your application.

Regards,
Petar
Progress Telerik

[Francois]

This is the trick:

groups.AddDescending(c => c.OrderDate);

Thanks!