Different models for Kendo.Grid<> and for Editable.Template?

[Daniel Blendea]

1. Is it possible to use a model for the grid definition and another model for the Add/Edit template?

My example:

 

01.@(Html.Kendo().Grid<UserDto>()

02.    .Name("usersGrid")

03. .Editable(e => e.Enabled(true)

04.        .Mode(GridEditMode.PopUp)

05.        .TemplateName("EditUser")

06.        .AdditionalViewData(new {ApiUrl = Model.ApiUrl}))

07.        .DataSource(dataSource =>

08.        dataSource

09.            .Ajax()

10.            .ServerOperation(true)

11.            .Model(model =>

12.            {

13.                model.Id(p => p.Id);

14.                model.Field(p => p.Created).Editable(false);

15.            })

16.            .Read(read =>

17.                read.Url(Model.ApiUrl + "/users/get")

18.                    .Type(HttpVerbs.Get)

19.                )

20.            .Create(acc => acc.Url(Model.ApiUrl + "/users/create")

21.                .Type(HttpVerbs.Post)

22.                )

23.            .Update(acc => acc.Url(Model.ApiUrl + "/users/update")

24.                .Type(HttpVerbs.Put)

25.                )

26.            .Destroy(acc => acc.Url(Model.ApiUrl + "/users/delete")

27.                .Type(HttpVerbs.Post)

28.                )

 

 

 

 

EditUser.cshtml:

 

1.@model CreateUserModel
2.
3.    <input type="hidden" asp-for="Id"/>

 

 

 

The reason I'm asking is that the 2 models have different columns, the grid model has more columns, needed for display. The edit model has columns for edit, metadata for edit.

 

 2. Is it possible to attach and send a parameter to the datasource CRUD actions when the action has Url instead of Action name, Controller Name?

 

1..Update(acc => acc.Url(Model.ApiUrl + "/users/update")
2.                .Type(HttpVerbs.Put)
3.                )

[Veselin Tsvetanov]

Hi Daniel,

Here are the answers to your questions:

1. As far as I can understand, the model used for the Edit pop-up will have fewer properties than the model used for the display in the Grid. The model for the Grid, however, will have all items in the edit model. If this is the case, you could use two separate models for display and edit, as long as the display model inherits from the edit model class:

public class UserDto : CreateUserModel

Attached you will find a small sample implementing the above.

2. Yes, that is also possible. You just have to add a Data() handler for the respective action:

.Create(acc => acc.Url(ApiUrl + "/users/create").Type(HttpVerbs.Post).Data("onCreateData"))

and:

function onCreateData() {
	return {
		fromData: "test"
	};
}

I hope that the above helps. If you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Progress Telerik

[Daniel Blendea]

"As far as I can understand, the model used for the Edit pop-up will have fewer properties than the model used for the display in the Grid. The model for the Grid, however, will have all items in the edit model."

Not necessarily.

The two models can have some common properties, like Id, Name, other primitive values, and some different properties.

The grid/list model can have different properties, like a string representation of a collection: Countries: "Country1, Country2...", while the edit model will have the collection itself, that is populated by the user, from a multiple select list.

Also, for the "delete/destroy" action, one could need only an Id, why post the whole edit model?

 

Anyway, I'll try your workaround.

 

 

[Veselin Tsvetanov]

Hi Daniel,

Thank you for the additional details provided.

Yes, you could use a collection in the edit and a string in the Grid itself. The only thing you need to do is parse the string value upon edit, so it will be populated in the MultiSelect. To do that you could define an edit event handler for the Grid:

@(Html.Kendo().Grid<UserDto>()
	.Name("usersGrid")
	.Events(e => e.Edit("onEdit"))
...

and:

function onEdit(e) {
	var model = e.model;
	var container = e.container;
	var multiSelect = container.find('#Collection').getKendoMultiSelect();
	var values = model.SingifiedCollection.split(",");
	multiSelect.value(values);
}

As per the Destroy action question, the default Grid DataSource implementation will pst the entire model to the remote. Nevertheless, as you have correctly noted, passing only the ID should be sufficient. Therefore, if you modifying the remote request in this case, you could freely send only the ID.

Attached you will find a modified version of the sample implementing the suggested.

Regards,
Veselin Tsvetanov
Progress Telerik