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

Using kendo immediately after an .append()

1 Answer 104 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kirk
Top achievements
Rank 1
Kirk asked on 12 Jun 2013, 08:18 PM
I am attempting to load a file with ajax. Once the content is loaded, I want to impose the kendoComboBox() function to all items that are classed as "drop-list" 
Just with this code (I can supply more if necessary) are there any errors you see?
Below is the javascript that pull the .htm (below the first block of code)
Grid and Chart are able to activate.
The combo box doesn't, nor does date-range,
if ($(e.target).parent().hasClass('hb-hasView') ){
            hb.addTab({text:$(e.target).text(),content:'<br>'});
            var view = 'views/'+$(e.target).parent().attr('hb-view')+".htm";
             
            $.ajax({url: view})
            .success(function(html){
                $('#tabSet div:last-child').append(html);
                $('#tabSet div:last-child').children().each(function(){
                    var $this = $(this);
                    if ( is('drop-list') ){
                        $this.kendoComboBox();
                    }
                    if ( is('date-range') ){
                        $this.kendoDateTimePicker();
                    }
                    if ( is('grid') ){
                        $this.kendoGrid();
                    }
                    if ( is('chart') ){
                        $this.kendoChart();
                    }
                    function is(DOMclass){
                        return $this.hasClass(DOMclass);
                    }
                });
            });
        }
<form>
    <div>
        Start Time<input class="start date-range" value="10/10/2011" hb-for="*"/>
        End Time<input class="end date-range" value="10/10/2011" hb-for="*"/>
    </div>
    <div class="search-button"><input type="submit" value="Search" hb-for="*"/></div>
    <div class="search-button"><input type="submit" value="Reset" hb-for="*"/></div>
    <details id="aopt-title">
        <summary>Advanced Options</summary>
        <div id="advanced-options">
            <label class="ddl1">
                <div>Purchase Type:</div>
                <select id="test1234" class="drop-list" hb-for="*">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl2 ">
                <div>Channel:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl3">
                <div>Order Conf:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl1">
                <div>Skills:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl2">
                <div>Contact Center:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl3">
                <div>Iconic/.com:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl1">
                <div>Operator:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl2">
                <div>Page Size:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl4">
                <div>Survey Question:</div>
                <select class="drop-list" hb-for="">
                    <option>************************************************</option>
                    <option>************************************************</option>
                    <option>************************************************</option>
                </select>
            </label>
        </div>
    </details>
</form>
<div class="data-portion">
    <div id="grid" class="grid"></div>
    <div id="chart" class="chart"></div>
</div>

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Jun 2013, 10:55 AM
Hello Kirk,

I am afraid that the provided information is not sufficient enough in order to determine where the issue comes from. Generally speaking, you should be able to initialize Kendo widgets from elements that are appended to the DOM. Is it possible for you to prepare a small jsBin sample which isolates the issue? In this way I would be able to debug your current implementation, examine what is going wrong and assist you further.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Kirk
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or