Questions on Kendo UI for jQuery Forum

1 answer

145 views

Why does the Yaxis display on right side of area chart?

The vertical scale show up on the right-hand side no matter what I do. and the chart is blank even though series items were populated

Charts

answered on 05 Jul 2021

1 answer

219 views

Spreadsheet Drag + Scroll Performance

Is there a way to increase performance of dragging down a cell to the point where the page has to scroll? Dragging is so fast until I get to the last row currently in view. As soon as scroll down is activated by my drag, the speed decreases and it takes about 2 minutes to drag down 350 rows.

Spreadsheet

answered on 02 Jul 2021

1 answer

250 views

TreeList with MultiSelect values on a cell

Hi there,

I would like to use the MultiSelect to set the value of a cell in a TreeList.

My code almost works, but once the MultiSelect closes the values displayed in the grid are not what I expected.

I tried using a template to display selected values, but it doesn't look right.

Here is a dojo link https://dojo.telerik.com/OdAFErap/11 and below the code of that dojo

Thanks in advance,

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
            <div id="example">
            <div id="treelist"></div>
              
            <script type="text/kendo" id="alertsTemplate">
               # if (Alerts) { #
              <ul>
                # for(var i = 0; i< Alerts.length; i++){ #
                <li>#: Alerts[i].name #</li>
                # } #
              </ul>
              # } #
            </script>

              
            <script>
              $(document).ready(function () {
                
                var AlertsList = [
                  { code: '9', name: 'Black' },
                  { code: '5', name: 'Red' },
                  { code: '5', name: 'Yello' },
                  { code: '3', name: 'Blue' },
                  { code: '1', name: 'Green' }
                ];

                var alertsEditor = (container, options) => {
                  $('<input name="Alerts">')
                      .appendTo(container)
                      .kendoMultiSelect({
                        dataValueField: "code",
                        dataTextField: "name",
                        dataSource: AlertsList
                      });
                };
                
                    var dataSource = new kendo.data.TreeListDataSource({
                      data: [
                          { id: 1, Name: "Daryl Sweeney", Alerts: null, parentId: null },
                          { id: 2, Name: "Guy Wooten", Alerts: null, parentId: 1 },
                          { id: 32, Name: "Buffy Weber", Alerts: null, parentId: 2 },
                          { id: 11, Name: "Hyacinth Hood", Alerts: null, parentId: 32 },
                          { id: 60, Name: "Akeem Carr", Alerts: null, parentId: 11 },
                          { id: 78, Name: "Rinah Simon", Alerts: null, parentId: 11 },
                          { id: 42, Name: "Gage Daniels", Alerts: null, parentId: 32 },
                          { id: 43, Name: "Constance Vazquez", Alerts: null, parentId: 32 },
                          { id: 46, Name: "Darrel Solis", Alerts: null, parentId: 43 },
                          { id: 47, Name: "Brian Yang", Alerts: null, parentId: 46 },
                          { id: 50, Name: "Lillian Bradshaw", Alerts: null, parentId: 46 },
                          { id: 51, Name: "Christian Palmer", Alerts: null, parentId: 46 },
                          { id: 55, Name: "Summer Mosley", Alerts: null, parentId: 46 },
                          { id: 56, Name: "Barry Ayers", Alerts: null, parentId: 46 },
                          { id: 59, Name: "Keiko Espinoza", Alerts: null, parentId: 46 },
                          { id: 61, Name: "Candace Pickett", Alerts: null, parentId: 46 }
                        ],
                        schema: {
                            model: {
                                id: "id",
                                expanded: true,
                              	fields: {
                                  	Name:   { type: "string", editable: false },
                                  	Alerts: { type: "string", editable: true }
                                }
                            }
                        }
                    });

                $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        height: 540,
		                		batch: true,
                        editable: "inline",
                        columns: [
                            "Name",
                            { 
                              field: "Alerts",
                              editor: alertsEditor,
                              template: $("#alertsTemplate").html()
                            },
                            { command: ["edit"] }
                        ]
                    });
                });
            </script>
        </div>


    

</body>
</html>

answered on 02 Jul 2021

1 answer

312 views

Spreadsheet Partial DataSource Update With Set() Slow

I am using the spreadsheet component and need to partially update my datasource from the server prior to submit.

Basically I have 350 rows in the spreadsheet. I send some (those that have been edited) to the server via ajax where some additional fields are populated. Then those records are sent back to the client side and the user keeps editing before submitting later. On Ajax success I need to update my datasource based on the changes from the server.

Currently in js I am looping through the returned rows, finding them in the datasource, and updating each cell with the new value from the server using datasource.set(). The problem is that this is extremely slow for a few hundred rows. I found this forum answer that is very similar to my situation, except this person is using the grid instead of the spreadsheet.

https://www.telerik.com/forums/modifying-datasource-values-is-very-slow-with-bigger-data-sets

I tried setting my cell values with = instead of set() and then calling $("#spreadsheet").data("kendoSpreadsheet").refresh(); but the spreadsheet rows are not redrawn, even though datasource is reflecting the updated values. I can't use dataSource.sync() because the rows aren't ready to be submitted. I've also tried using dataSource.pushUpdate(<returned from server rows>) which works, but clears out all of the dirty flags by design, meaning I'd need to reset them manually (also slow).

Are there any other options for doing a partial update of a datasource quickly and maintining dirty flags?

Data Source

Spreadsheet

answered on 01 Jul 2021

1 answer

220 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

165 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

129 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

159 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

573 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