Hello, i have a dropdownlist, virtual mode (the real one is bound to 120K records).
The dropdownlist is bound to a property on a viewmodel.
After selecting an item in the dropdownlist the bound property value became "[object Object]" instead that being set to the value property of the dropdownlist's datasource item.
An example here: https://dojo.telerik.com/EbIbe
1) Looking at the example you'd see that initially the textbox and the dropdownlist are bound to the correct initial value that is "11" for the value property and "T11" for the text property.
2) After selecting an item on the dropdownlist the textbox value became "[object Object]" instead of having the text that is corresponding to the Value property of the selected dataitem.
tried with firefox 58.0.1, chrome 64.0.3282.140 and Microsoft Edge 41.16299.15.0
Any Idea what could be wrong with my case?
I have this table with a Row Filter. There is an "X" both in and after the filter input element used to clear content.
The following code can be used to remove both Xs, or you can comment out a line to remove one X.
dataBound: function (e) {
this.element.find('.k-filtercell .k-autocomplete .k-clear-value').remove(); // remove X from input box
this.element.find('.k-button-icon').remove(); // remove X button after input box
},
The problem: even if you remove the X button after the input field, the space is not recovered. My table has a lot of fields and I do not have space for a redundant and completely unnecessary button.
The question: how can I remove the X button and get the space back? Even if I remove the button (code above), the input fields do not resize to fit the space available.
I am having trouble with a right-click context menu that contains multiple sub-menus.
When I hover with the mouse over the different submenus, the first sub-menu to open is opening fine, but when I move the mouse(without selecting anything from the first opened submenu) to the next submeny, this will cause the whole context-menu to close.
I have uploaded a video to demonstrate the problem:
https://www.youtube.com/watch?v=0TztKdJhVlI
Is this a known bug in the Kendo menu widget, or is this my fault?
Hello,
We use Kendo controls with AngularJS. If an user performs some search and then choose one of found items using keyboard, the Angular's model is not updated.
Steps to reproduce:
- open https://dojo.telerik.com/eledi
- select drop down and type 'item' in the input
- select one of found items using arrows buttons and press Enter
Result:
When Enter is pressed the 'close' event fired only.
'change' event is not fired and the model won't be updated.
See video https://www.screencast.com/t/ecce6h8EW for details.
As a temporary fix we trigger change event in 'close' handler:
close: function (e) {
this.trigger('change');
},
But this is not a good solution because each developer must remember about this issue.
Could you please provide more elegant workaround?
Thanks in advance!
I have a kendo grid and it has 18 columns including 3 locked. I have a sidebar in my application and wants to resize the grid when the side bar open/close. Grid not resizing when the sidebar open/close and cause mess. I guess it's happening because of fixed column width and locked columns. Please help to solve this.
As the title, I initialize kendo UI grid from exiting html table. There is one date column inside the table, and I would like to format it to "yyyy-MMM-dd" format. And I would like to add header filter to do it as well.
The code can be found here: http://dojo.telerik.com/IVimEc
Here is my initialization of my kendo scheduler:
scheduler = $('#scheduler').kendoScheduler({
toolbar: [ 'pdf' ],
pdf: {
fileName: 'Current Schedule View.pdf',
proxyTarget: '_blank'
},
date: new Date(),
startTime: new Date(),
timezone: "America/Chicago",
editable: {
template: $("#editor_template").html(),
},
messages: {
pdf: 'To PDF'
},
eventTemplate: $('#event_template').html(),
views: [
"day",
{type: "week", selected: true},
"workWeek",
"month",
{type: "agenda", eventTemplate: $('#agendaEventTemplate').html()},
{type: "timeline", eventHeight: 50}
],
dataSource: dataSource,
save: function(e){
console.log('Saving');
console.log(e);
},
cancel: function(e){
console.log('Cancelling');
console.log(e);
console.log(e.event.ownerId[0].value);
console.log(attendeeSaver);
e.event.ownerId = e.event.ownerId[0].value;
e.event.attendees = attendeeSaver;
console.log(e);
},
edit: function(e){
console.log(e);
attendeeSaver = e.event.attendees;
//if(e.event.ownerId == '{!currentUser}' || e.event.ownerId == 'none'){
console.log(e);
console.log(e.event.attendees);
console.log(e.event.ownerId);
console.log($('#WhoIdSearchInput'));
var whatIdAutoComp = $('#WhatIdInput').kendoAutoComplete({
minLength: 3,
filter: 'contains',
dataTextField: 'name',
noDataTemplate: $('#noDataTemplate').html(),
filtering: whatId_filter,
dataBound: whatId_dataBound,
change: whatId_change,
open: whatId_open,
select: whatId_selection
}).data('kendoAutoComplete');
console.log($('#WhatIdInput'));
var whoIdAutoComp = $('#WhoIdInput').kendoAutoComplete({
minLength: 3,
filter: 'contains',
dataTextField: 'name',
noDataTemplate: $('#noDataTemplate').html(),
filtering: whoId_filter,
dataBound: whatId_dataBound,
open: whoId_open,
change: whoId_change,
select: whoId_selection
}).data('kendoAutoComplete');
console.log('Test spot');
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getOrgUsers}', function(result, event){
result = result.replace(/\"\;/g, '"');
var resultArray = JSON.parse(result);
var userList = [];
for(var i = 0; i < resultArray.length; i++){
var gradientColor = ColorLuminance(resultArray[i].color, -0.5);
var personalColor = 'linear-gradient(' + resultArray[i].color + ', ' + gradientColor + ')';
var person = { name: resultArray[i].name, value: resultArray[i].ownerId, tagColor: personalColor, color: resultArray[i].color };
userList.push(person);
}
console.log('test spot');
$('#OwnerIdInput').kendoMultiSelect({
maxSelectedItems: 1,
placeholder: 'Select Event Owner',
tagTemplate: '<span class="selected-value"</span><span style="color: white;">#:data.name#</span>',
template: $('#dropDownTemplate').html(),
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: userList
},
change: function(e) {
//console.log(e);
console.log('Inside owner box');
var selectedTags = $('.k-multiselect li.k-button');
for(var i = 0; i < selectedTags.length; i++){
var tag = $(selectedTags[i]);
var item = $(tag.find('span.selected-value'));
for(var k = 0; k < userList.length; k++){
if(item[0].textContent === userList[k].name){
tag.css({'background': userList[k].tagColor, 'width': '100px', 'height': '30px', 'font-size': '15px', 'overflow':'hidden', 'text-overflow':'ellipsis', 'border-radius':'5px'});
}
}
}
},
});
console.log('done making owner box');
console.log($('#OwnerIdInput').data('kendoMultiSelect'));
$('#OwnerIdInput').data('kendoMultiSelect').trigger('change');
console.log('triggered owner box');
//Populate edit/create popup fields with passed parameters
/*for(var i = 0; i < parsedParamData.length; i++){
console.log($('#'+parsedParamData[i].fieldName+'Input')[0]);
if(parsedParamData[i].fieldName == 'WhatId' || parsedParamData[i].fieldName == 'WhoId'){
$('#'parsedParamData[i].fieldName+'Input')[0].prop('value', ''+parsedParamData[i].recordName);
//$('#'+parsedParamData[i].fieldName+'Input').data('kendoAutoComplete').value(parsedParamData[i].recordName);
}
else if(parsedParamData[i].fieldName == 'OwnerId'){
$('#'+parsedParamData[i].fieldName+'Input').prop('value', ''+parsedParamData[i].recordId);
//$('#'+parsedParamData[i].fieldName+'Input').data('kendoMultiSelect').value(parsedParamData[i].recordId);
}
}*/
});
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getAllOrgResources}', function(result, event){
result = result.replace(/\"\;/g, '"');
var resultArray = JSON.parse(result);
console.log(resultArray);
var userList = [];
for(var i = 0; i < resultArray.length; i++){
var gradientColor = ColorLuminance(resultArray[i].color, -0.5);
var personalColor = 'linear-gradient(' + resultArray[i].color + ', ' + gradientColor + ')';
var person = { name: resultArray[i].name, value: resultArray[i].ownerId, tagColor: personalColor, color: resultArray[i].color, resourceType: resultArray[i].ownerType, email: resultArray[i].email };
userList.push(person);
}
$('#inviteInput').kendoMultiSelect({
enable: false,
maxSelectedItems: 90,
placeholder: 'Select People/Resources/Groups to Invite',
tagTemplate: '<span class="selected-value"</span><span style="color: white;">#:data.name#</span>',
template: $('#dropDownTemplate').html(),
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: userList,
group: {field: 'resourceType'}
},
change: function(e) {
//console.log(e);
var selectedTags = $('.k-multiselect li.k-button');
for(var i = 0; i < selectedTags.length; i++){
var tag = $(selectedTags[i]);
var item = $(tag.find('span.selected-value'));
for(var k = 0; k < userList.length; k++){
if(item[0].textContent === userList[k].name){
tag.css({'background': userList[k].tagColor, 'width': '100px', 'height': '30px', 'font-size': '15px', 'overflow':'hidden', 'text-overflow':'ellipsis', 'border-radius':'5px'});
}
}
}
}
});
$('#inviteInput').data('kendoMultiSelect').trigger('change');
});
/*Can alter initial time interval here*/
var startTime = $('#startTimeInput').data('kendoDateTimePicker');
$('#endTimeInput').data('kendoDateTimePicker').value(new Date(startTime.value().getTime() + 30*60000));
$('#groupCheck').change(function(){
var invites = $('#inviteInput').data('kendoMultiSelect');
if(this.checked){
invites.enable(true);
} else{
invites.enable(false);
}
});
},
resources: resources
}).data('kendoScheduler');
My problem is the line: $('#OwnerIdInput').data('kendoMultiSelect').trigger('change');
When I click an already existing event to pop open the edit/create popup menu, If I click 'save', all is fine. I can continuously open and close the edit menu as long as I click 'save.' If, however, I click 'cancel' after opening the edit menu once, if I click it again, I will get the following error
Uncaught TypeError: i.wrap is not a function at kendo.all.js:4554
And it happens at the OwnerIdInput change trigger mentioned above. Triggering change has not issues outside of pressing the 'cancel' button and I am just not sure what is causing this behavior or how to fix it.