Questions on Kendo UI for jQuery Forum

2 answers

668 views

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

87 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

720 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

673 views

[Solved] 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.5K+ 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

249 views

[Solved] 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

213 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

517 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

5 answers

248 views

Editor - No Visual Indicator that Text is Still highlighted when Formatting

When Highlighting text and choosing some formatting options the highlight disappears completely, though the text is still chosen.

Steps to Reproduce
1) Add some text to WYSIWYG
2) Highlight text
3) Choose dropdown options for - Font or Size

As actual result text is no longer visually highlighted (please see attached video as zip file - that's actually tar, I just renamed it as zip and split on two parts)

But in demo on the your site Text remains highlighted (http://demos.telerik.com/kendo-ui/editor/index). Any ideas how to fix it?

Editor

answered on 01 Dec 2017

1 answer

335 views

jQuery Range Slider in Angular Project

I'm using the jQuery implementation of the range slider in an angular project (because I don't see a range slider component for angular yet, only a single value slider). I have this working by including the scripts locally, however, I'd like to pull them in via npm upon the bundling of the app via webpack.

Here are the entries from my angular-cli.json. Webpack compiles successfully, however, scripts.bundle.js complains that the module related to kendo.all.js is not defined.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/@progress/kendo-theme-default/dist/all.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/sortablejs/Sortable.min.js",
        "../node_modules/@progress/kendo-ui/js/kendo.all.js"
      ],

The result is that kendo.all.js looks the same as its entry in scripts.bundle.js.

I'm aware that I can include less than ALL to use the range slider, but I'm just trying to get this working first.

Slider