Questions on Kendo UI for jQuery Forum

0 answers

145 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

174 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

597 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

377 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

287 views

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

257 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?

Parent Grid:

Grouped by Field 1

Grouped By Field 2

Row1

Nested / Child Grid with child Grid Columns For ROW1

Row2

Nested / Child Grid with child Grid Columns For ROW 2

Grid

answered on 28 Jun 2021

1 answer

216 views

Scheduler add or edit event (extra Fields)

How can I extend this view with more fields?

Form

TextBox

View

answered on 28 Jun 2021

0 answers

93 views

Scheduler and Saving Attendee's Array to Web Api and a MS SQL backend

I have a Scheduler Project that allows for the selection on multiple "Attendees" like some of the samples.

My problem is how to save that field to a Web API with a MS SQL backend.

The CRUD endpoints work perfectly until I introduce the Attendee's array.

e.g. [1,2]

I can define it in the Model as type: "string" and it will save it in the SQL as nvarchar(MAX).

 attendees: {
                                    type: "string",
                                    from: "Attendees",
                                    nullable: true
                                },

Just can't get it back.

Any help would be appreciated.

Ed

Data Source

Scheduler

asked on 25 Jun 2021

0 answers

148 views

Media Player Time Change Error

Hi, I use kendo ui for jquery media player in blazor project. On page load i call media player by this code;

await JSRuntime.InvokeAsync<string>("EmbedVideo", record.Id, record.Title);

and my javascript code is;

function EmbedVideo(recordId,title) {
    $("#mediaplayer").kendoMediaPlayer({
        autoPlay: true,
        navigatable: true,
        media: {
            title: title,
            source: "/api/record/GetRecordFile?recordId=" + recordId +"+&fileRequestType=1"
        },
        timeChange: function () {
            console.log('changed')
        }
    });
}

when i change time i can see the 'changed' log in console but video starting over again.

These ara my referances;

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>

Thank you for all your help!

MediaPlayer

asked on 25 Jun 2021