Guide to creating individual column templates in Kendo-UI grid

Question

Guide to creating individual column templates in Kendo-UI grid

I recently started using Kendo-UI in my project and wanted to have a column in my grid display an image button along with a field, similar to the 'Contact Name' column in the documentation here. After exploring the documentation, I came across the following code snippet.

columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]

I realized that directly writing HTML in the template might not be the best approach, especially for complex templates. So, I found an alternative solution in the documentation.

"template": "kendo.template($('comments-template').html())"

In my scenario, this seems like a more practical solution. However, I am unsure about where it would be better to define the template. I also utilize AngularJS. Should I create a new file specifically for the template or is there a better place to define it?

Thank you

javascript angularjs kendo-ui telerik kendo-grid

Answer 1

Answer №1

When using the columns.template property, make sure to provide either a string or a function that returns a string. One way to do this is by embedding the template in a <script> tag within the HTML markup...

<script id="script-template-id" type="text/x-kendo-template">
    <div class="myClass">#: FieldName #</div>
</script>

...

<script>
// ...

columns: [{
    title: "My Template Column",
    template: $('#script-template-id').html()
}]

// ...
</script>

... Alternatively, you can define a string variable holding the template content wherever convenient, such as in an external JavaScript file (as long as it is loaded early enough for the variable to be accessible):

var templateStringVariable = '<div class="myClass">#: FieldName #</div>';

// ...

columns: [{
    title: "My Template Column",
    template: templateStringVariable
}]

Note that trying to pass JavaScript code directly as a string will not work due to the stringification of the code:

"template": "kendo.template($('comments-template').html())"

Answer 2

When using the columns.template property, make sure to provide either a string or a function that returns a string. One way to do this is by embedding the template in a <script> tag within the HTML markup...

<script id="script-template-id" type="text/x-kendo-template">
    <div class="myClass">#: FieldName #</div>
</script>

...

<script>
// ...

columns: [{
    title: "My Template Column",
    template: $('#script-template-id').html()
}]

// ...
</script>

... Alternatively, you can define a string variable holding the template content wherever convenient, such as in an external JavaScript file (as long as it is loaded early enough for the variable to be accessible):

var templateStringVariable = '<div class="myClass">#: FieldName #</div>';

// ...

columns: [{
    title: "My Template Column",
    template: templateStringVariable
}]

Note that trying to pass JavaScript code directly as a string will not work due to the stringification of the code:

"template": "kendo.template($('comments-template').html())"

Guide to creating individual column templates in Kendo-UI grid

Answer №1

Similar questions

NPM: There are no valid TypeScript file rules specified

In Ember.js, where should I place the initialization code for a controller? I attempted to set it up in the routes

Make sure to always display the status bar and soft keys

Tabindex issue arises due to a conflict between Alertify and Bootstrap 4 modal

Trouble with the 'uppercase' package in Node.js: Receiving ERR_REQUIRE_ESM error while utilizing the require() function

Obtain identical socket event in two separate useEffect hooks

Out of the blue div, could you lend your assistance?

Swap out a button for another using JavaScript

Colorful D3.js heatmap display

Emphasize the center row within a moving table

Click on the nearest Details element to reveal its content

Update the icon with the adjusted API information

Is it feasible to implement different themes besides 'light' and 'dark' in React Material UI?

Transformation of an Ajax array into an associative array

Tips for keeping a Youtube video playing even after the page is refreshed

Passing Data from Child to Parent Components in ReactJS

When using Next.js and Express.js together, CORS error may occur, causing API queries to only function properly during build

When there are no routes defined, the user will automatically be redirected to the Home route

Struggling to find the element using Selenium

Performing additional ajax requests in an angularJs application