Using template for dynamic columns

[Jaanus]

I know how to use dynamic columns with kendo. You just load the data before and then add columns, but I am having hard time using template with them.

 

The template function has its own scope, and when generating the values,I can't get the kendo.htmlEncode(data.fieldValue).

 

Example

https://dojo.telerik.com/ujaqoNIp

[Stefan]

Hello, Jaanus,

Thank you for the example.

The main reason for the issue is that the template function will be called once the Grid is initialized not when creating the columns.

In order to achieve the desired result inside the column, the template has to be connected to a value in the global scope. Also, the additional data has to be merged with the Grid data in order for the Grid to have it in its dataItem.

I modify the example to demonstrate a possible approach:

https://dojo.telerik.com/ujaqoNIp/2

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Jaanus]

Thanks for the answer, it was helpful, but I think I oversimplicated the example.

Also note that field count is dynamic, so it should be done with for cycle.

 

The problem is showed on following example. All the data is inside dataSource now.

https://dojo.telerik.com/ujaqoNIp/4

[Stefan]

Hello, Jaanus,

Thank you for the clarification.

It still could be achieved but it will require additional custom logic to determine the column name and correctly parse the result:

https://dojo.telerik.com/ujaqoNIp/6

As this will require additional code modification based on the real application, I can recommend our Professional Services team which can help and provide an approach best suited for this:

https://www.progress.com/services/outsourcing/feature-customization

Regards,
Stefan
Progress Telerik

[Jaanus]

Thanks for answer, I think you are on right path, but I think you misunderstood me.

 

1. You see the columns count can be from 2-20.
2. Also fieldnames in my example are generatedField1-generatedField20. You have "fields.fieldName", which should not be
3. Your field values are generatedField1 and jane 1. In my example, the field values are easily seen in data. For Jane, the values are Jane1 - Jane4 and for John they are John1 - John 4.

 

Problem is that it is always putting Jane/John4, not as they should be from 1 to 4.

 

Updated example

https://dojo.telerik.com/ujaqoNIp/7

[Stefan]

Hello, Jaanus,

The main issue occurs because the indexes are scoped in the for a loop. This is javascript function specific and the Kendo UI team has no control over it.

The options, in this case, is to flat the data structure in order for every field to be on the same level to eliminate the need to used indexes to access the value.

I do understand that this is not a simple task, but currently, this is caused by the javascript variables scoping.

Regards,
Stefan
Progress Telerik

[Jaanus]

Isn't there a way to determine from the callback parameters, about which column the function is running?

 

  template: function(dataItem, b, c) {
      // template function is being run, but how can I deteremine, which column this is being run on?
    }

[Jaanus]

Or when using groupFooterTemplate function, I have access to to groupings, but not access to field name.

On the other hand when using groupFooterTemplate string template, I have access to field name, but not groupings

 

 

groupFooterTemplate: function (groupings) {} // have groupings here, but do not know the field name

groupFooterTemplate: " #: sum # "  // is there a way to access the grouping in string template?

 

 

[Stefan]

Hello, Jaanus,

Regarding both questions:

1) Currently, this depends on how JavaScript functions scoping is working. The Kendo UI team has no control over core functionalities in JavaScript. We will be happy to share a solution in the future if there is one.

2) All of the values and how to access them can be found in the following article:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupfootertemplate#columns.groupFooterTemplate

Regards,
Stefan
Progress Telerik

[Stefan]

Hello,

This answer was kindly provided by Zach Godsil, many thanks:

I ran into this post because I was trying to do something similar.  Essentially I was pivoting a dataset to get data for generating my columns.  Tried a handful of solutions, but ultimately it came down to using your solution, which was essentially building each column statically.  The short-term solution was to build out a set of columns, checking the length of the number of fields each time to see whether or not the code should continue building that column, but ultimately that’s a limited solution, because if you build out 20 columns, and plan on only using up to 15 most of the time, as soon as you hit 21 columns, you need to modify the code and add another.  Either way, that’s what I went with.  

However, at that point, I decided to reduce the code as much as possible by building what I could of the column in a function, and it boiled dow

(var i = 0; i < arrFields.length; i++)
    columns.push(buildColumn(index));
}

n to something like this:

if(arrFields.length > 0)
                columns.push(buildColumn(0));
if(arrFields.length > 1)
                columns.push(buildColumn(1));
if(arrFields.length > 2)
                columns.push(buildColumn(2));
if(arrFields.length > 2)
                columns.push(buildColumn(0));

Then, because I was still frustrated at not being able to dynamically generate columns, I tried w/an index variable one last time… and it worked:

https://dojo.telerik.com/ujaqoNIp/17

I’m simplifying this to understand the concept, but I did re-work that fellow’s code w/this concept and got it to work properly:

Here’s what I managed to build using this logic.  After a date is picked, it gets the next business date 3 days out, does the lookup, pivots the data to make 3 days’ worth of data, and then when building the columns I’m building a div for each cell which has a different count and color based off the count, as well as tying a function to each cell which populates the booking textbox and some hidden inputs on click.  The reason why I need the columns to be dynamic is that there might not be 3 days’ worth of data, and/or the client may want to expand out more days in the future.



From the search results while trying to figure this out, it doesn’t seem like a whole lot of people make use of template functions, but they are clearly very powerful, so I hope this helps people push things further


Regards,
Stefan
Progress Telerik