An item with the same key has already been added when loading Kendo MVC Grid

Question

I am trying to populate a Kendo mvcGrid and I keep getting the error An item with the same key has already been added.

I have seen elsewhere that duplicate model properties is the likeliest source of the problem but I have no duplicate properties in my model. I've even simplified everything to just a basic mock up to eliminate as many possible variables as possible..and I cant get the grid to load data.

I've tried it as a Html.Partial where its not loaded initially because of a empty model and then loading it through jquery...Ive tried with passing in am empty model so that the grid will load initially without data and then doing a datasource refresh...no luck there either. Basically as soon as I try to add content to the grid with a populated model I get the error and no data is loaded.

Been fighting this issue for 2 days now and had no luck. Ill post my code here maybe someone else can see what I'm missing.

One variable that cant change is the grid resides on a partial view with a model different from its parent view.

in the parent view I have tried both

<div id ="columnkgrid">@{Html.RenderPartial("Columns", new TestFieldIssue.Models.FieldListModel());}</div>

and

<div id="columnkgrid">@Html.Partial("Columns", new TestFieldIssue.Models.FieldListModel())</div>

either way will succeed in posting a grid with no data..it has no data yet because its populated by the selection of a value in a dropdown list.

so as to not over complicate the sample I've just set a hard coded value in the jquery function I have been using to refresh the grid.

function loadgrid() {
    var grid = $("#grid").data("kendoGrid");
    var val = 1;
    grid.dataSource.read({ table_pk: val });
    grid.refresh();    
}

the grid code in the partial once again kept it simple without any bells and whistles just to test.

 @(Html.Kendo().Grid(Model.fields)
                        .DataSource(data => data
                            .Ajax()
                            .Model(model => model.Id(m => m.field_pk))
                            .Read(r => r.Action("Columns","Home"))
                            )

                        .Name("grid")
                        .Columns(c =>
                            {                              
                                c.Bound(m => m.field_name).Title("Field Name").Width(100);
                            })
    )

and the controller methods loading some mock data

public ActionResult Columns(int? table_pk)
        {
            FieldListModel model;
            if (table_pk == null)
            {
                model = GetEmptyColumns();
            }
            else
            {
                model = GetColumns();
            }
            return PartialView("Columns", model);
        }
        public FieldListModel GetColumns()
        {
            FieldListModel model = new FieldListModel();
            model.fields = new List<FieldModel>();
            model.fields.Add(new FieldModel { field_name = "field1", field_pk = 1 });
            model.fields.Add(new FieldModel { field_name = "field2", field_pk = 2 });
            model.fields.Add(new FieldModel { field_name = "field3", field_pk = 3 });
            return model;
        }
        public FieldListModel GetEmptyColumns()
        {
            FieldListModel model = new FieldListModel();
            model.fields = new List<FieldModel>();
            model.fields.Add(new FieldModel { field_name = "", field_pk = 0 });
            return model;
        }

and a very simple Model

public class FieldListModel
    {
        public List<FieldModel> fields { get; set; }
    }
 public class FieldModel
    {
        public int field_pk { get; set; }
        public string field_name { get; set; }
    }

SBirthare SBirthare · Accepted Answer · 2014-12-01T07:54:39

I made few changes to run your code (correct version of Kendo and JQuery). May be those related to setup at my machine. I was able to reproduce the problem.

Then I changed the action code and was able to see the values populated in Grid:

public ActionResult Columns(int? table_pk, [DataSourceRequest] DataSourceRequest request)
{
    FieldListModel model;

    if (table_pk == null)
    {
        model = GetEmptyColumns();
    }
    else
    {
        model = GetColumns();
    }
    return Json(model.fields.ToDataSourceResult(request));
}

The change is accepting an additional parameter in action method of type DataSourceRequest. The Kendo grid wraps request in this object to specify sorting and paging information. The grid itself gets updated with data wrapped under DataSourceRequest object (note in return statement). More information here.

An item with the same key has already been added when loading Kendo MVC Grid

1 Answers