Questions on Kendo UI for jQuery Forum

1 answer

233 views

Where can I find the minify version of Kendo UI for jQuery?

In the download portal, I can only find the kendoui.for.jquery.2021.2.616.commercial-source is fully version.

But the interesting fact is the trial version contains minify version, but I do not sure if that fully matches the commercial version.

General Discussions

answered on 01 Jul 2021

1 answer

172 views

Datasource filter and templates columns in grid

Hi,

At the moment I am using filters to filter a grid like below:

var filter =
{
filters:
[

{ field: "Done", operator: "eq", value: value }
]
}

But the filtred status uses a client template like below:

<div style='text-align:center;'><span style='font-size: 1.4em;' class='fa-stack'># if(data.Done=='1') {# <i class='fa fa-square fa-stack-1x' style='color: white;'></i><i class='fa fa-check-square fa-stack-1x' style='color: \\#4d6992'></i> #} else if(data.Done=='0') {# <i class='fa fa-square' style='color: \\#bfccd3'></i> # } # </span></div>

What is the best way to filter on this column?

Roel

Grid

answered on 01 Jul 2021

0 answers

138 views

How can I reset the value when I use confirm function in dropdownlist using Kendo Vue ?

Hi, this is my problem.

I use the confirm function in kendo dropdownlist to make sure the user want to change the value or not.

When the user choose "cancel", that means he doesn't want to change the old value.

However the value in the dropdownlist UI shows the changed NEW value.

Here is the example: https://stackblitz.com/edit/juptyl?file=src/main.vue

Although the console shows "CANCEL", but the UI still shows the changed new value.

How can I fix this ? Thank you in advance!!!

DropDownList

asked on 30 Jun 2021

1 answer

167 views

Diagram limit shapes to 2

This code if pasted into a dojo works to build a diagram example.

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/index">

<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css" />

<script src="//kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="diagram"></div>
<script>
var data = [{
level: 0,
ordCode: "Org1",
orgName: "Org1 Level 0",
parentOrg: "",
items: [{
level: 1,
ordCode: "Org2A",
orgName: "Org2A Level 1",
parentOrg: "Org1"
},
{
level: 1,
ordCode: "Org2B",
orgName: "Org2B Level 1",
parentorg: "Org1"
},
{
level: 1,
ordCode: "Org2C",
orgName: "Org2C Level 1",
parentOrg: "Org1",
items:
[
{
level: 2,
ordCode: "Org3A",
orgName: "Org3A Level 2",
parentOrg: "Org2C"
},
{
level: 2,
ordCode: "Org3B",
orgName: "Org3B Level 2",
parentorg: "Org2C"
},
{
level: 2,
ordCode: "Org3C",
orgName: "Org3C Level 2",
parentOrg: "Org2C",
items:[]
},
{
level: 2,
ordCode: "Org3D",
orgName: "Org3D Level 2",
parentOrg: "Org2C"
},
]
},
{
level: 1,
ordCode: "Org2D",
orgName: "Org2D Level 1",
parentOrg: "Org1"
},
]
}];

function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;

g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: "green",
offset: 0,
opacity: 0.5
}, {
color: "green",
offset: 1,
opacity: 1
}]
}
}
}));

g.append(new dataviz.diagram.TextBlock({
text: dataItem.ordCode,
x: 85,
y: 20,
fill: "#fff"
}));

g.append(new dataviz.diagram.TextBlock({
text: dataItem.orgName,
x: 85,
y: 40,
fill: "#fff"
}));

return g;
}

function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});

var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}

$(document).ready(createDiagram);
</script>
</div>

</body>
</html>

I would like to limit the number of shapes to a number (i.e. 2) per level. See attached image for example.

Diagram

answered on 30 Jun 2021

0 answers

586 views

Custom Button to clear all Groups and Disable drag n drop

Hi ,

Attached is a version of JavaScript we use to bind dynamic data to kendo grid with dynamic columns and server side grouping enabled. (As seen in the logic, we use a group column to group and ungroup column to ungroup on a field.)

I am looking forward for implementing the below. Please provide a sample version of the modified js file and/or links to appropriate client side events that can support these in a logical order.

1. How to disable the default behavior of drag and drop on grouping , but still show the grouping grey bar above the grid?

I tried the below but it is not working(can't find the equivalent draggable event for group)

https://docs.telerik.com/kendo-ui/controls/interactivity/draganddrop/how-to/disable-dragging-runtime

2. Provide a “clear groups” button in the grouping bar and upon clicking that button, clear all groups. (Please note that the “clear groups“ button to be shown, only when at least one group is enabled.

3. Show the Grouping grey bar if you group by at least one column and hide the grey bar, if there are no columns to group by. Please confirm if the logic implemented in the attached file to hide and show the grouping grey bar is the correct approach.

Thanks,

Drag and Drop

Grid

asked on 30 Jun 2021

1 answer

339 views

Searching on a Grid removes the applied filter

I have a Grid with a filter, similar to this one:
https://demos.telerik.com/kendo-ui/filter/persist-state

the only exception is that I am also using the search box (toolbar: search).

https://dojo.telerik.com/IpejApos

The problem I have is, that when I filter the data; for example:

and try to search for something more specific from the search box, it cancels the filter.

Is there a way to keep the filtered data and search only within the results of the kendoFilter?

Thank you in advance,
Syian

Filter

Grid

answered on 29 Jun 2021

2 answers

2.0K+ views

Opening Bootstrap modal from URL in grid column

I would like to show a clickable URL within a Kendo Grid that opens a bootstrap modal. Unfortunately, when the user clicks on this link, the browser navigates to a new page to show the results.

The code below is supposed to open a partial view that would load the proper data for the specified LotId.

Any help would be greatly welcomed.

Thanks!

@(Html.Kendo().Grid<LotViewModel>()

.Name("LotGrid")

.Columns(columns =>

{

columns.Bound(x => x.LotName).ClientTemplate(@Html.ActionLink("#=LotName#", "ShowLotModal", "Lot", new { id = "#=LotId#" }, null));

})

// Etc...

Grid

answered on 28 Jun 2021

3 answers

279 views

Value Axis Title on Top of it

Hi, We have a multi values axis chart which is working as expected but we have a requirement of showing the the name of the plot above the value axes, let it be by using either title or legend (title seems more appropriate for this scenario). Any way I try with the title it comes only by the side of the value axis not on top of it. Can this be done some way.

Charts

answered on 28 Jun 2021

1 answer

248 views

MVVM_ how to create a Nested Child grid with Parent's multilevel grouped Grid

I want to create MVVM Kendo Grid where it is grouped in multiple levels and also want a nested grid or a hierarchical grid for each parent's grid row i.e. each k-master-row . In the ScreenShot Is it possible to create a Nested/ Child / Hierarchical Grid for each row? If yes, Can someone please provide me with sample demo.

I didn't find any documentation or helpful resource?