Grid tied to Dictionary - how to? - ClientTemplate help

4 posts, 1 answers
  1. Daniel
    Daniel avatar
    18 posts
    Member since:
    Nov 2019

    Posted 15 May 2020 Link to this post

    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? 

     

  2. Daniel
    Daniel avatar
    18 posts
    Member since:
    Nov 2019

    Posted 18 May 2020 Link to this post

    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

  3. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    912 posts

    Posted 19 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  4. Daniel
    Daniel avatar
    18 posts
    Member since:
    Nov 2019

    Posted 19 May 2020 in reply to Peter Milchev Link to this post

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