Completely dynamic generation of ListView

3 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 27 Jun 2012 Link to this post

    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. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 02 Jul 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 04 Jul 2012 Link to this post

    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.
Back to Top