List property of model always NULL

[José]

Hi all,

I've got a slight problem when displaying data from my model. My model is simple and straight forward:

01.public class TableSchema
02.{
03.    public TableSchema()
04.    {
05.        Columns = new List<ColumnDescription>();
06.    }
07.
08.    public string TableName { get; set; }
09.    public List<ColumnDescription> Columns { get; set; }
10.}

 

I'm displaying some of the data in a Kendo Grid which is working without problem. The grid is displaying fine. I want to use a custom editor template to open a popup which displays the "TableName" property and another grid which contains the "List<ColumnDescription> Columns" property. Here is the code for my main grid which displays the TableSchema model:

01.@model IEnumerable<ServiorInventaire.Shared.Models.Dynamic.TableSchema>
02.
03.@(Html.Kendo().Grid(Model)
04.    .Name("ItemTypes")
05.    .NoRecords(Language.ItemsGridNoRecords)
06.    .Columns(columns =>
07.    {
08.        columns.Bound(p => p.TableName).Title(Language.ItemsGridTableName).Width(250);
09.        columns.Command(command => { command.Edit().Text(Language.Edit).UpdateText(Language.Save).CancelText(Language.Cancel); }).Width(250);
10.    })
11.    .Resizable(resizing => resizing.Columns(true))
12.    .Reorderable(reordering => reordering.Columns(true))
13.    .ToolBar(toolbar =>
14.    {
15.        toolbar.Create().Text(Language.Create);
16.    })
17.    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("TableSchema").Window(w => w.Title(Language.ItemsPageTitle)))
18.    .HtmlAttributes(new { style = "height: 550px;" })
19.    .Pageable(pageable => pageable
20.        .Input(true)
21.        .Numeric(true)
22.        .Info(true)
23.        .PreviousNext(true)
24.        .Refresh(true)
25.        .PageSizes(false)
26.    )
27.    .Sortable()
28.    .Scrollable(scr => scr.Height(430))
29.    .Filterable()
30.    .DataSource(dataSource => dataSource
31.        .Ajax()
32.        .PageSize(20)
33.        .ServerOperation(false)
34.        .Model(model => model.Id(p => p.TableName))
35.        .Create(create => create.Action("EditingPopup_Create", "Grid"))
36.        .Update(update => update.Action("EditingPopup_Update", "Grid"))
37.     )
38.)

 

And finally, there is the code for my custom editor template:

01.@model ServiorInventaire.Shared.Models.Dynamic.TableSchema
02.
03.<div class="editor-label">
04.    @Html.LabelFor(model => model.TableName)
05.</div>
06.<div class="editor-field">
07.    @Html.Kendo().TextBoxFor(model => model.TableName)
08.</div>
09.
10.<div class="editor-label">
11.    @Html.LabelFor(model => model.Columns)
12.</div>
13.<div class="editor-field">
14.    @(Html.Kendo().Grid(Model.Columns)
15.        .Name("Columns")
16.        .NoRecords(Language.ItemsGridNoRecords)
17.        .Columns(columns =>
18.        {
19.            columns.Bound(p => p.ColumnName).Title(Language.ColumnsGridColumnName).Width(250);
20.            columns.Bound(p => p.Type).Title(Language.ColumnsGridType).Width(250);
21.            columns.Command(command => { command.Edit().Text(Language.Edit).UpdateText(Language.Save).CancelText(Language.Cancel); }).Width(250);
22.        })
23.        .ToolBar(toolbar =>
24.        {
25.            toolbar.Create().Text(Language.Create);
26.        })
27.        .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title(Language.ItemsPageTitle)))
28.        .DataSource(dataSource => dataSource
29.            .Ajax()
30.            .Model(m =>
31.            {
32.                m.Id(p => p.ColumnName);
33.            })
34.            .PageSize(20)
35.            .ServerOperation(false)
36.            .Create(create => create.Action("EditingPopup_Create", "Grid"))
37.            .Update(update => update.Action("EditingPopup_Update", "Grid"))
38.         )
39.    )
40.</div>

 

My problem now is that if I click "Edit" on the main grid to edit a "TableSchema", the popup shows up. The data for the TableName is showing without problem but the grid for the "Model.Columns" property is empty or even "null". Note, there is data in my database for the TableSchema and the Columns.

Do you know the problem and could anybody help me?

Thank you very much,

Sascha

[Viktor Tachev]

Hi Claude,

I have examined the code and it seems that the Grids are using server-side binding. However, the DataSource is configured for Ajax-binding. Note that mixing the two types of binding can result in unexpected behavior. 

If you would like to use server binding with editing you need to ensure that the Grid components are configured as described in the article below:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/editing/server-editing

Regards,
Viktor Tachev
Progress Telerik

[José]

Hi Voktor,

Thank you for your answer. What if I would like to use AJAX? What am I doing wrong?

Thank you very much,

Sascha

[Viktor Tachev]

Hi Sascha,

If you would like to use Ajax binding for the Grid you should configure Read method for the DataSource of the Grid. This method will be called when requesting data. For CRUD operations you would also need to set Create, Update, Destroy actions.

Furthermore, you should not pass the Model directly to the Grid in this scenario. You just need to specify the type that the Grid component will be bound to. If you would like more information on Ajax binding you would find the resources below interesting:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding
• http://docs.telerik.com/aspnet-mvc/helpers/grid/editing/ajax-editing

Regards,
Viktor Tachev
Progress Telerik

[José]

Hi Viktor,

Thank you for your help. I think I got it now. I did exactly what you told me to do. Created two read methods on my controller and passed them into the DataSource.

The other thing I had to figure out was how to pass the "foreign key" from my first grid to my second grid on the editor template. I used a JavaScript method which I appended to the Read method via the "Data" keyword like this:

.Read(read => read.Action("ReadColumns", "Item").Data("getTableName"))

 

And here is the JavaScript method:

function getTableName() {
    var uid = $("#Columns").closest("[data-uid]").data("uid");
    var parentGrid = $("#ItemTypes").data("kendoGrid");
    var model = parentGrid.dataSource.getByUid(uid);
    return { itemType: model.TableName };
}

 

The method on my controller has a second input variable named after the return variable from the JavaScript method:

public ActionResult ReadColumns([DataSourceRequest] DataSourceRequest request, string itemType)

 

I hope that this is the way to do this?

Thank you,

Sascha

[Viktor Tachev]

Hi Sascha,

You are absolutely right. This is the correct way for binding the Grid and passing additional data when using Ajax binding. 

I am glad that the provided suggestions were helpful to you. In case you have additional queries let me know.

Regards,
Viktor Tachev
Progress Telerik

[José]

Hi Viktor,

Thank you very much for your feedback. I have indeed another question, but I already opened another thread for that and I think I found a bug but I'm not sure yet.

Thank you,
Sascha

[Viktor Tachev]

Hi Sascha,

In order to keep the information in the thread consistent I suggest we continue the conversation in the other thread you have submitted. 

Regards,
Viktor Tachev
Progress Telerik