Questions on Kendo UI for jQuery Forum

11 answers

464 views

datepicker doesn't show initially value (angular)

I'm using this example http://demos.telerik.com/kendo-ui/datepicker/angular. If I try to set initial values for dateString and/or dateObject datepicker doesn't show this initial value.

Date/Time Pickers

answered on 04 Dec 2017

5 answers

202 views

MVVM support.

Hi guys,

I'm new to kendo mvvm and I'm trying to bind the layers of the map widget to an array that is located on my viewmodel.
I've tried a lot of things without success and I would really appreciate if you can provide me a sample for that.

My goal is to have an mvvm map with some layers (shapes) that are coming from a datasource, in fact almost the same as your example (http://demos.kendoui.com/dataviz/map/geojson.html) but in a full mvvm way.

Thanks in advance,

T

Map

answered on 04 Dec 2017

2 answers

596 views

infinite datasource read loop

Hi we have a problem with a combobox

We need this combobox to have a lot of record (around 1000-2000) and to paginate results for performance. We also need it to have virtualization cause sometimes we have to use the value method to programmatically select an element that may not be in the current pagination.

We then added a button at the left side. It opens a dialog that permits to add an element to the database, reread the combobox datasource and select the new element.

// on confirm, call our add element rest api

// on call completed, datasource.read

// on read promise completed, combobox.value( id of the new element )

// combobox.trigger('change')

the value( id ) method starts rereading the datasource non stop, doing infinite ajax get calls to the server. We are having troubles understanding what may cause this.

in the console we read the warning i attached

this is most of the code, tell me if you need other parts: https://jsfiddle.net/mhqw922q/?utm_source=website&utm_medium=embed&utm_campaign=mhqw922q

ComboBox

answered on 04 Dec 2017

1 answer

70 views

Problème with filter

Hi

Here's my multiselect definition. Is it possible to filter on 2 values. I have category with name and keyword properties, actually i display Name and filtering on name work well but i also want multi select to search on keyword also. Is it possible ?

$("#searchFilter").kendoMultiSelect({
placeholder: "Catégories de biens et services...",
filter: "contains",
dataTextField: "Name",
dataValueField: "ServiceID",
height: 400,
dataSource: {
data: @(New HtmlString(Json.Encode(Model.ServicesFilter))),
group: { field: "ParentBreadcrumb" },
},
change: function(){
PMEL_SupplierSearch.triggerSearch();
}
});

MultiSelect

answered on 04 Dec 2017

2 answers

685 views

Custom json in DataSource schema

Hello.

I have a defined Data Source (for grid) like:

transport: {
read: {
url: ....

And returned json is like:
{
data: [...],
total: xyz,
customdata: [... data not explicit for grid ...]
}

Using schema, I define data and total for grid. But is it possible to process custom data? Get to them? It's not the data I need explicitly to bind the grid. But I can not call another ajax call.

Well thank you.

Data Source

answered on 04 Dec 2017

2 answers

644 views

open editor using inline template button

Hi,
I modified example to show you a possible solution for my grid.
I need a button in the "text" non-editable field. This button will open a window with editor.

I need to display this button in the row always even user click on command "Edit".

So I did it.

Below are my questions:

1). I don't know how to find e reference to the row that opened this window inside close event to get a dataItem and update a model.
2). I am not sure if it is possible to change a text of the column after window close.
3). I don't know why style of my "show" button changed after user click a Cancel button

Thank you for you comments

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

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

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<div id="window">
<textarea id="editor" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: text"></textarea>
</div>
<script>
var dataItem;

$("#grid").kendoGrid({
editable: "inline",
resizable: true,

columns: [{
field: "name", width: "200px"
},
{
field: "text",
template: "<div class='contentDivs' style='white-space: nowrap; height: 25px; overflow: hidden; max-width:65%; float: left;'>#= text #</div><button class='editButtons' style='float:right'>show</button>",
width: "300px"
},
{
field: "age", width: "100px"
},
{ command: [{ name: "edit", text: { edit: "edit", update: "update", cancel: "cancel" } }]}
],
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: {type: "number", editable:false},
name: { type: "string" },
text: { type: "string", editable: false},
age: { type: "number" }
}
}
},
data: [{
id: 1,
name: "Jane Doe",
text: "Lorem ipsum dolor lis in magna. In feugiat non ipsum a laoreet. Nulla facilisi.",
age: 30
},
{
id: 2,
name: "John Doe",
text: "Cras vitae nisl quis nulla accumsan porttitor a eget quam. Vestibulum tempor eu felis ac pulvinar. Morbi viverra odio sit ame. Pellentesque felis est, condimentum et pellentesque vel, luctus eget libero. Morbi non placerat diam, quis tincidunt ante.",
age: 33
}
]
},
dataBound: onDataBound

});

function onDataBound(e) {
$(".contentDivs").children().css("display", "table-cell");
$(".editButtons").kendoButton({
click: function(e) {
var grid = $("#grid").data("kendoGrid");
var editor = $("#editor").data("kendoEditor");
var window = $("#window").data("kendoWindow");
var row = e.sender.element.closest("tr");
var dataItem = grid.dataItem(row);

kendo.bind(editor.element, dataItem);
window.open().center();
}
});
};

$("#window").kendoWindow({
width: "600px",
visible: false,
modal: true,
close: function(e) {
e.sender.element.focus();
var grid = $("#grid").data("kendoGrid");
var editor = $("#editor").data("kendoEditor");
// how to get row?
var row;
var dataItem = grid.dataItem(row);

// update Model
//dataItem.text = editor.value();
console.log(dataItem);
// how to change the text in the field?

},
actions: [
"Maximize",
"Close"
],
});
$("#editor").kendoEditor();
</script>
</body>
</html>

Grid

answered on 02 Dec 2017

4 answers

1.4K+ views

kendo ui autocomplete - set data on load

I have a textbox for which I added kendoAutoComplete function. This is working fine. However, I wanted to set some value to this textbox upon the page load (I get the value from DB). With KendoAutoComplete, I am unable to set this.
I can either implement KendoAutoComplete or set datsource. Both of them work fine separately. Where as, if I include the code related to both - it doesnt work. Below is the code. Can you please throw me some inputs if you have come across this issue?

myController.js

$("#txtPartNumbers").kendoAutoComplete({
dataSource: {
serverFiltering: true,
enforceMinLength: true,
transport: {
read: {
url: ApiBaseUrl.val + 'inventoryLocation/getParts',
type: "get",
dataType: "json",
data: function () {
return { partNumber: $scope.autoCompleteText }
}
}
},
},
change: function(e) {
$scope.autoCompleteText = this.value();
},
filter: "startswith",
//placeholder: "Select Inventory Parts..",
minLength: 3,
separator: ", "
});

cshtml:

I am setting "filterByPartNumbers" value in my controller

....

var data = getDataFromDB();

$scope.filterByPartNumbers = data.partNumbers;

...

Appreciate you help.

Thank you!!

AutoComplete

answered on 01 Dec 2017

5 answers

221 views

Get instance of kendo scheduler integrated by angularjs

Hi,

I have checked this document: https://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references
to get the instance of kendo scheduler and enable single click to add/edit event on my scheduler https://dojo.telerik.com/@alexdd/UYuke

But it doesn't work as the document, could you correct me to get it? Thanks

Scheduler

answered on 01 Dec 2017

5 answers

136 views

Editor - Image Selection Box Not Aligned with Scroll Position

Guys, I have following problem regrading image selection in Kendo wysiwyg editor:

When Scrolling through the WYSIWYG editor the selection for images does not follow the scroll for the editor.
Steps to Reproduce
1) Open WYSIWYG editor
2) Add images and exta lines allowing for scrolling
3) Scroll down editor a little
4) Select image

As results selection box for re-sizing is not consistent with image

I have most recent version of Kendo: 2017.3.1018

Expected result for me - selecting image always lines up resizing box with image

How I can solve this issue and get expected result? If you need screenshots or video capture to show this issue please let me know!

Thanks for your time!

Editor

answered on 01 Dec 2017

2 answers

486 views

datasource with filter no item selected after databound

I have a dropdownlist with remote data binding. I set up a filter on the datasource before the data is fully loaded. After data is bound to the datasource, I see my items in the list with first item selected. After upgrading kendo from 2015.1.408 to a 2017 version no item is selected after data is bound to the datastource. Is there a way to preserve the old behavior?

Example here: http://dojo.telerik.com/ItiLU Just change library to any 2017 version and the behavior changes too.

Note that I don't want to simply select the first item from the list, but my application uses Kendo MVC to choose value based on a field from the model of the view.

DropDownList

answered on 01 Dec 2017