At a loss over the various ways to specify Kendo Grid

[WOLFGANG]

I'm totally new to Telerik and the example that I want to build upon is defined in this style:

        <kendo-grid name="grid" height="550">
            <columns>
                <column field="Facility_Id" title="Facility"/>
                <column field="Name" title="Name"/>

when I look for hints on what is possible, I find only this style:

        $(document).ready(function () {
            var grid = $("#grid").kendoGrid({
                columns: [
                    { field: "FirstName", title: "First Name", width: "140px" },
                    { field: "LastName", title: "Last Name", width: "140px" },
                    { field: "Title" },
                    { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
            }).data("kendoGrid");

 

Which is the preferred one and where do I find examples for the first style please?

Thanks

[Aleksandar]

Hello Wolfgang,

I see you have downloaded the Telerik® UI for ASP.NET Core Trial and looking at the code snippet I assume you are looking for ASP.NET Core documentation and examples, in particular references to the TagHelpers.

You can find the TagHelper documentation of the Grid on the link below:

https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/overview

A TagHelper demo is available here:

https://demos.telerik.com/aspnet-core/grid/tag-helper

Make sure to click on the View Source tab to review the sample code behind the example. I would also suggest reviewing the Overview section for the ASP.NET Core TagHelpers for additional important details.

Regards,
Aleksandar
Progress Telerik

[WOLFGANG]

Thank you so much for your reply. I think I got those things down but still hunting for the more advanced items. Say I have a data row that has among others two columns named "Lower Age" and "Upper Age" with the respective values "0" and "5". It is trivial for me in the .Net app to have a grid column name "Age Range" and display "0 - 5" in it. I can't find how to put together either a format or a script that does that on the fly for a Kendo-Grid without creating it in the model as "Age Range". It's the more advanced stuff I can't find tag based hints.

[Aleksandar]

Hello Wolfgang,

You can achieve the desired result by using a template, as demonstrated in the documentation section:

https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/columns#templates

For example, for a model with properties:

public int Lower { get; set; }
public int Upper { get; set; }

You can add a Column titled Range and specify the template for what should be rendered in the said column:

<column template="#=template(data)#" title="Range"></column>

<script>
    function template(data) {
        return data.Lower + " - " + data.Upper
        }
</script>

I hope this helps.

Regards,
Aleksandar
Progress Telerik