Telerik Forums
Kendo UI for jQuery Forum
1 answer
3 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

Georgi Denchev
Telerik team
 answered on 05 Jul 2021
1 answer
7 views
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. 
Veselin Tsvetanov
Telerik team
 answered on 02 Jul 2021
1 answer
5 views

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>

Martin
Telerik team
 answered on 02 Jul 2021
1 answer
6 views

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?

 

 

Veselin Tsvetanov
Telerik team
 answered on 01 Jul 2021
1 answer
5 views
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.
Martin
Telerik team
 answered on 01 Jul 2021
1 answer
12 views

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

Georgi Denchev
Telerik team
 answered on 01 Jul 2021
0 answers
5 views

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!!!

Dev
Top achievements
Rank 1
Iron
 asked on 30 Jun 2021
1 answer
8 views

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. 

 

            
Georgi Denchev
Telerik team
 answered on 30 Jun 2021
0 answers
17 views

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,

Aravind
Top achievements
Rank 1
 asked on 30 Jun 2021
1 answer
18 views

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

Nikolay
Telerik team
 answered on 29 Jun 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Psyduck
Top achievements
Rank 4
Bronze
Iron
Iron
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Valery
Top achievements
Rank 1
Iron
Peter
Top achievements
Rank 1
Veteran
Iron
George C.
Top achievements
Rank 2
Iron
Veteran
Top users last month
Psyduck
Top achievements
Rank 4
Bronze
Iron
Iron
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Valery
Top achievements
Rank 1
Iron
Peter
Top achievements
Rank 1
Veteran
Iron
George C.
Top achievements
Rank 2
Iron
Veteran