Pass model to template of Grid

[Marconi]

Hello,

I have a grid edits in pop up:

 .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("RecordViewModelTemplate"))

The fields bind well to the model in the template when I do:

 <div class="form-group">
            <label asp-for="@Model.AnimalId"></label>
            <input asp-for="@Model.AnimalId" class="k-textbox" />
            <span asp-validation-for="@Model.AnimalId" class="text-danger k-invalid-msg" data-for="AnimalId"></span>
  </div>

  However, the fields don't bind to the model when I try:

@Html.CheckBoxFor(m => m.SampleTestPackage.biochemistry[1].Selected, new Dictionary<string, object> { { "class", "biochemistry" }, { "data-test", "Comprehensive" } })

  If the value is true in the model the check box doesn't appear selected.

I have tried also:

<h5> BIOCHEMISTRY </h5>
                                <div class="row">
                                    @{ for (int i = 0; i < @ViewBag.biochemistry.Count; i++)
                                        {
                                            var biochemistryId = String.Format("biochemistry{0}", @ViewBag.biochemistry[i].Value);
                                            <div class="form-group  col-4">
                                                <div class="custom-control custom-checkbox">
                                                    @Html.HiddenFor(m => m.SampleIndividualTest.biochemistry[i].Value)
                                                    @Html.HiddenFor(m => m.SampleIndividualTest.biochemistry[i].Text)
                                                    <input type="checkbox" id=@biochemistryId class="biochemistry custom-control-input" asp-for="@Model.SampleIndividualTest.biochemistry[i].Selected">
                                                    <label for=@biochemistryId class="custom-control-label"> @Html.Raw(@ViewBag.biochemistry[i].Text)</label>
                                                </div>
                                            </div> } }
                                </div>

but the check boxes don't bind and remain false when they are true/selected in the model.

If I do:

@{

if (Model == null){

<span> Model is empty </span>

}

}

I get as result that the model is empty.

 

I don't understand why some fields like AnimalId bind to the model and other no - when the model is apparently empty.

I am not coding anything to bind the model the template - is there any code I need to bind the model to the template when the edit event is clicked in the grid?

Also, when the update event is fired, the control gets and empty model, I suppose that it is logic as the model is empty.

Any help is appreciated, I suppose that I am missing the concept.

Kind Regards.

[Tsvetomir]

Hi Jose,

The reason why the model is not being actually passed to the respective view is due to the fact that the binding happens on the client. When the Grid is serialized for the first time, the editors are serialized as well. Hence, they have distinct attributes such as "data-bind='value: FieldName'. This attribute indicates which editor to which field is bound. A single editor is being reused for all models. 

Is it possible for you to bind the editors to the exact property names of the model instead of their values?

Let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

[Marconi]

Can you give me an example of binding to the name rather than to the value when you have an array of elements and each element is of type SelectListItem?

-------------------------------------

I have been able to make it work partially, the problem was that I hadn't initialized the object SampleTestPackage well in the constructor of the class. It works well for objects retrieved from the database now.

However, if I click on "Create new" it didn't work still because the constructor hadn't been created in the controller and sent to the view. I have got a work around by creating the new objects in the before edit trigger:

<script type="text/javascript">

    function onBeforeEdit(args) {
        if (args.model.isNew()) {
            args.model.SampleTestPackage = @(Json.Serialize(new SampleTestPackage()));
        }
    }

Still, I am having trouble to make it work when I click on the Update command in the grid. It returns a cannot find uid error from the Popup template. I haven't been able to resolve it yet. So I have started a small example.

The example consist of a Form that contains a Grid that displays the elements in a pop up template. I took one of your examples called "Post form with Grid" and I have adapted it to asp.net core.

Could you have a look of the example attached and help me to find out why the model for product arrives empty to the controller when you save the data? It works well if the grid is edited in line but it fails if it is edited in a pop up template that is what I have been asked to code.

Thanks so much.

[Tsvetomir]

Hi Jose,

Thank you for taking the time to share a sample project. Indeed, the data is not being sent regardless of the edit mode of the grid. Even if it is sent to the server-side, it will not be the updated version due to the fact that the Grid is not the editor itself. It consumes data and allows the user to modify it and then via AJAX requests - save it in the database.

If you would like to submit it as part of a form, you should strictly follow the example that you referred to:

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/post-grid-with-form/KendoUIMVC5/Views/Home/Index.cshtml

Namely, the columns should have ClientTemplates with the respective values populated. The form submits the values of input elements. Since the cells are not inputs, they will not be sent automatically. 

I hope you find those clarifications helpful.

 

Kind regards,
Tsvetomir
Progress Telerik