Questions on Kendo UI for jQuery Forum

4 answers

374 views

Select first tab having external datasource

Hi

I have issue selecting first tab, I read in https://www.telerik.com/forums/can-t-programmatically-select-a-tab#8GpHjbXuJkyTYw-siBriCw that the issue can be because of the external dataSource. I use the example from http://demos.kendoui.com/web/tabstrip/images.html to create my json. here is part of my code. Any idea?

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/GetTabs/",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
var result = {
val1: $("#val1").val(),
val2: $("#val2").val(),
}
return kendo.stringify(result);
}
},
});

$("#tabstrip").kendoTabStrip({
dataTextField: "resId",
dataContentUrlField: "resName",
dataSource: dataSource

            });

function SelecTab() {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
}

TabStrip

answered on 22 Mar 2018

3 answers

295 views

Grid column sizing issues since Chrome 65 release

Kendo grids in our application are not sizing optimally with Chrome 65. Our grid columns still size efficiently and as expected in Chrome 64, and the latest of Firefox, IE 11, and Edge.

Attachment 1 shows one of our grids, rendered in Chrome 65. Here you can see that the columns which would normally be wider, to accommodate wider text, are too thin, and columns which do not have a lot of text are too wide.

Attachment 2 shows the same grid as rendered in Firefox. (Also renders this way in Chrome 64, IE 11 and Edge)

Attachment 3 shows that a forced redraw of the grid columns, by executing the following code, corrects the column sizing issues. Perhaps Chrome has become faster, and exposed a timing issue around column width calculations after options.success is called following a transport.read?

                                                //The following is executed after the return of data from an external query made in
                                                //kendo.data.DataSource.transport.read
                                                //Attachment 1 is from just prior to this code's execution.
                                                //Attachment 2 is from after showColumn(3) is execcuted
                                                window.setTimeout(angular.bind(this,
                                                    () => {
                                                        $("#ehGrid").data("kendoGrid").hideColumn(3);
                                                        window.setTimeout(angular.bind(this,
                                                                () => {
                                                                    $("#ehGrid").data("kendoGrid").showColumn(3);
                                                                }),
                                                            100);
                                                        }),
                                                    300);

This issue is occurring in multiple grids in our app, so having to put this workaround into all our transport.read definitions is not a great solution for us. Do you have any other suggestions or a fix?

Kendo 2017.1.223, Angular v1.6.5, Typescript

Grid

answered on 22 Mar 2018

1 answer

193 views

jQuery 3.3.1 problem

Hello,

in this example http://dojo.telerik.com/aJUKiZuB I reproduced a problem with the dropdown. When you open it and directly close it (before its opened) by clicking i.e. below, there is a faulty animation, where the dropdown animation container jumps to a wrong position. With jQuery 1 its working fine. Same problem seems to be on multiselect (maybe also on other widgets?).

Regards

Jan

DropDownList

answered on 22 Mar 2018

1 answer

451 views

expandTo() not working after collapse()

I would like to collapse all of the nodes in the treeview and then expand the treeview to a specific node. I have found that when i call the collapse function like treeview.collapse('.k-item') and then try to call treeview.expandTo(dataItem) the treeview closes and does not expand to the node. In order to get it to work I have to delay the expandTo by using setTimout. This is not ideal. Any help would be appreciated.

Dojo example: http://dojo.telerik.com/ATiXUbuC

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>

<div id="example">

<div class="demo-section k-content">
<h4>Inline data (default settings)</h4>
<div id="treeview-left"></div>
<button onclick='expandTo()'>Expand To</button>
<span><--works as expected</span><br/>
<button onclick='find()'>Collapse then expand to node</button>
<span><-- sometimes works on first time, but stops working</span><br/>
<button onclick='findWithDelay()'>Collapse then expand to node (with delay)</button>
<span><-- works everytime

</div>

<script>
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});

$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});


//expandTo on its own works as expected
function expandTo(){
var treeView = $('#treeview-left').data('kendoTreeView');
var node = treeView.findByText('Sofas');
dataItem = treeView.dataItem(node);
treeView.expandTo(dataItem);
}

//I want to close all the nodes and then expand the treeview to a specific node
//but calling expandTo after calling collapse doesn't work
function find(){
var treeView = $('#treeview-left').data('kendoTreeView');
treeView.collapse('.k-item');
var node = treeView.findByText('Sofas');
dataItem = treeView.dataItem(node);
treeView.expandTo(dataItem);
}

//have to delay the expandTo call to make it work
function findWithDelay(){
var treeView = $('#treeview-left').data('kendoTreeView');
treeView.collapse('.k-item');
var node = treeView.findByText('Sofas');
dataItem = treeView.dataItem(node);

//delay the expandTo for half a second
setTimeout(function(){treeView.expandTo(dataItem)}, 500);
}
</script>

<style>
#example {
text-align: center;
}

.demo-section {
display: inline-block;
vertical-align: top;
text-align: left;
margin: 0 2em;
}
</style>
</div>
<body>
</body>
</html>

TreeView

answered on 21 Mar 2018

3 answers

142 views

Map markers no showing in Bing Map

Hi

i'm new using kendo and i'm trying to use the markers in the map and I juts got the example from https://demos.telerik.com/kendo-ui/map/remote-markers (copy) and put it in my project and the markers don't show in the map. Using same datasource https://demos.telerik.com/kendo-ui/content/dataviz/map/store-locations.json What am I missing?

Map

answered on 21 Mar 2018

3 answers

253 views

Issue with ComboBox MVVM

Hi all!

I've an unexpected behavior with ComboBox in case MVVM usage

The issue exists for the case when I have preselected data.SelectedFolder value - see below

shtml code (template for 'Edit' popup window, I've deleted extra text fields from the template):

<script id="editMessageDetailsTemplate" type="text/x-kendo-template">

<form id="editMessageDetailsForm">

<div class="wrapperClass">

<div class="col-md-4" style="padding-top:15px;">

<label class="control-label" for="FolderID">@Global.Folder</label>

</div>

<div class="col-md-11">

<select id="FolderID" name="FolderID"

data-val-required="@Global.FieldFolderMustBeSet"

data-val-number="@Global.FolderDoesNotExist"

data-bind="value: data.SelectedFolder"

placeholder="@Global.PleaseSelect"

data-val="true"

data-value-update="keyup"></select>

<span class="k-invalid-msg" data-for="FolderID" style="width: 100%;"></span>

</div>

<div class="dialogButtons">

<button data-bind="click: onSave, disabled: data.isNotValid"

id="buttonOk" type="submit" data-role="button" class="k-button k-button-icontext" role="button" aria-disabled="false" tabindex="0">

<span class="k-icon k-i-save"></span>

@Global.Save

</button>

<button data-bind="click: onCancel" id="buttonCancel" type="button" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">@Global.Cancel</button>

</div>

</form>

</script>

js code - popup dialog

var $editMessageDetailsDiv = $("<div>", { "id": self.uid });

$("body").append($editMessageDetailsDiv);

var dialog = $("#" + self.uid).kendoWindow(

{

"close": destroyDialog,

"modal": true,

"iframe": true,

"draggable": true,

"scrollable": true,

"pinned": false,

"title": "Edit",

"appendTo": "body",

"resizable": true,

"width": 450,

"height": 350,

"minWidth": 450,

"minHeight": 350,

"actions": ["Maximize", "Close"],

"content": {

template: $("#" + self.contentTemplate).html()

}

}).data("kendoWindow");

dialog.center();

dialog.open();

var formViewModel = new EditMessageDetailsFormViewModel({

FolderID: 123, // !!! existing folder ID from data source !!!

submitCallback: function (model) {

//

},

submitUpdate: function (response) {

//

},

submitError: function (model) {

//

}

});

kendo.bind($editMessageDetailsDiv, formViewModel);

js code - model

function EditMessageDetailsFormViewModel(options) {

var self = this;

self.data = kendo.observable({

SelectedFolder: options.FolderID

});

self.onCancel = function (event) {

options.closeCallback();

kendo.destroy();

};

self.init = function () {

self._initKendo();

var allFoldersPromise = self._getAllFoldersPromise();

allFoldersPromise.done(function (folders) {

self.FolderID.data(folders);

});

};

self._initKendo = function () {

kendo.inputTrimEnabled();

var validatable = self._getValidator();

validatable.validate();

validatable.hideMessages();

$("#FolderID").kendoComboBox({

dataTextField: "FolderName",

dataValueField: "FolderID",

filter: "Contains"

});

self.FolderID = self._getComboBox('FolderID').dataSource;

};

self.onSave = function (event) {

event.preventDefault();

if (self.validate()) {

var params = {

FolderID: self.data.get('SelectedFolder'),

};

// save func

}

};

self.validate = function () {

return self._getValidator().validate();

}

self.resetValidator = function () {

var validator = self._getValidator();

validator.hideMessages();

}

self._getValidator = function () {

return $("#editMessageDetailsForm").kendoValidator().data("kendoValidator");

}

self._getComboBox = function (id) {

return $("#" + id).data("kendoComboBox");

}

self._getAllFoldersPromise = function () {

var promise = $.get(UrlUtils.URL("Messages", "GetFolders")); // back end func to get folders

promise.fail(function () {

showError("err!");

});

return promise;

}

self.init();

}

When popup window opened -> Folder preselected -> this is expected, ok

But a user can't clear this selection using embedded 'clear' cross into ComboBox area.

Any thoughts or suggestions would be useful.

Thanks.

ComboBox

answered on 21 Mar 2018

10 answers

1.0K+ views

Grid freezes during scrolling (works extremely slow)

Grid scrolling works extremely slow in case of using it with virtualization and sorting.

Link to reproduce an issue: https://dojo.telerik.com/@WA_PMak/IzevIzaV

Steps to reproduce:

Follow the link https://dojo.telerik.com/@WA_PMak/IzevIzaV
Push the Run button
Sort by any column (for example by First Name)
Scroll grid till it loaded next virtual page

Actual result: grid freezes during scrolling.
Expected result: grid scrolling work fast as it do if it has unsorted data.

Grid

answered on 21 Mar 2018

2 answers

207 views

How to turn off group resource in Month view

Hi

In day view, I got group resource. It working fine.

But I want to turn off group resource in Month view.

I didn't find this kind of API in the schedule.

Does someone know how to do that?

Scheduler

answered on 21 Mar 2018

1 answer

97 views

Scheduler daily rule

Is it possible to use the value of recurrenceRule FREQ=DAILY with BYDAY, e.g. "FREQ=DAILY;COUNT=4;INTERVAL=3;BYDAY=MO,TU,WE,TH,FR"?
I reproduced the situation when have an incorrect result http://dojo.telerik.com/oqiJAKoR and received dates «16, 19, 22, 28» instead of «16, 21, 26, 29».

Scheduler

answered on 20 Mar 2018

4 answers

356 views

weird paging footer

Hi,

Within re-implementing app to Kendo we're using kendo grid where all used grids unfortunately have an invalid paging footer. Buttons around page numbers (like Go to the next page, etc.) are disabled and next to it are rendered again as properly working.

Do you have any ideas or similar cases why it is happening?

Thanks much,
Martin

Grid

answered on 20 Mar 2018