I have an application based around a Kendo treeview, which displays fairly complex hierarchical data (with html passed via a kendo datasource).

This works fine in IE 8,9 and 10, and also Chrome. However, when using IE7 (or IE8 in compatibility mode), there are two issues:-

•  If the number of parent items exceeds the div height, the treeview isn't clipped (although the div scrollbar is shown), resulting in the treeview overwriting other interface elements.
• Initially the expand arrows are shown, but all except the top level arrows have a tendency to disappear when hovered over.

The treeview is defined as a div:-

And then initialised on the page load:-

The drag/drop option is set via the .NET MVC view bag, based upon a users permissions.

Unfortunately, IE7 is still the default browser for most of the users who will use this application, and it would be nice to enable the application to work with it, rather than have to get them all to upgrade.

Thanks

I saw some examples using Kendo UI autocomplete text box with templates. 

http://demos.kendoui.com/web/autocomplete/template.html
However I could not find an example that uses templates on auto completion using
kendo.observable

My approach is that I use MVVM observable to binds the data to an input box as below.

<div id="form-container">

    <h2>

        Advisors</h2>

    Select Advisor:

    <div class="autocomplete">

        <input id="div-template" data-role="autocomplete" data-text-field="AdvisorName" data-filter="contains" data-bind="source: advisorsSource, value: selectedAdvisor" />

    </div>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        var viewModel = kendo.observable({

            advisorsSource: new kendo.data.DataSource({

                minLength: 2,

                template: '<tr>' +

	                    '<td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>' +

        	          '</tr>',

                transport: {

                    type: "json",

                    serverFiltering: true,

                    read: "Home/Advisors",

                    parameterMap: function(options, operation) {

                        if (operation !== "read" && options.models) {

                            return {

                                models: kendo.stringify(options.models)

                            };

                        }

                        return {

                            prefix: options.filter.filters[0].value

                        };

                    }

                },

                schema: {

                    model: { id: "AdvisorCode" }

                }               

            })

        });

        kendo.bind($("#form-container"), viewModel);

    })

</script>

MVC Action:

public JsonResult Advisors(string prefix)        {

                      var list = new List<Advisor>()

                           {

                               new Advisor { AdvisorCode = 002, AdvisorName = "Alex" , Organisation = "Blue Co"},

                               new Advisor { AdvisorCode = 003, AdvisorName = "Foo" , Organisation = "Yellow Co"},

                               new Advisor { AdvisorCode = 004, AdvisorName = "Smith", Organisation = "Green Co" },

                               new Advisor { AdvisorCode = 005, AdvisorName = "David", Organisation = "Yellow Co" },

                               new Advisor { AdvisorCode = 006, AdvisorName = "Alex" , Organisation = "Blue Co"},

                               new Advisor { AdvisorCode = 007, AdvisorName = "Foo" , Organisation = "Yellow Co"},

                               new Advisor { AdvisorCode = 008, AdvisorName = "Smith", Organisation = "Green Co" },

                               new Advisor { AdvisorCode = 009, AdvisorName = "David", Organisation = "Yellow Co" }

                           };

            return Json(list, JsonRequestBehavior.AllowGet);

        }

The auto completion works ok.  However it only shows  AdvisorName. It seems like my template does not work. I need to display multi-column (AdvisorCode, AdvisorName, Organisation) in the drop down, and the search should be based on any of these columns ( not just the AdvisorName). Can you please advise me on how to use the template and make the search based on multiple columns?

King Regards,
Raj