Hi,
My case is the following :
- At the top of my page I have a header
- On the rest, I have a splitter with orientation Horizontal, inside a div with width: 100%, weight: 100% )
When I move the splitter, header disappears; but only with Chrome (It works correctly with FF & IE11 ...)
After investigations, the height calculated by the splitter is incorrect
I found a correlation with the fact that the offsetTop returned by Chrome is also incorrect
In fact, my page is not so simple as described previously : there is a lot a nested div. And at one point, the offsetTop returns to 0
Here is the code that I have to add so that it works (sorry for the quality of the code, i'm a beginner javascript developer) :
var contInit = document.getElementById("Container-" + splitterId); var cont = contInit; var top = cont.offsetTop; var zero = false; while (cont.parentElement !== document.body) { cont = cont.parentElement; if (cont.offsetTop === 0) zero = true; else if (cont.offsetTop !== 0 && zero) { zero = false; top = top + cont.offsetTop; } }contInit.style.height = "calc( 100vh - " + top + "px )"; var outerSplitter = $("#" + splitterId).data("kendoSplitter"); if (outerSplitter != null) outerSplitter.resize(true);
If you have a better solution, I'll take it
Regards

Below find my code. I am using MVVM to initate a range-slider. It appears that when the page loads, both knobs are to the left most side, instead of one at the min and one at the max.
Please note: sometimes when the page loads, the knobs are positioned correctly.
Please advise.
<script type="text/x-kendo-template" id="filterAgeTemplate"> <div class="item--agerange"> <div class="agerange-wrap"> <div data-role="rangeslider" data-small-step="1" data-large-step="10" data-min="1" data-max="100" data-bind="value: ageRange, events: { change: vm_onAgeSelectorChange }" id="panel-filter__agerange" style="width:160px"> <input /> <input /> </div> <div class="agerange-title">Age Range</div> </div> <div class="agerange-btns "> <button class="button button__gray-outline"><span>Reset</span></button> </div> </div> </script>

How do I, for example, programatically call the method addRow listed here?
http://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-methods
I can't find it explained anywhere for any of the components...
I need to have a mask in the following format: 0000.00.00 where the dot(.) should not act like a decimal placeholder, even with the clearPromptChar
setted to true and promptChar with " " value, after the field lose his focus the decimal placeholder is shown.
What I need:
If user types: 1234 - Expected: 1234 - Actual: 1234. .
If user types: 12345 - Expected: 1234.5 - Actual: 1234.5 .
Is this feature available in mask option? it exposes any function where i should format by myself?

I have custom event templates in my kendo scheduler, and noticed that in the template, the data variable gives you access to the event and all its fields, and one of them is inverseColor, which lets you know if the color was inversed because the background color of the event was too light/dark.
My issue is, when users base colors on a multi-select, where they can have multiple options selected, I manually change the event background color to the first selected option, otherwise the scheduler doesn't know what to do with multiple colors for one event.
When I manually change the background-color, it breaks whatever is determining inverseColor in the template... So really light colors will have white font (because default color if the scheduler can't find anything to color it is gray, which I set up).
Is there a way to trigger inverse color on event templates so that even if I manually change the background color, it will recalculate that and change the font color accordingly?
columns.Bound(p => p.OrderName).ClientTemplate( "<a onclick='showOrderDetail('#= OrderName #')' href='\\#'>#= OrderName #</a>").Title("Order Name").Width(150); <a onclick="showOrderDetail(" OrderXYZ')'="" href="#">OrderXYZ</a>
Spreadsheet is a nice addition to the Kendo UI framework.
After running the samples and reading the documentation, I could not find a way to lock cells and prevent user changes especially to protect formulas. Frozen rows and columns do not seem to achieve the same. Take the demos and consider the invoice, would you implement it as a spreadsheet if you could not lock the ​tax rate and total?
If there is a way to lock cells, please advise, otherwise please implement before RTM.

Hi,
I have a grid and it has filter with different filterable operators. Now when I click the filter and apply a condition, there is a server side filtering happening and results are shown.
Now when I do a second level filter on a column , I need to restrict the operator of that filterable column. To achieve this ,I need to have a event that is listening the moment I click filter,Since I am on Kendo UI v2016.1.412 , I am unable to use the callback function "filter" or "filterMenuOpen". Can someone help me as how can I register the click event of filter so that i can then add my custom filter operators.
$scope.xx = {
editable : false,
sortable : true,
pageable : {
pageSizes : 1
},
filterable : {
extra : false,
operators : {
string : {
eq : 'Equals to'
}
}
},
scrollable : false,
selectable : true,
columnMenu: true,
columns : [{
field : "xx",
title : translate("xx"),
filterable : true
filterMenuOpen:function(e){
console.log("not triggered");
},
filterMenuInit:function(e){
console.log("not triggered");
},
filter:function(e){
console.log("not triggered ");
}
}, {
field : "xx",
title : 'xx'
filterable : <My custom filter>
}
}