Listview not binding to Model within Ajax Beginform

4 posts, 0 answers
  1. Alex
    Alex avatar
    68 posts
    Member since:
    May 2015

    Posted 01 May 2017 Link to this post

     
     
    @model TemplatesViewModel
     
    @{
        ViewBag.Title = "Create Item Req";
    }
     
     
     
    <script type="text/x-kendo-tmpl" id="popupTemplate">
        <div class="pop-product-view">
            <dl>
                <dt>Item Number</dt>
                <dd> #:ItemNbr#</dd>
                <dt>Description</dt>
                <dd>#:Descr#</dd>
                <dt>Quantity</dt>
                <dd>#:Qty#</dd>
            </dl>
            <div class="pop-edit-buttons">
                <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
                <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>
            </div>
        </div>
    </script>
     
    <div class="modal-body">
     
        @using (Ajax.BeginForm("TestAjaxForm", "WFAction", FormMethod.Post,
                                            new AjaxOptions
                                            {
                                                HttpMethod = "POST",
                                                OnBegin = "onBegin",
                                                OnSuccess = "onSuccess",
                                                OnFailure = "onFailure",
                                            })
     
                )
        {
     
            @(Html.EditorForField(m => m.Descr))
     
            @(Html.EditorForField(m => m.VendorID))
     
     
            <br />
            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Item</a>
     
                @(Html.Kendo().ListView<ItemsViewModel>()
                                   .Name("listView")
                                   .TagName("div")
                                   .BindTo(Model.Items)
                                   .ClientTemplateId("popupTemplate")
                                   .DataSource(dataSource => dataSource
                                       .Model(m => {
                                           m.Id(f => f.ItemNbr);
                                           m.Field(f => f.Descr);
                                           m.Field(f => f.Qty);
                                        })
                                       .PageSize(4)
                                        
                                       .Create(create => create.Action("Editing_Create", "WFAction"))
                                       .Read(read => read.Action("Editing_Read", "WFAction"))
                                       .Update(update => update.Action("Editing_Update", "WFAction"))
                                       .Destroy(destroy => destroy.Action("Editing_Destroy", "WFAction"))
                                   )
                                    
                                   .Pageable()
                                   .Editable(e => e.Enabled(true).TemplateName("ListViewKendoEditTemplate"))
                )
     
     
            <button id="save" type="submit">Save</button>
                @*@(Html.Kendo().Button().Name("submitFormButton").Content("Save").Events(e => e.Click("onSubmitFormClick")))*@
        }
     
    </div>
    // The editor template
     
    @model ItemsViewModel
     
     
     
        <div class="pop-product-view">
            <dl>
                <dt>Item</dt>
                <dd>
                       <input name="ItemNbr" data-source="items" data-role="dropdownlist" data-text-field="Descr" data-value-field="ItemNbr" />
                </dd>
                @*<dt>Description</dt>
                <dd>#:Descr#</dd>*@
                <dt>Quantity</dt>
                <dd>
                   @(Html.EditorForField(m => m.Qty)) @*<input type="text" class="k-text" data-bind="value:Qty" name="#:Qty#" />*@
                </dd>
            </dl>
            <div class="pop-edit-buttons">
                <a class="k-button k-button-icontext k-update-button" href="\\#">Save Item</a>
                <a class="k-button k-button-icontext k-cancel-button" href="\\#">Cancel</a>
            </div>
        </div>

     

    The editor template works and it writes the data back into the display template but I want the data in the ListView to bind to the TemplatesViewModel's property Items which is an IEnumerable of ItemsViewModel. When I get the data back in the controller it isn't binding to the Model but the other fields are binding fine for the Descr and VendorID.
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1971 posts

    Posted 03 May 2017 Link to this post

    Hello Alex,

    Try to pass the Model directly to the ListView as in this example. The code for the ListView would look similar to the one below:

    @(Html.Kendo().ListView<ItemsViewModel>(Model.Items)
           .Name("listView")
           .TagName("div")
           .ClientTemplateId("popupTemplate")
           .DataSource(dataSource => dataSource
               .Model(m => {
                   m.Id(f => f.ItemNbr);
                   m.Field(f => f.Descr);
                   m.Field(f => f.Qty);
                })
               .PageSize(4)
           )
             
           .Pageable()
           .Editable(e => e.Enabled(true).TemplateName("ListViewKendoEditTemplate"))
    )


    For adding GRUD operations yo the component you can use the approach from the following example.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alex
    Alex avatar
    68 posts
    Member since:
    May 2015

    Posted 03 May 2017 Link to this post

    This doesn't work, it still sends the other two properties but the Items still come in null
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1971 posts

    Posted 05 May 2017 Link to this post

    Hello Alex,

    Would you submit a support ticket with a runnable sample where the behavior you are seeing is replicated? This will enable us to examine the code locally and look for its cause.

    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top