This is a migrated thread and some comments may be shown as answers.

Completely dynamic generation of ListView

2 Answers 184 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Dr.YSG
Top achievements
Rank 2
Dr.YSG asked on 27 Jun 2012, 03:59 PM
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);







2 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 02 Jul 2012, 04:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 04 Jul 2012, 04:29 PM
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.
Tags
ListView
Asked by
Dr.YSG
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
Dr.YSG
Top achievements
Rank 2
Share this question
or