Unable to display list of object in Kendo Grid Column

[Thomas]

Hi there,

I have a hard time getting my grid displaying the data I want to see.

 

Main Object

public class CustomerViewModel
{
    [Key]
    public string Vin { get; set; }
    public List<Campaign> TechnicalCampaigns { get; set; } = new();
    public string? CustomerNumber { get; set; }
    public string? CustomerName { get; set; }
}

Campaign Model

public class Campaign
{
    public string Vin { get; set; }
    public string CampaignId { get; set; }
}

Grid

Html.Kendo().Grid<CustomerViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Vin).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(100).Title("Vin").HtmlAttributes(new { style = "text-align: center" }).Locked(true);
                    columns.Command(command => { command.Edit(); }).Width(150).HtmlAttributes(new { style = "text-align: center" }).Locked(true);
                    columns.Bound(p => p.CustomerNumber).Filterable(ftb => ftb.Cell(y => y.Template("datePicker"))).Width(100).Title("Kundennummer").HtmlAttributes(new { style = "text-align: center" });
                    columns.Bound(p => p.CustomerName).Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true)).Width(100).Title("Kunde").HtmlAttributes(new { style = "text-align: center" });

                    columns.Bound(p => p.TechnicalCampaigns).Width(200).Title("Offene TA's").HtmlAttributes(new { style = "text-align: center" }).ClientTemplate("#=generateTemplate(TechnicalCampaigns)#");

                .ColumnResizeHandleWidth(20)
                .ColumnMenu()
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .Filterable()
                .Reorderable(reorder => reorder.Columns(true))
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomPopupTA"))                
                .DataSource(dataSource => dataSource
                    .SignalR()
                    .AutoSync(false)
                    .PageSize(10)
                    .Sort(sort => sort.Add("Vin").Descending())
                    .Transport(tr => tr
                        .Promise("hubStart")
                        .Hub("hub")
                        .Client(c => c
                            .Read("read")
                            .Create("create")
                            .Update("update")
                            .Destroy("destroy"))
                        .Server(s => s
                            .Read("read")
                            .Create("create")
                            .Update("update")
                            .Destroy("destroy")))
                    .Schema(schema => schema
                        .Model(model =>
                        {
                            model.Id(p => p.Vin);
                            model.Field(p => p.Vin).Editable(false);
                        }
                 )
              )
            )

I want to show the TechnicalCampaigns in a column. To be more specific: For each Campaign in List TechnicalCampaigns I want to display the string Campaign.CampaignId.

I have read every single thread in this forum regarding custom columns, customtemplates, using cshtml files as template, or forwarding the list in a customtemplate to a js function, iterating and returning values. 

Absolutely nothing is working. It can't be that hard to display a simple string, or a list of strings, in a column.

 

Any hint would be greatly appreciated!

 

Cheers

Tom

[Thomas]

Note: The customtemplate visible in the grid column abobe was my last try, still not working. Below the called function

    function generateTemplate(TechnicalCampaigns) {
        var template = "";

        for (i in TechnicalCampaigns) {
            let entries = Object.entries(TechnicalCampaigns[i].CampaignId);
            console.log(entries);
            template = template + entries + "\n";
        } 
        return template;

        //for (var i = 0; i < TechnicalCampaigns.count; i++) {
        //    template = template + TechnicalCampaigns[i].CampaignId + "\n";
        //    alert(template);
        //}
        //return template;

        //var template = "<ul>";
        //for (var i = 0; i < TechnicalCampaigns.count; i++) {
        //    template = template + "<li>" + TechnicalCampaigns[i].CampaignId + "</li>";
        //    alert(TechnicalCampaigns[i].CampaignId);
        //}

        //return template + "</ul>";
    }

 

[Thomas]

Nevermind, I fixed it myself using this information :)

 

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/column-templates

[Mihaela]

Thank you for the update, Thomas.

Indeed, you can use an un-ordered list to display the strings in a column, as illustrated in the last example in the article.

If any related questions arise, please let me know.

[Thomas]

Hi Mihaela,

I do indeed have another problem. Saving and loading the persistent state of the grid only works when I stay in the window, e.g.:

1) open page and reorder, sort stuff
2) save perstistent state
3) reorder differently
4) click "load settings" => works, everything is back to saved state

when I reload the page, or close the browser and open it again, the standard grid is loaded.
When I now click on "load settings", the grid is indeed reordering the columns, but I end up in an infinite loop loading the data inside the grid.

Can we handle this here in this topic, or should I create a new one?

Thanks

Thomas

[Aleksandar]

Hello Thomas,

Without details on the Grid configuration and the state persistence implementation I cannot comment on why the behavior occurs. In general, data stored in local storage is shared between all tabs and windows from the same origin and the data does not expire. It remains after the browser restart and even OS reboot. A possible approach to storing the data in local storage is demonstrated in our live example here. Keep in mind that the functionality demonstrated relies on the getOptions and setOptions functions. As JSON.stringify() is user to serialize the Grid options, but it cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Grid state, all configuration fields, which represent function references, will be lost. Refer to the API linked for further details and options on handling such scenarios. 

Finally, if the above is not helpful and as the issue on persisting the state is not related to the original topic I will indeed ask you to open a new thread or submit a support ticket on the matter.

[Thomas]

Hi Mihaela,

did you receive my comment? :)

Thanks

Thomas