Telerik Forums
Kendo UI for jQuery Forum
10 answers
1.4K+ views

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?

 

 

 

 

Dimitar
Telerik team
 answered on 20 Feb 2018
2 answers
329 views

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.

Gerry
Top achievements
Rank 1
Veteran
 answered on 19 Feb 2018
3 answers
1.5K+ views
I have a database table that has a primary key made up of multiple columns. Is there a way for a grid to support this? I am using a WCF Data Service for the data. So ideally I would like to take advantage of the odata support. I can create the URL myself for the operations, microsoft does support multiple keys when doing a put or delete. Or is there a way to use the grid without a model? I was having issues with adding/editing data when I didn't use a model. If I don't have an id field on the model the grid seems to get confused about which models are new and tries creating all of them again.

Thanks,
Chris
Steve
Top achievements
Rank 1
 answered on 19 Feb 2018
4 answers
510 views

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?

Ivan Danchev
Telerik team
 answered on 19 Feb 2018
5 answers
2.6K+ views
Say I have the following:

var viewModel = kendo.observable({ Property1: "value" });

kendo.bind($("#element"), viewModel);

Then later on I want to get access to the view model but only have access to the element.
Knockout has something like:

var viewModel = ko.dataFor(element);

Is there a way I can get access to the view model just from the element?

Thanks
Chris
Dimitar
Telerik team
 answered on 19 Feb 2018
1 answer
311 views
Is it supported to have the checkbox filtering work with the data that displayed in a client template rather than the data bound in the column?
Stefan
Telerik team
 answered on 19 Feb 2018
1 answer
208 views

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!

Dimitar
Telerik team
 answered on 19 Feb 2018
3 answers
1.4K+ views

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.

Stefan
Telerik team
 answered on 19 Feb 2018
3 answers
351 views

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

Georgi
Telerik team
 answered on 19 Feb 2018
5 answers
1.0K+ views

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(/\&quot\;/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(/\&quot\;/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.

Tyler
Top achievements
Rank 1
 answered on 16 Feb 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?