Kendo UI

PanelBar TreeView mishap

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<ul id="FormBar"></ul>
<script id="rowTemplate" type="text/x-jquery-tmpl">
    <div>
        <table class="formTbl" cellpadding="0" cellspacing="0" style="width: 100%;table-layout: fixed;">
         <colgroup>
                <col width="10px" />
                <col width="250px" />
                <col width="" />
                <col width="" />
            </colgroup>
            <tr>
                    <th>
                     &nbsp;
                    </th>
                    <th class="fieldcell captionCell">
                     Change
                    </th>
                    <th class="fieldcell">
                      Before
                    </th>   
                    <th class="fieldcell">
                      After
                    </th>       
                </tr>
            <tbody id="customFormContainer">
             
            {{each(i,field) HistoryList}}   
                <tr>
                    <td>&nbsp;</td>
                    <td class="fieldcell captionCell">
                      ${field.Field}
                    </td>
                    <td class="fieldcell">
                      {{html field.OValue}}
                    </td>
                    <td class="fieldcell">
                      {{html field.NValue}}
                    </td>       
                </tr>       
             {{/each}}                                  
        </tbody>
        </table>
    </div>
</script>

CSS

html { font: 12px Arial, Helvetica, sans-serif; }

JavaScript

var template = kendo.template,
    templates = {
        content: template(
            "<div class='k-content'#= contentAttributes(data) #>#= content(item) #</div>"
        ),
        group: template(
            "<ul class='#= groupCssClass(group) #'#= groupAttributes(group) #>" +
                "#= renderItems(data) #" +
            "</ul>"
        ),
        itemWrapper: template(
            "<#= tag(item) # class='#= textClass(item, group) #'#= contentUrl(item) ##= textAttributes(item) #>" +
                "#= image(item) ##= sprite(item) ##= text(item) #" +
                "#= arrow(data) #" +
            "</#= tag(item) #>"
        ),
        item: template(
            "<li class='#= wrapperCssClass(group, item) #'>" +
                "#= itemWrapper(data) #" +
                "# if (item.items) { #" +
                "#= subGroup({ items: item.items, panelBar: panelBar, group: { expanded: item.expanded } }) #" +
                "# } #" +
            "</li>"
        ),
        image: template("<img class='k-image' alt='' src='#= imageUrl #' />"),
        arrow: template("<span class='#= arrowClass(item) #'></span>"),
        sprite: template("<span class='k-sprite #= spriteCssClass #'></span>"),
        empty: template("")
    },
    rendering = {
        wrapperCssClass: function (group, item) {
            var result = "k-item",
                index = item.index;
        
            if (item.enabled === false) {
                result += " k-state-disabled";
            } else {
                result += " k-state-default";
            }
        
            if (index === 0) {
                result += " k-first";
            }
        
            if (index == group.length-1) {
                result += " k-last";
            }
        
            return result;
        },
        textClass: function(item, group) {
            var result = "k-link";
        
            if (group.firstLevel) {
                result += " k-header";
            }
...