Listview not binding to Model within Ajax Beginform

[Alex]

@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.

[Viktor Tachev]

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.

• http://demos.telerik.com/aspnet-mvc/listview/editing

Regards,
Viktor Tachev
Telerik by Progress

[Alex]

This doesn't work, it still sends the other two properties but the Items still come in null

[Viktor Tachev]

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