1. In Internet Explorer the color of the placeholder text was equal to the color of the text typed in the input field, all other browsers showed the placeholder in light grey.
2. When clicking in the field the placeholder would not disappear in browsers like Firefox for example, but simply changed color to the normal input color. It only disappeared as soon as you started typing. IE, however, removed the placeholder text as soon as the input field is clicked in and shows the user a empty input field, which was my desired behaviour.

To fix these issues i came up with some event handlers that can be easily attached to your autocomplete setup script plus two lines browser specific of CSS code.

JS Autocomplete setup code:

$("input.autoComplete")
        .kendoAutoComplete({...})
        .focusin(function () {         
            //If IE the placeholder will be hidden, but typed text
            // would be in the placeholders colour, so change it here to your normal
            // input color
            if ($.browser.msie === true) {
                $(this).css('color', 'black');
            }
        }).focusout(function () {
            //If IE and the value is empty, the placeholder will be shown;
            // make sure it has the right colour
            if ($.browser.msie === true && $(this).val() === '') {
                $(this).css('color', '#6d6d6d');
            }       
        }).ready(function () {
            var el = $("input.autoComplete");
            var value = $(el).val();
 
            if (value !== $(el).data('kendoAutoComplete').options.placeholder) {
                //every browser except IE return empty value if input is empty    
                // but placeholder is shown
                if (value !== '') {
                    $(el).css('color', 'black');
                }
            }  else {
                //if IE change color for your place holder;
                if ($.browser.msie === true) {
                    $(el).css('color', '#6d6d6d');
                }
            }
        });

CSS Code:
/*This will make the placeholder invisible in Gecko/WebKit browsers on focus*/
input:focus::-webkit-input-placeholder { color: transparent !important; }
input:focus:-moz-placeholder {color: transparent !important; }


I hope the code helps others, with the same cross browser issues.

<div id="products"  data-role="treeview" data-text-field="Name" data-value-field="Id" data-check-field="Checked" data-check="true" data-bind="source: SpecificationProducts" ></div>

• I have added the "data-pageable=true" to the div markup. That shows the pager at the bottom, but only with a single page (I have at least 200 rows on the grid)
• I have added the $('#grid').kendoGrid({ pageable: true }); js code, but I get the same behavior as before.
• I did something on the lines of $('#grid').data('kendoGrid').dataSource.pageSize(10) once and it worked. But only if I did it by hand on the javascript console.
• I have added a method to handle the dataBound event, and used the $('#grid').data('kendoGrid').dataSource.pageSize(10) idea, that crashed firefox repeatedly.