Pass model to template of Grid

4 posts, 0 answers
  1. Marconi
    Marconi avatar
    8 posts
    Member since:
    Jan 2013

    Posted 24 Nov 2020 Link to this post

    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.

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 27 Nov 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Marconi
    Marconi avatar
    8 posts
    Member since:
    Jan 2013

    Posted 06 Dec 2020 in reply to Marconi Link to this post

    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.

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 09 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top