OnClientItemDataBound

The following article demonstrates the usage of the OnClientItemDataBound client-side event.

The OnClientItemDataBound client-side event occurs for each item that is created during a ODataDataSource binding.

The event handler receives two parameters:

1. The instance of the SearchContext firing the event.

2. An eventArgs parameter containing the following methods:

   • get_item() - returns a reference of the SearchContextItem.

   • get_dataItem() - returns a reference to the DataItem object (data container).

<telerik:RadODataDataSource runat="server" ID="DataSource1">
<Transport>
    <Read Url="http://demos.kendoui.com/service/Northwind.svc/"></Read>
</Transport>
<Schema>
    <telerik:DataModel ModelID="Product" Set="Products">
        <telerik:DataModelField FieldName="ProductID" />
        <telerik:DataModelField FieldName="ProductName" />
    </telerik:DataModel>
        <telerik:DataModel ModelID="Supplier" Set="Suppliers">
        <telerik:DataModelField FieldName="SupplierID" />
        <telerik:DataModelField FieldName="ContactName" />
    </telerik:DataModel>
</Schema>
</telerik:RadODataDataSource>
<telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
    ODataDataSourceID="DataSource1"
    DataModelID="Product"
    DataKeyNames="ProductID, ProductName"
    DataValueField="ProductID"
    DataTextField="ProductName"
    DataContextKeyField="SupplierID" >
    <DropDownSettings Height="400" Width="300" />
    <SearchContext DataModelID="Supplier" DataKeyField="SupplierID" 
        DataTextField="ContactName"  OnClientItemDataBound="OnClientItemDataBound">
    </SearchContext>
</telerik:RadSearchBox>
<script type="text/javascript">
    function OnClientItemDataBound(sender, args) {
        var contactName = args.get_dataItem().ContactName;
        args.get_item().set_imageUrl(contactName + "_small.png");
    }
</script>