Completely dynamic generation of ListView

[Dr.YSG]

I have used the following trick (which I saw in this forum) to create Kendo windows that have no <div id='xxxx'> in the HTML source. But it is not working for ListViews:

$("<div id='ColumnNamesTMP' />").kendoListView({

     dataSource: dataSource,

     pageable: false,

     dataBound: function(e) {

         var html = $("#ColumnNamesTMP").html();

         GridData.columnChooser.content(html);

     },

     template:kendo.template(template)

 });

The dataBound function is never being called.

However, if I add  <div id="ColumnNames" style="visibility: hidden;"/> to the source HTML file, then the dataBound function is called and GridData.columnChooser (which is a kendoWindow) has it's contents filled in. But as you see I have to go and use jQuery to rip out the <DIV> from the DOM:

$("#ColumnNames").kendoListView({

    dataSource: dataSource,

    pageable: false,

    dataBound: function(e) {

        var html = $("#ColumnNames").html();

        $("#ColumnNames").remove();

        GridData.columnChooser.content(html);

    },

    template:kendo.template(template)

});

I can use http://handlebarsjs.com to do this sort of template generation of HTML, but I am looking for a KENDO only solution if possible.

If you are wondering why I want to completely dynamically created kendoList, the answer is that the the list is going to be placed in a kendoWindow that is also created on the fly and added to the DOM:

$("<div id='colChooser'/>").kendoWindow({

    actions:["Maximize", "Minimize", "Close"],

    width:"14em",

    height:"25em",

    title:"Choose Columns",

    modal:true

});
GridData.columnChooser = $("#colChooser").data("kendoWindow");

the content will be filled in later with:

GridData.columnChooser.content(html);

[Iliana Dyankova]

Hi Yechezkal,

The most likely reason for the issue is that the <div> element from which the ListView is initialized is not added to the DOM - please note that you need to append this element within the document. For example, you could use the jQuery appendTo() method and create on the fly the <div> element. Like here: 

$("<div id='ColumnNamesTMP'></div>").appendTo("body").kendoListView({
     dataSource: dataSource,
     pageable: false,
     dataBound: function(e) {
         var html = $("#ColumnNamesTMP").html();
         GridData.columnChooser.content(html);
     },
     template:kendo.template(template)
 });

I hope this helps.
 

Regards,
Iliana Nikolova
the Telerik team

[Dr.YSG]

What I was pointing out is that .kendoWindow does seems to do the appendTo DOM automatically since this does work:

$("<div id='colChooser'/>").kendoWindow({ ....


And since my "<div id='ColumnNamesTMP'> is inside the window, it seemed clumsy to place it in the DOM in one place and then move it to the dynamically created "colChooser".

But some restructuring and use of Handlebars templates makes this much cleaner.