This is a migrated thread and some comments may be shown as answers.
At a loss over the various ways to specify Kendo Grid
3 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
WOLFGANG
Top achievements
Rank 1
WOLFGANG asked on 05 Dec 2020, 06:36 PM

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

3 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 08 Dec 2020, 10:59 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
WOLFGANG
Top achievements
Rank 1
answered on 08 Dec 2020, 05:04 PM
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.
0
Aleksandar
Telerik team
answered on 10 Dec 2020, 10:53 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
WOLFGANG
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
WOLFGANG
Top achievements
Rank 1
Share this question
or