[Solved] Detail View bind to datasource

[Start Informatica]

Hello,

 In your example:

http://dojo.telerik.com/IyOGA

how can i bind the <li> element to the column ShipName? It says it is not declared.

 

Thank you.

[Atanas Korchev]

Hi,

You are getting this error because the Employee object doesn't have a ShipName field. It is a member of the Order object.

Regards,
Atanas Korchev
Telerik

 

 

[Start Informatica]

I understand that, but how do i bind that <li> element to a member of the Order object?

I just want it like this:

<div class='employee-details'>
                            <ul>
                                <li><label>Country:</label>#= Country #</li>
                                <li><label>City:</label>#= City #</li>
                                <li><label>Address:</label>#= Address #</li>
                                <li><label>Home Phone:</label>#= HomePhone #</li>
                                <li><label>Ship Name:</label>#= ShipName #</li>
                            </ul>
                        </div>

 

 

 

[Atanas Korchev]

Hello,

You can't bind to a member of the Order object because no order has been loaded at the time when detailInit fires. You have to wait for Orders to load before using them.

Regards,
Atanas Korchev
Telerik

 

 

[Start Informatica]

What event is called when the datasource finished loading?

[Start Informatica]

Looking at the datasource events i found this one:

function onDataBound(arg) {
                    kendoConsole.log("Grid data bound");
                }

But, how exactly can i bind my html element here? Thank you.

[Atanas Korchev]

Hi,

You should use jQuery if you want to bind the HTML asynchronously. Handle the detailInit event:

detailInit: function(e) {
    var datailCell = e.detailCell;
    
    var dataSource = new kendo.data.DataSource({ 
           transport: {/* transport configuration */}
    });
 
    dataSource.fetch(function() {
           var firstDataItem = dataSource.at(0);
           
           // use jQuery to find particular DOM element from the detailCell

           $(detailCell).find("li").text(firstDataItem.ShipName);
    });
}

I have also updated your demo: http://dojo.telerik.com/@korchev/iboha

Regards,
Atanas Korchev
Telerik