CODEWITHSUNDEEP
asp.net-mvcformslistviewkendo-uiasp.net-mvc-5
Seth
Seth

Reputation: 984

Create list in Kendo UI Listview on form submit

Imagine the following view model in which I have an empty model and form to fill out.

 Public Class McGuffinViewModel
  {
       public int FieldA {get; set;}
       public string FieldB {get; set;}
       public Ienumerable<Listitem> Items {get; set;}
  }

So I go to a Create Mcguffin page, and within the form I have included the following partial:

@model IEnumerable<Listitem>

//Item Template Defined here

@(Html.Kendo().ListView<SidetracksViewModel>(Model)
                      .Name("listView")
                      .TagName("div")
                      .ClientTemplateId("templateA")
                      .BindTo(Model)
                      .DataSource(ds => ds.Model(m => m.Id("Id"))
                          .Read(read => read.Action("Read", "McGuffin"))
                          .Create(create => create.Action("Create", "McGuffin"))
                          .Update(update => update.Action("Update", "McGuffin"))
                          .Destroy(destroy => destroy.Action("Remove", "McGuffin"))
                                )
                      .Editable()
)
 //Style Here

Whenever I submit the form, any & all listitems added to the listview, does not associate with the regular model state. Listview count is always 0. How do I get this list to actually bind and update with the model? What does BindTo even do for me if not that?

Upvotes: 0

Views: 1709

Answers (2)

Peter Truong
Peter Truong

Reputation: 41

I found this solution from Telerik: Post Selected Items Back To Controller

JS Bin: Post Selected Items Back To Controller

$("form").submit(function(e){
  var form = $(this);

  var list = $("#listView").data("kendoListView");  
  var selected = list.select();
  for(var i = 0; i< selected.length; i++){
    var dataItem = list.dataSource.getByUid($(selected[i]).attr("data-uid"));
    var newFormElement = $("<input name='products["+i+"]' type='hidden'>").val(dataItem.ProductName);
    form.append(newFormElement); 
  }
});

Upvotes: 0

Aaron
Aaron

Reputation: 26

I had a similar issue and solved this by binding the submit event of the form and creating a hidden listbox and moving the kendo data items to the listbox

var data = $("#listView").data("kendoListView").dataSource.data();
                            var selectOptions = "<select name='Items' style='display:none' multiple='multiple' >";
                            for (var i = 0 ; i < data.length; i++) {
                                selectOptions += "<option value='" + data[i].Id + "'>" + data[i].Id + "</option>"
                            }
                            selectOptions += "</select>";

                            $('form').append(selectOptions); 
                            $("select[name='Items'] option").attr("selected", "selected");

Upvotes: 1

Related Questions