Hey guys,
I'm having trouble setting the focus to a column after I've just added a new row to my grid.
When I add a new row, I want to set the focus to a custom drop down editor I've implemented. However, if I override the edit function of the grid and set the focus to the drop down list, once the edit function is complete, the focus will be reset to the first editable cell in the row.
I have an example here: http://dojo.telerik.com/@gmeulendyks/eFinI/3
Clicking the "Add New Record" button should set focus to the Category drop down list.
Can someone tell me what I'm doing wrong in the edit function?
Thanks,
Graham
We were using telerik version Kendo UI v2015.1.408 and recently upgraded to Kendo UI v2017.2.504 after which the server side pagination is not working fine. The sample code is as follows:
var allNameDataSource = new kendo.data.DataSource({
serverPaging: true,
serverFiltering: true,
transport: {
read: {
url: "/StudentNames/Name/GetAllNames",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
type: "POST"
},
parameterMap: function (options, operation) {
debugger;
if (operation !== "read" && options) {
return JSON.stringify({
model: options
});
}
else if (operation == "read") {
debugger;
var sortOrderField = null;
var sortOrderValue = null;
var selectedSorting = allNameViewModel.allNameDataSource.sort();
if (typeof (selectedSorting) != "undefined" && selectedSorting.length > 0) {
sortOrderField = selectedSorting[0].field;
sortOrderValue = selectedSorting[0].dir;
}
var filterAndCondition = allNameViewModel.allNameDataSource.filter();
if (typeof (filterAndCondition) != "undefined" && filterAndCondition != null) {
if (filterAndCondition.filters.length > 0) {
debugger;
allNameViewModel.pushKendoCustomFilter(filterAndCondition);
debugger;
var CustomFilters = allNameViewModel.Filters;
return JSON.stringify({ skip: options.skip, take: options.take, pageSize: options.pageSize, OrderByField: sortOrderField, OrderByValue: sortOrderValue, filter: allNameViewModel.filter, CustomFilters: CustomFilters });
}
}
return JSON.stringify({ skip: options.skip, take: options.take, pageSize: options.pageSize, OrderByField: sortOrderField, OrderByValue: sortOrderValue, filter: allNameViewModel.filter });
}
}
},
pageSize: PageCountValue > 0 ? PageCountValue: 10,
schema: {
model: {
id: "StudentId",
fields: {
Name: { type: 'string' },
Age: { type: 'string' },
Address: { type: 'string' },
Email: { type: 'string' }
}
},
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
}
}),
Please let me know what is wrong with this.
Greetings!
I've got a kendo ui scheduler in my project and encountered a problem with displaying large number of events in view.
In attached image you can seen that the whole scheduler becomes unreadable with increase of events number. Is there any way to create some kind of button with number of events per time of day and open a dialog window with readable list of event in it.
I am using cordova version 6.4.0.
Here is a simple demo for what I want. (http://dojo.telerik.com/idAreK/2).
It works fine.
However, when i tried to call cancelChange() function, "Uncaught TypeError: grid.cancelChange is not a function " always pop up.
There is only one jquery.js file in the head.
Thanks
We are using a Kendo comboBox control, which behaves correctly if an option is selected by opening the dropdown list and clicking the option. However, the following behavior is observed when selecting an option by typing in the dropdown box:
-Start typing: a small list of corresponding options appears
-Select one of the options in the list: the seleted option appears in the dropdown box. So far the behavior is correct.
-Click the caret of the dropdown to expand the list of options.This has the result that the selected option changes to the last option of the dropdown list, and all the options are highlighted as if selected. Inspecting the HTML elements shows they all have class k-item and k-state-selected.
What is causing this behavior? Shouldn't only one item at a time have the class k-state-selected? Is there some option that has to be set? I would be thankful for any help on this.
We are using Kendo UI v2016.1.322, Internet Explorer 11.0.9600.18314, Windows Server 2008 R2 Enterprise.
The HTML uses this directive as shown:
<sc-combo-box type="availYear" sc-filters="AvailYear" placeholder="Select Avail Year" default-value="'2016'"></sc-combo-box>
The comboBox control is built in the directive as follows:
var controller = function ($scope, $attrs, data) {
var vm = this;
vm.cbUUID = '';
vm.type = '';
vm.defaultValue = $scope.$parent.$eval($attrs['defaultValue']);.
:
:.
vm.render = function (element, placeholder, type, scFilters) {
vm.cbUUID = helper.guid().toString();
vm.filterNames = scFilters.toString();
vm.filterNames = scFilters.toString();
// establish new id for combobox
element.attr('id', vm.cbUUID);
// create datasource, establish options used when creating combobox and combine into one 'options' object
var options = helper.concatObjects(vm.buildDataSource(vm.filterNames), {
placeholder: placeholder,
value: vm.defaultValue,
filter: 'contains'
});
// established combobox options
element.kendoComboBox(options);
};
};
var directive = {
link: link,
require: 'scComboBox',
restrict: 'E',
replace: true,
scope: {
defaultValue: '='
},
controller: ['$scope', '$attrs', 'data', controller],
template: '<select id="scComboBox" style="width: 100%"></select>'
};
return directive;
function link($scope, $element, $attrs, ctrls) {
ctrls.render($element, $attrs.placeholder, $attrs.type, $attrs.scFilters);
}
}
Hi,
I'm trying to use the cancel event in a grid, but the event is never fired.
Code:
$("#grid").kendoGrid({
editable: true,
toolbar: ["create", "save", "cancel"],
dataSource: _dataSource,
columns: [{
title: "Description",
field: "description"
}, {
title: "Active",
field: "active"
}],
edit: function (e) {
console.log("add row");
},
cancel: function (e) {
console.log("cancel row");
}
});
When I click on "Add new record", the console shows "add row", but when I click on "Cancel changes" nothing shows up in the console.
It is a pretty simple code and it is following the documentation, but am I missing something?
Version: Kendo UI v2016.1.112
Thanks!
Hello All,
I cannot add a tooltip to both a toolbar button and a action button located in the grid row. Please look at my example exmple http://dojo.telerik.com/@iakhmedov1/aRUle and get it working.
Thanks,
Igor
Hi Kendo UI Team,
I'm trying to create a custom editor for in cell editing within a kendo grid. Our custom editor is a combination of your multiselect/treeview ui widgets.
The problem I am encountering is that when you click the cell and the editor appears, attempting to further interact with the editor will then cause the cell's custom editor to minimize - I suspect the grid thinks I am clicking out of the scope of the editor (because the editor is larger than the cell that contains the bound data and has absolute positioning below that cell) and thus closes it. Is there any way to get around this problem? As it is right now, I am unable to interact with the custom editor without it closing the cell's edit mode.
(unfortunately our custom editor is... complex... so I don't think I have a nice code sample to put here for you)
Best,
Jeff
When i export a Kendo UI Grid to Excel (xlsx) file, it also exports the group footer template which in my case included hidden fields (<input type=hidden id="test"></input>)
Is there a way we can suppress the export of the group footer template and the group header template.
The header template also gets exported in the output xlsx file.
In my case the group header template looks like the following:
<script id="productCodeTemplate" type="text/x-kendo-tmpl">
# var product = value; productArr = product.split(";"); #
<span class="name" style="display: inline-block;width:500px;">Product Code: #: productArr[0]# </span>
</script>
The group footer template is as follows
groupFooterTemplate: "<input type='hidden' class='totalFooter' value='#=count#'></input><span class='totalFooterSpan'>Total</span>"
Kindly see attached zip file for a sample of the exported excel.