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

I have a hierarchical kendo ui grid that is successfully displaying items from my database, but for some reason the "Add New Record" button in the detail grid doesn't add a new row or fire any event, nor does it pull any error, and I am at a loss as to how to go about debugging this.
Each Log entity can have many LogAppends, and the children of a Log are rendering properly in the detail grid.
Here is my grid html:
<div kendo-grid k-options="registrationOptions" k-data-source="logginggridData" k-columns="gridColumns" k-selectable="true"> <div k-detail-template> <kendo-tabstrip> <ul> <li class="k-state-active">Append Logs</li> </ul> <div> <div kendo-grid k-options="detailGridOptions(dataItem)"></div> </div> </kendo-tabstrip> </div> </div>$scope.detailGridOptions = function(dataItem) { return { dataSource: { transport: { read: { url: "api/logappends/", dataType: "json", contentType: "application/json" }, update: { url: "api/logappends/", type: "post", dataType: "json", contentType: "application/json" }, create: { contentType: "application/json", url: "api/logappends/", type: "post", dataType: "json", data: function(data) { console.log("CREATING TEST DATA"); console.log(data.models[0]); return data.models[0]; } }, parameterMap: function(options, operation) { if (operation == "update") { return JSON.stringify(options.models[0]); } if (operation == "create") { return JSON.stringify(options.models[0]) } if (operation == "destroy") { return JSON.stringify(options.models[0]); } } }, error: function(e) { // handle error console.log(e); }, schema: { data: function(data) { //specify the array that contains the data console.log("DATA RETURN TEST"); console.log(data); return data || []; }, model: { id: "LogAppendId", fields: { LogAppendId: { editable: true, nullable: false, type: "number" }, DateAppended: { type: "date" }, Type: { type: "string" }, Comments: { type: "string" } } } }, pageSize: 5, filter: { field: "LogId", operator: "equal", value: dataItem.LogId } }, scrollable: false, sortable: true, pageable: true, toolbar: ["create"], editable: "inline", autoBind: true, batch: true, height: 550, filterable: true, columns: [{ field: "LogAppendId", title: "ID", width: "56px" }, { field: "Comments", title: "Comments", width: "240px" }, { field: "Type", title: "Type", width: "110px" }, { field: "DateAppended", title: "Date Appended" }, { command: ["edit", "destroy"], title: " ", width: "250px" }] }; };
Any help would be appreciated. Thank you.
Is any viable event for dragging columns (i.e. dragEnd) in Kendo Grid?
What i want to do: Drag and drop columns out of grid for hidding/deleting them.
Hi, I would like to know if is there a way to export a grid to a word filein front end?
Best
Hi,
I am trying to load a kendo UI Donut chart.
The code is given below:
function createChart(){
$("#chart").kendoChart({
title: {
position: "bottom",
text: "ABC"
},
legend: {
visible: true
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [
{
name: "Current Year: " + "<%= currentAcdYearName %>",
data: [
{
category: "Tenure-Track",
value: "10",
color: "#0de219"
}, {
category: "Perm Budget NTT",
value: "20",
color: "#90cc38"
}, {
category: "Soft Budget NTT",
value: "45",
color: "#568c35"
}, {
category: "Students",
value: "76",
color: "#606634"
}, {
category: "TBD",
value: "65",
color: "#304d38"
}
],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #=kendo.format(\'{0:P0}\', percentage)# "
}
}
],
tooltip: {
visible: true,
//template: '#= category # - #= kendo.toString(percentage,\"#\\%\")#'
//template: "#= category # (#= series.name #): #= value #%"
template: "#= category # (#= series.name #): \n #=kendo.format(\'{0:P0}\', percentage)# "
}
});
}
Once the values of any of the category becomes 0,eg.,
category: "TBD",
value: "65",
color: "#304d38"
If the value is 0 instead of 65, the label goes inside the center circle.
Could you please let me know how to retain the label on the donut without making it come inside the center of the donut.
Thanks,
minu
Hi,
Just notice now when i try to position the tooltip at left it will always display it at right.
The other positions are working as they should.
I've made an example here.
http://dojo.telerik.com/IlONI
Thanks in advance.
Is there a way to set the height on a MultiLine Textbox in the MVC Grid? It seems that IE 11 is showing a little more than a row but Chrome and FireFox show multiple rows when editing a row. I have the [DataType(DataType.MultilineText)] attribute set on the property I'm editing in my View Model.
ViewModel
[DataType(DataType.MultilineText)]public string Comments { get; set; }Grid column definition
columns.Bound(c => c.Comments).Width(400);See attached for screenshots. I need this to be consistent so is there a way to get the height of the editor textbox the same?
dataBound : function() {[...]for (var i = 0; i < as_ColumnsToHide.length; i++) { ao_Grid.hideColumn(as_ColumnsToHide[i]); }[...]}cell = leafDataCells(container).filter(":visible").eq(headerCellIndex);cell[0].style.display = "none";