Questions on Kendo UI for jQuery Forum

1 answer

359 views

We have charts that are databound and can have variable numbers of categories. A second axis can be added, but we would like it to also display on the far right of the chart. This means that setting the axisCrossingValue = [0, 10] (or something to that effect) might not work in every case. Is there a way to set the second axis to always be at the right without just setting the crossing value to some very large number?

Charts

answered on 15 Jun 2018

1 answer

105 views

column sorting is not working

This is using kendo grid in react

https://codesandbox.io/s/6lyv8y3q7r

Spreadsheet

answered on 15 Jun 2018

5 answers

945 views

Localization not working

Hi,

I modified https://demos.telerik.com/kendo-ui/grid/remote-data-binding for culture("de-DE"):

From https://docs.telerik.com/kendo-ui/framework/globalization/overview I appended:

<script src="https://kendo.cdn.telerik.com/2018.2.516/js/cultures/kendo.culture.de-DE.min.js"></script>

<script type="text/javascript">

kendo.culture("de-DE");

</script>

see http://dojo.telerik.com/iToGuVUH

But it has no effect. The dateformat is US (month first) and the filter dialog is english.

Where is the error?

Peter

Grid

answered on 15 Jun 2018

2 answers

723 views

transport.update: only add changed fields in the request body

Hi,

I'd like to perform an odata PATCH operation where only the dirty fields are sent in the request body.The code below is my latest attempt, but the grid continues to send the full set of fields. If I omit the data/type sections of the update option, then I get a PUT request with the full set of fields.

My other attempt involved omitting the update altogether and overriding the saveChanges event to make the request myself, but then I run into issues with dirty fields staying dirty. I know you can mess around with the css to remove the flags, but the datasource fields stay dirty and end up getting updated again the next time the saveChanges event is triggered.

Is there a way to let the grid know that the saveChanges event was successful so that it handles the dirty flags on its own? Another solution?

Thanks.

transport: {

read: {

url: serviceURL + entity.ClassName

},

update: {

url: function (data) {

var key = "(" + data.ID + "," + data.NetworkID + "," + data.From + "," + data.To + ")";

return serviceURL + entity.ClassName + key;

},

type: "PATCH",

data: function (data) {

var row = $("#elementGrid").data("kendoGrid").dataSource.get(data.ID);

var updateData = {};

$.each(row.dirtyFields, function (key, value) {

updateData[key] = row[key];

});

return updateData;

}

Grid

answered on 15 Jun 2018

1 answer

105 views

[Solved] Implement custom editor without losing movable and resizing functionality

In our scheduler we have developed custom event editor which is opened in a new page and not using the default editor. However, if we disable the default editor using

$scope.schedulerOptions = {

editable: false

}

but now we are unable to move or resize the event date range on the scheduler.
Is there a way to make it work without showing the default editor and making the events movable ?
How can we fix this issue?

editable property set to false example

Scheduler

answered on 15 Jun 2018

1 answer

889 views

Error when trying to filter data on grid

I'm getting an error when trying to search for data on my grid.. The error I am receiving is this: "Uncaught TypeError: (d.ComponentId || "").toLowerCase is not a function". Thank you in advance for your help.

my grid definition looks like this:

$("#grid").kendoGrid({

toolbar: [

{ template: kendo.template($("#template").html())}

],

dataSource: {

data: filteredData

},

schema: {

model: {

fields: {

ComponentId: { type: "string", filterable:true },

Description: { type: "string", filterable:true }

}

},

selectable: true,

allowCopy: true,

height: 430,

sortable: true,

refresh: true,

filterable: {

mode: "row"

},

columns: [

{ field: "ComponentId",title: "Component Id", template: "#=test(data)#", filterable:true},

{ field: "Description",title: "Description", template: "#=description(data)#", filterable:true }

],

}).data("kendoGrid");

And my code to filter looks like this..

$("#btnSearch").on("click", function () {

alert("clicked");

var filter = { logic: "or", filters: [] };

$searchValue = $('#searchBox').val();

if ($searchValue) {

$.each($("#grid").data("kendoGrid").columns, function( key, column ) {

if(column.filterable) {

filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});

}

});

}

$("#grid").data("kendoGrid").dataSource.query({ filter: filter });

});

Also, this is the code for my toolbar template:

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

<label class="search-label" for="searchBox">Search Grid:</label>

<input type="search" id="searchBox" class="k-textbox" style="width: 250px"/>

<input type="button" id="btnSearch" class="k-button" value="Search"/>

<input type="button" id="btnReset" class="k-button" value="Reset"/>

</script>

Grid

answered on 15 Jun 2018

3 answers

129 views

[Solved] Path linking markers being ignored by Map layers

https://dojo.telerik.com/@alexy99/EKomOrIh

I'm trying to follow below document to link markers with Paths, but every layer is ignoring my paths. No error messages.

https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/link-marker-to-location

Thanks,

Alex

Map

answered on 14 Jun 2018

2 answers

425 views

in grid collapse the row when expand another row

can u please send me a code to colapse the row dynamically when i expand the other row in grid

Grid

answered on 14 Jun 2018

4 answers

283 views

Loading a component directly from node_modules folder doesn't work with the correct version of jquery

I am using npm to generate the folders inside my project. My goal is to include Kendo UI for jquery components and lunch the Telerik Grid. Bellow are my steps

Running npm inside the root of my project(.csproj)
install --save @progress/kendo-ui

A folder node_modules is generated by default with the npm command, a folder named @progress which I assume has all Telerik dependencies is created inside, as well as a jquery folder. Usually, if you do the same steps with nuget instead of this folder, you get on your package folder a jquery reference that supposed to be used by Telerik components, but all inside of the kendo folder. My questions are the following:

1- If I am using the Visual Studio for an Asp.net Core project, which should be the steps to include correctly the and styles used by .(In case of nuget, do I need to go to my nuget path C:\Users\MyUSer\.nuget\packages\kendouiprofessional\2018.2.530\content\Scripts\kendo\2018.2.530 and take the dependencies from there directly?) How can I run a tool like that installs on the same project all my -dependencies? If npm is the answer, then

2-the jquery folder generated by default has this version v3.3.1, is that the same version that grid component supposed to use, or any version of jquery should be fine for the grid? On the nuget package the version kendo. uses is v1.12.4

Thanks in advance