Grid tied to Dictionary - how to? - ClientTemplate help

[Daniel]

Hey guys,

I already found other forum threads about grids tied to a dictionary. Unfortunately all the cases are very complicated (for me), so that I have to create a new thread with a really basic case to understand. 
https://www.telerik.com/forums/dictionary-keys-binding 

So I have a view without a model containing a grid like this:
@(Html.Kendo().Grid<Dictionary<string, int>>()
   .Name("gridStatus")
   .Columns(columns =>
   {
      columns.Template(c => c.Keys.ElementAt(0).Title("Name"));
      columns.Template(c => c.Values.ElementAt(0).Title("Count"));
   })
   .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("RetrieveData", "Settings"))
   )
)

With this code I already can fill my grid with "data". But the rows of my grid are empty till now. But when I expect 3 datasets in my dictionary, I have 3 rows in my grid. So I think, that I'm near the solution. I think the columns.Template() functionality isn't implemented correctly. Do I have to create somethink like a template.cshtml to actually use a template? Or can I implement the "template" inline?

Can anyone help me? 

 

[Daniel]

This is coming by the ajax request of the grid. I want to have a two column grid showing this:

 

"Name"           | "Count"
---------------------------------------------
Nein                | 2
Zur Reinigung | 1
Zur Reparatur | 1

[Peter Milchev]

Hello Daniel,

A very similar approach to the one used in the suggested forum thread should be used, meaning you need the ClientTemplate as demonstrated below:

@(Html.Kendo().Grid<Dictionary<string,int>>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Template(x => { }).ClientTemplate(string.Format("#:data.Key#")).Title("Name");
        columns.Template(x => { }).ClientTemplate(string.Format("#:data.Value#")).Title("Count");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
{
	Dictionary<string, int> taskItems = new Dictionary<string, int>();
	for (int i = 0; i < 4; i++)
	{
		taskItems.Add("Task #" + i, i * 10);
	}

	return Json(taskItems.ToDataSourceResult(request));
}

Regards,
Peter Milchev
Progress Telerik

[Daniel]

Yes! Yes! Thank you. The ClientTemplate function is what I searched for. Works like a charm.