Jaa

ASP.NET ajax 4.0 , More DataBinding help with the DataView

  • Artikkeli

With how easy it is to write simple & complicated templates, you would want to debug the template generation
or enable certain scenarios wherein you have to do complex manipulation of data using the existing data being bound.

Events

The Templating engine fires the ItemCreated event which is similar to the OnItemCreated of the ASP.NET DataGrid.
You can subscribe to the event by calling the add_itemCreated method on the instance of the DataView.

 instanceOfDataView.add_itemCreated(onItemCreated) ;

function onItemCreated(sender,eventArgs) {
      //Get the Data Item currently being bound to the template
         var currentDataItem = eventArgs.get_dataItem();
       //Get the current template result , the HTMLElement being bound
         var currentElement eventArgs.get_templateResult(); 
 }

Templating Elements  
What are these ?

    These are elements / variables available in the templates  which contain information about the

    template and other elements to help you debug databinding.

   1.
$index.             
The index of the current item being bound.

             
    Example of using this to color rows based on whether they are even or odd               

 <div id="listTemplate" class="sys-template">
<ul>
    <li>
        <h3>
            {{ ListTitle }}
        </h3>
        <ul>
            <li class="{{ ( ($index%2)==0 ? 'even':'odd') }}">
            {{ $index }} {{ ListElementText }}
        </ul>
    </li>
</ul>
</div>

2. $element
         This contains the current HTMLElement being created depending on your template.

         You don’t want to mess with this one :-)

3. $dataItem

         This element is a refernce to the dataItem being bound .

         Example of using this element to filter based on contents of the current dataItem being bound.

 <div id="listTemplate" class="sys-template">
<ul>
    <li>
        <h3>
            {{ ListTitle }}
        </h3>
        <ul>
            <!--*
//Iterate over the ListElements , generating the <li> element for each List Element
if ( $dataItem.ListTitle.indexOf('Blog') > -1 ) {
    alert('ListTitle contains Blog');
}
for(var index=0;index< ListElements.length;index++) {
var listElement = ListElements[index];
*-->
            <li>{{ $index }} {{ listElement.ListElementText }} </li>
            <!--*
}
*-->
        </ul>
    </li>
</ul>
</div>

Comments