Group header problem when customising the header text

[PaulH]

I have a grid reading data from a SharePoint online list and one of the columns is a Choice type column that permits multiple values - maximum of 3 entries currently and unlikely to spread beyond 5. When getting the data using REST (getbytitle) the column comes back as a null if no item is selected or an object - collection of strings. I am using the template declaration within the grid column definition to use a function to extract the chosen items and concatenate them together into a comma separated list for display in the grid - see below:

{
    field: "BusinessDevelopmentProject",
    title: "Business Development Project",
    aggregates: ["count"],
    groupHeaderTemplate: "Project: #= GetBDProject(value)# - Count: #=count#",
    template: "<span>#= GetBDProject(BusinessDevelopmentProject) #</span>"
}

 

The function is as follows:

function GetBDProject(project) {
    if (project == null || project == undefined) return '';
    var projectString = '';

    for (var i = 0; i < project.results.length; i++) {
        projectString += project.results[i];
        if (i < (project.results.length - 1)) projectString += ', ';
    }
    return projectString;
};

 

This works perfectly for the column itself and when choosing to group by the column the grouping works OK and the grouping of those records with no project chosen is fine. But once I move to a page in the grid where the grouping changes to one with a value, so wants to group by it, the grid generates the following error and just sits with the loading graphic cycling permanently:

Uncaught SyntaxError: Unexpected identifier
    at Function (<anonymous>)
    at o.filter (kendo.all.min.js:11)
    at kendo.all.min.js:11
    at N (kendo.all.min.js:11)
    at o.select (kendo.all.min.js:11)
    at o.group (kendo.all.min.js:11)
    at Function.o.process (kendo.all.min.js:11)
    at init._queryProcess (kendo.all.min.js:11)
    at init.query (kendo.all.min.js:11)
    at init._query (kendo.all.min.js:11)

 

Is there something else I need to do to get the group header to work for a column with a function in for formatting?

 

Thanks in advance for any assistance.

[Stefan]

Hello Paul,

I was not able to reproduce the same issue on my side.

I made an example using columnGroupTemplate with value and it is working as expected:

http://dojo.telerik.com/ONiRi

I can assume, that there is a custom factor which we are overlooking at this moment. Could you please modify the provided example or send a new one which is reproducing the issue, so I can assist further?

Regards,
Stefan
Telerik by Progress

[PaulH]

Thanks for that. I've been in and edited the example and added the groupable property as in practice the grid will not be grouped by default but will allow the user to choose to group it. Having done that to your example I get some very odd results on the display - both in Firefox and IE11. This may be related. Can you please review?

[Stefan]

Hello Paul,

Once the example is modified from another user, the URL will be changed.

Could you please share with us the modified example, so I can investigate further.

Thank you in advance.

Regards,
Stefan
Telerik by Progress

[PaulH]

Sorry, I hadn't noticed that. Try this:

http://dojo.telerik.com/ONiRi/3

In this, I've simply added the groupable: true option. Once set the example comes up grouped by default and displaying OK. If you remove the grouping, then group by name, everything works fine. However, if you try to re-group by "descriptio" again then the display, for want of a better description, gets screwed up. I believe this is related to the problem I'm experiencing. With my problem, I am paging at 20 rows. On my first page the column that is being grouped on is null as there is no value in the field at all. But on the second page it then changes to the first value in the grouping column so you get a new group header. When trying to move to the next page the page does not display and instead you just get the usual circling loading graphic and the next page never displays. If you click back to the first page then it's fine. If you remove the grouping then it allows you to step through the pages perfectly.

[PaulH]

Also check out this version:

http://dojo.telerik.com/IhURIp

[Stefan]

Hello Paul,

The issue with the example is because if the Grid is groupable, and the specific column can be grouped manually the column.aggregates property have to be used with the corresponding aggregates:

http://dojo.telerik.com/IhURIp/2

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.aggregates

Still, this may not be the same issue in the actual application. If additional assistance is needed, please modify the example or provide a new one, and I will gladly assist.

Regards,
Stefan
Telerik by Progress

[PaulH]

I agree, that does resolve that particular issue and revisiting my original code I can see that I am doing that in my code so I don't get that problem. I suspect the issue may be more to do with the value of the field and extracting the information from it. The data source is connected to a SharePoint Online list and the field in question is a Choice type field permitting multiple values to be selected. I am retrieving the data using JSON and the field comes back as either null or an object. The object contains a collection of strings under the collection name results, hence my code referring to "project.results[i]" within the loop for getting the various string instances. I use 2 different functions to display the data in the column and the group header. In the column itself I use the "GetBDProject" function from my code snippet originally posted. In the group header template function I do exactly the same but return the text "(none)" instead for blank values. I don't see why any of that should cause an issue but it clearly does.

 

I've now taken your original example and made some changes to mimic what my live system is doing and in the process I've managed to break it in the same way I have a problem. If you take a look at the following:

http://dojo.telerik.com/IhURIp/4

You'll see it displays OK initially but if you try to move to the second page it won't. If you cancel the grouping it displays fine clearly displaying the column values as I want them. But once you group by the descriptio column you can't get to the second page. Hopefully this will give you some more insight as to what is going on here.

Thanks and regards

[Stefan]

Hello Paul,

Thank you for clarifying the scenario.

Unfortunately, grouping by a complex object with array values is not supported by the Grid as there is no unified approach to such values.

I can suggest in this scenario to have the array value send as and it can be grouped as demonstrated in the first example.

The values can be modified on the client and then parsed using the schema.parse property of the DataSource:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

Regards,
Stefan
Telerik by Progress

[PaulH]

Hi Stefan and thanks for your response. I've had a relatively brief look at the schema.parse api documentation and I'm not entirely clear on how to implement it in my case. I am reading a fairly large number of columns from a SharePoint list and associated lists and the field I am having issue with is just a single field in perhaps 30 and I'm returning many hundreds of rows too. Do I need to code within the parsing function to handle every single column being returned by my odata data source creating an array of items as per the example or is there another simpler way to handle this situation by processing just the single column in some way?

Thanks in advance.

[Stefan]

Hello Paul,

Indeed, the parse function can be used only for a specific field in the dataSource.

Please check the following example demonstrating the syntax:

http://dojo.telerik.com/ubiqI

I hope this will help to modify only the specific column.

Regards,
Stefan
Telerik by Progress

[PaulH]

That's perfect, works a treat. Thanks Stefan.