Dynamic binding of Datasource shows [object object] before k-list-content

[Renu]

I have an editor template where i have added this list View as component while rendering on grid edit/add why am i seeing this [object object]. I'm not sure what mistake I've making here.
Editor Template:

@(Html.Kendo().Template()
    .AddHtml("<div class=\"k-edit-label\">")
    .AddHtml(Html.LabelFor(m => m.WeekDays).ToHtmlString())
    .AddHtml("</div>")
    .AddHtml("<div class=\"k-edit-field\">")
    .AddComponent(c => c.ListView<CheckboxList>()
        .Name("weekDays")
        .TagName("div")
        .ClientTemplateHandler("weekDaysTemplateHandler")
        .HtmlAttributes(new { data_bind = "source: daysDataSource"})
    )
    .AddHtml("</div>")
)

my kendo observable and template handler:

function weekDaysTemplateHandler(data){
 
    var result = '<div style="width: 33%;">';
    result += `<input class="weekDays" data-name="${kendo.htmlEncode(data.Name)}" data-id="${kendo.htmlEncode(data.ID)}" name="weekDays" type="checkbox" style="vertical-align: -2px" data-bind="checked:weekDays[${kendo.htmlEncode(data.ID)}].Selected" />`;
    result += ` <span>${kendo.htmlEncode(data.Name)}</span>`;
    result += "</div>"
    return result;
}
var viewmodel = new kendo.observable({
    dataSource: [],
    weekDaysDataSource: new kendo.data.DataSource({
        data: []
    }),
    OnEdit: function(e){
         this.weekDaysDataSource.data(e.model.WeekDays);
    }
});

My data looks lik this:

WeekDays: [
    {
          ID: 1,
          Name: "Monday",
          Selected: false
    },
    {
         ID: 2,
        Name: "Tuesday",
        Selected: false
   },
   .... <rest of the days>
];

In UI it looks like this:

DOM Element:

[Eyup]

Hi Renu,

 

Thank you for writing to us.

I can see that you are trying to implement MVVM binding inside the ListView items, which I think is the root of the issue. More specifically, this part:

I am afraid the ListView was not designed with this idea in mind.

I suppose you are trying to implement Editing which needs to happen through the built-in CRUD capabilities of the ListView component:
https://demos.telerik.com/aspnet-core/listview/editing

If you want to change the ListView DataSource dynamically, you can use the .setDataSource() method:
https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/setdatasource

  var dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: "https://demos.telerik.com/kendo-ui/service/Products",
        dataType: "jsonp"
      }
    },
    pageSize: 21
  });
  $("#dsBtn").click(function(){
    var listView = $("#listView").data("kendoListView");
    listView.setDataSource(dataSource);
  });

I hope this makes sense and you will find this information beneficial.

 

Regards,
Eyup
Progress Telerik

[Renu]

Thanks Eyup. 

I changed the EditorTemplate to simple div

@(Html.Kendo().Template()
    .AddHtml("<div class=\"k-edit-label\">")
    .AddHtml(Html.LabelFor(m => m.WeekDays).ToHtmlString())
    .AddHtml("</div>")
    .AddHtml("<div class=\"k-edit-field\">")
    .AddHtml("<div id=\"weekDays\">")
    .AddHtml("</div>")
)

my kendo observable and template handler:

var weekDaysTemplateHandler = (data) =>{
 
    var result = '<div style="width: 33%;">';
    result += `<input class="weekDays" data-name="${kendo.htmlEncode(data.Name)}" data-id="${kendo.htmlEncode(data.ID)}" name="weekDays" type="checkbox" style="vertical-align: -2px" data-bind="checked:weekDays[${kendo.htmlEncode(data.ID)}].Selected" />`;
    result += ` <span>${kendo.htmlEncode(data.Name)}</span>`;
    result += "</div>"
    return result;
}
var viewmodel = new kendo.observable({
    dataSource: [],
    OnEdit: function(e){
        e.container.find("#weekDays").kendoListView(
        {
              dataSource: {
                  data: e.model.WeekDays,
              },
              template: kendo.template(weekDaysTemplateHandler ),
        })
});

This code worked.

But there's one issue now. I'm not able to get the days that are selected. everything is coming as false to my controller.
Any suggestions on this?

[Eyup]

Hi Renu,

I am glad the provided solution has proven helpful.

As for the next question, I would ask you to open a formal support ticket and send us a runnable sample. Then, we will be able to investigate the selected days issue deeper and send you a possible solution.