Hello,
I have a dropdownlist where I am using the .Select() and .Close() events. What I'm doing is changing the background colors of the dropdownlists when there is something in the list selected. This is so there's a visual indication for the user. If the user clicks off the box, it will remain colorized if there's a selection made. If there isn't, then it will return to the default color. Attached image (ex-01)
For some reason, this doesn't work if I have a different .DataTextField vs. .DataValueField. I have done this because I need to have the list display only a pre-formatted first name for the user. (e.g. John, instead of John Smith or JOHN SMITH). So in the cases where I have pre-formatting, it will colorize the dropdown correctly, but it does not remove it when I return to selectedIndex = 0 like the rest of the dropdowns. Attached image (ex-02).
The only difference in the code is that the .DataTextField("SomeFieldDisplay") and .DataValueField("SomeField") for the items that DO NOT. For the ones that work, it's .DataTextField("SomeField") and .DataValueField("SomeField"). I'm pretty puzzled by this one. My code is below. Thanks!
<script type="text/javascript">function onSelect(e) { e.sender.wrapper.children(0).addClass("custom-dropdown");}function onClose(e) { if (e.sender.selectedIndex < 1) { e.sender.wrapper.children(0).removeClass("custom-dropdown"); }}</script><style>html .k-widget .custom-dropdown { background-color: #00B312;}</style>
@( Html.Kendo().DropDownList()
.Name("ddlTopics")
.DataTextField("TopicTitle")
.DataValueField("TopicTitle")
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetAllTopicsByTitle", "Hierarchy");
});
})
.Events(e =>
{
e.Select("onSelect").Close("onClose");
})
.OptionLabel("--Select Topic--")
)
@(Html.Kendo().DropDownList()
.Name("ddlTopicOwner")
.DataTextField("TopicOwnerDisplay")
.DataValueField("TopicOwner")
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetAllTopicsByOwner", "Hierarchy");
});
})
.Events(e =>
{
e.Select("onSelect").Close("onClose");
})
.OptionLabel("--Select Topic Owner--")
)
Hi,
I need to disable node-checkbox (only the checkbox) and not the whole node.
this should be work by the prop "available".
attached example of my code:
http://dojo.telerik.com/@idoglik6/usIro
Thanks,
Ran

Background: I'm using external templates as described here for different pages in my SPA. Those pages consist of script tags with type "text/x-kendo/template". I load those templates into my index.html file and create Kendo views for each of the pages.
For some reason, I am not able to use the Kendo angular directives (e.g., "<input kendo-date-time-picker/>") inside my template scripts - they don't load properly. Using the same directives in my index.html file works perfectly though, so there shouldn't be a problem with dependencies. I suspect that the problem is either that there's some incompatibility with having the angular directives inside a View or that I'm not calling the right functions on the View. Right now, I'm just doing "layoutName.showIn("#content", viewName);" for the latter.
If anyone knows a fix, that would be super helpful. Otherwise, pointing me to an example of an SPA using external templates and the Kendo Angular directives would be helpful as well.
We are currently experiencing a bug in the kendo grid control on IE version 11.420.10586.0 and 11.0.9600.18349, have not test all IE versions only these 2. The column resizing handles do not appear when attempting to resize the column. It has been tested in modern versions of Firefox, Chrome, Safari, Opera and IE and IE is the only one experiencing this issue. Is this a known issue and can you recommend a work around? I am experiencing this but on your samples so I have not enclose sample code. Please see http://demos.telerik.com/kendo-ui/grid/column-resizing, I am experiencing the problem in your samples as well as in my own project.
Thanks
Hi Team,
We are not able to resize the column headers in Kendo grid on IE. Please use following link to reproduce the issue.
http://demos.telerik.com/kendo-ui/grid/column-resizing
The example works as expected when we open the link in Chrome.
I'm getting this error when I try to export to PDF (Scheduler). What I'm missing ?
Thank you

Hello,
We'd like only show whole numbers in the valueAxis - see example: http://dojo.telerik.com/ElobA/16
So, to solve this we added 'majorUnit: 1', which works fine.
However, we don't always know the data we are going to receive, and sometimes the values can be quite large.
If majorUnit is set to '1' with large values it will crash the browser. See example (uncomment majorUnit for crash): http://dojo.telerik.com/ElobA/13.
Is there a better recommended way of handling this? Or is it possible to set a value that determines the 'minimumMajorUnit' that won't crash the chart with large values?
Thanks for your help.
--Jeff
Here is demo code
Replication steps: run demo code in IE11
Actual result: grid rendered but it doesn't have column resizing feature (mouse hover on the border of header cell to click and drag for resize)
Expected result: grid's "column resizing" feature works
FYI:I can replicate it on IE11 only, other browsers: Edge, FireFox, Chrome have "column resizing" feature.
Hello. I'm using kendo with angularJs + C# MVC. I'm trying to crate 2 related combo boxes. I have a OData dataSouce with items {Id: number, Name: string, Number: string}. I need to display in 1-st comboBox Names and in 2-nd - Numbers. Also, when i'll select some Name, the same item (with this selected item's Id) should be selected in 2-nd comboBox. And vise-versa. The DataSource contains very big amount of data. So i have to use virtualization here. My decidion is to crate 2 different ComboBoxes with different Options, but with the same DataSource (i'll avoid of handling filtering in ComboBoxes). So, my code is following:
<select id="Name" name="Name"
kendo-combo-box
upper-hint
k-ng-model="MyCtrl.item.ItemByName"
k-options="TimesheetNewCtrl.NamesOptions"
k-data-source="MyCtrl.dsNames"></select>
<select id="Number" name="Number"
kendo-combo-box
upper-hint
k-ng-model="MyCtrl.item.ItemByNumber"
k-options="TimesheetNewCtrl.NumberOptions"
k-data-source="MyCtrl.dsNames"></select>
and in the MyCtrl i have:
var CreateDS = (url: string, _pageSize?: number, _model?: any, _sort?: any, _filter?: any, parameterMap?: any) => {
var ps = _pageSize || 5;
return new kendo.data.DataSource({
type: "odata-v4",
transport: {
read:
{
url: url,
dataType: "json"
},
parameterMap: parameterMap || Ui.GridBase.ODataParameterMap
},
schema: {
data: data => data["value"],
total: data => data['@odata.count'],
model: _model
},
serverPaging: true,
serverSorting: true,
sort: _sort,
serverFiltering: true,
pageSize: ps,
filter: _filter
});
}
this.dsNames = CreateDS(dsBookingsNamesUrl, 0, null, null, null);
this.NumberOptions = {
autoBind: false,
placeholder: "Number...",
dataValueField: "Id",
dataTextField: "Number",
filter: "contains",
ignoreCase: true,
change: (e) => {
if (e.sender.dataItem() == null) {
e.sender.value(null);
e.sender.text(null);
return;
}
this.item.ItemByName = this.item.ItemByNumber;
this.dsNames.filter(null);
$scope.$apply();
},
height: 260,
virtual: {
itemHeight: 26,
valueMapper: (options) => {
options.success([]);
}
}
}
this.NamesOptions = {
autoBind: false,
placeholder: "Name...",
dataValueField: "Id",
dataTextField: "Name",
filter: "contains",
ignoreCase: true,
change: (e) => {
if (e.sender.dataItem() == null) {
e.sender.value(null);
e.sender.text(null);
return;
}
this.item.ItemByNumber = this.item.ItemByName;
this.dsNames.filter(null);
$scope.$apply();
},
height: 260,
virtual: {
itemHeight: 26,
valueMapper: (options) => {
options.success([]);
}
}
}
It works almost fine. However, when i scroll down any of this ComboBoxes and select some value from it, this value is changing to some different value.
May be i'm doing something wrong? Also i've tried to change ValueMapper to return exact number of the selected element, but if i'm adding this value mapper to each of Options, it's constantly firing.
May be i heed to use 2 different dataSources? Could you provide any example of related comboBoxes (as i've described earlier)?
Hi,
The scrollbar is always shown if we set 'scrollable' to true. We need the scrollbar only show if there are many rows.
I tried to change 'overflow-y' to 'auto' for '.k-grid-content', it works fine on tree content, but the main issue is on the header, where the scrollbar header cell is always there.
Please kindly advice any way to solve it.
Thanks,
Kelvin
