Questions on Kendo UI for jQuery Forum

1 answer

87 views

How to dynamically build an array to use as datasource for a kendodropdownlist widget ?

Hello, the following code works like a charm:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];
    

    arr.push({text:"Option 33",value:"Value 33"});

    var datasource = new kendo.data.DataSource({
      data: arr
    });
    datasource.read();

    jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

However if I try this:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = {
        text:operators[i],
        value:operators[i]
      };

      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

I get [object Object] where I should have the elements
of operators as values and text on the dropdownlist.

If I try this:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = "{text:\""+operators[i]+",value:\""+operators[i]+"\"}";


      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

I get "undefined" where I should have the elements
of operators as values and text on the dropdownlist.

Any idea on how can get the values from "operators" into the datasource and show up on the dropdownlist ?

Thanks,

Rafael

Data Source

DropDownList

answered on 20 Sep 2023

0 answers

67 views

dataSource of components, data from parent ifram is not working in child ifram, cross origine issue.

Download kendo ui trial and in exmaple i just try following code

place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."

parent.html is as below

<html lang="en">

<head>
<title>Parent Frame</title>
<script>
___data = [
{ CityID: 1, CityName: "Lisboa" },
{ CityID: 2, CityName: "Moscow" },
{ CityID: 3, CityName: "Napoli" },
{ CityID: 4, CityName: "Tokyo" },
{ CityID: 5, CityName: "Oslo" },
{ CityID: 6, CityName: "Pаris" },
{ CityID: 7, CityName: "Porto" },
{ CityID: 8, CityName: "Rome" },
{ CityID: 9, CityName: "Berlin" },
{ CityID: 10, CityName: "Nice" },
{ CityID: 11, CityName: "New York" },
{ CityID: 12, CityName: "Sao Paulo" },
{ CityID: 13, CityName: "Rio De Janeiro" },
{ CityID: 14, CityName: "Venice" },
{ CityID: 15, CityName: "Los Angeles" },
{ CityID: 16, CityName: "Madrid" },
{ CityID: 17, CityName: "Barcelona" },
{ CityID: 18, CityName: "Prague" },
{ CityID: 19, CityName: "Mexico City" },
{ CityID: 20, CityName: "Buenos Aires" }
]
</script>
</head>

<body>
<iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>

</html>

and child.html is as below

<!DOCTYPE html>
<html lang="en">

<head>
<title>Overview</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/default-ocean-blue.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>

</head>

<body>
<div class="k-d-flex k-flex-1 k-flex-col k-px-8 k-pt-7">
<div class="kd-header k-d-flex k-gap-8 k-mb-6 k-justify-content-stretch">
<div class="kd-header-core k-d-flex k-flex-col">
<h2 class="k-h4 k-mt-0 k-mb-4 k-opacity-30">Time to order food</h2>
<span class="k-d-inline-block">Find restaurants in your area</span>
<input id="kd-place-chooser" />
<div class="k-w-24 k-h-4 k-mt-5 k-skeleton k-opacity-40 k-rounded-md"></div>
<div class="k-w-full k-h-8 k-mt-1.5 k-mb-auto k-skeleton k-opacity-30 k-rounded-md"></div>
<div class="kd-actions k-d-flex k-mt-5 k-justify-content-end">
<div class="k-w-20 k-h-8 k-skeleton k-opacity-40 k-rounded-md"></div>
<div class="k-w-20 k-h-8 k-ml-4 k-skeleton k-opacity-50 k-rounded-md"></div>
</div>
</div>
<div
class="kd-image-wrapper !k-d-flex k-justify-content-center k-align-items-center k-skeleton k-opacity-10 k-border k-border-secondary k-border-solid k-rounded-md">
<span class="k-icon k-i-image k-opacity-70"></span>
</div>
</div>
<div class="kd-content k-mt-2 k-grow k-skeleton k-opacity-30 k-rounded-tl-md k-rounded-tr-md"></div>
</div>

<style>
.kd-image-wrapper>.k-icon {
font-size: 72px;
}

/* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
@media (max-width: 678px),
(min-width: 821px) and (max-width: 1038px),
(min-width: 1241px) and (max-width: 1328px) {
.kd-image-wrapper {
display: none !important;
}

.kd-actions div {
width: auto;
flex-grow: 1;
}

.kd-content {
margin-top: 24px;
}
}

/* Breakpoint for full screen demo: max:359px */
@media (max-width: 476px) {
.kd-header {
height: 100%;
}

.kd-header-core {
display: flex;
flex-direction: column;
height: 100%;
}

.kd-actions {
flex-direction: column;
}

.kd-actions>div {
margin-left: 0;
margin-top: 8px;
}

.kd-content {
display: none;
}
}
</style>

<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
// data: Array.from(parent.___data, (item) => Object.assign({}, item)),
data: parent.___data,
sort: { field: "CityName", dir: "asc" }
});

$("#kd-place-chooser").kendoDropDownList({
filter: "contains",
crossOrigin: "anonymous",
optionLabel: 'Please select city...',
dataTextField: "CityName",
dataValueField: "CityID",
dataSource: dataSource
});
});
</script>
</body>

</html>

Data Source

DropDownList

updated question on 04 Aug 2023

2 answers

132 views

Change event triggered when not changing virtualized dropdownlist

I have a dropdown list with virtualization (https://dojo.telerik.com/AhuQEDEL/2). When I open and close the dropdownlist without actually changing anything the change event is occasionally triggered. I reproduced the odd behavior in this this Dojo. You will notice that the "change" is logged in the console when you open and close the list without selecting anything. This behavior is also inconsistent as sometimes it logs the change and sometimes it doesn't.

Data Source

DropDownList

answered on 04 Jul 2023

1 answer

67 views

Dropdownlist with virtualization returning blank for value

https://dojo.telerik.com/ezOJuzog

I have a kendo dropdownlist with virtualization that uses a local json object (the real list is longer than my example). When I set the value and immediately try to log that new value out, I get nothing. How do I log out the value after setting it when using virtualization? Here is a dojo example where you will see it logs "The value is now:" with no answer. If I remove virtualization it logs the answer out.

Data Source

DropDownList

answered on 27 Jun 2023

0 answers

71 views

How to set attributes to options in Select?

Hi guys,

I want set custom attributes to options in select but I could not find a way to do that. Is there any way to do so?

Data Source

DropDownList

asked on 26 Jan 2023

1 answer

190 views

datasource for kendo dropdowntree with Variable

I was trying to implement Kendodropdowntree , I came across following situation which I am not able to understand


                $(dropdowntree).kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource:  //HARD CODED VALUE GOES HERE 
            });
       }

Above example will work fine when , I hard code those datasource values. When I try to pass some variable there it will not work

var datatobind= somedata // data in exact format it is expected 
{
        
                $(dropdowntree).kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource:  datatobind
            });
       }

Even I tried passing variable of following type

var dataSourcetype = new kendo.data.HierarchicalDataSource({
        data: datatobind
    });

 
{
        
                $(dropdowntree).kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource:  dataSourcetype.options.data
            });
       }

But even above also doesn't solve problem, I am not able to get it , why passing exact same variable is not binding to data source.

answered on 14 Dec 2022

1 answer

319 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

0 answers

47 views

Grid Transport call for CREATE is not sending model on Ajax Call

I have an OData 4 API in Dot Net to which I am making calls on a grid to read(GET), update(PUT), create(POST) and destroy (DELETE).

For some reason, the resulting AJAX call from the create does not include the model, and it is always null at the API handler, causing ModelState.IsValid to be false.

read, and update are both working fine, and API create(POST) call from Postman with correct JSON in the body of the request accomplishes the add.

Can't seem to figure out how I am misconfiguring the grid create transport. Have include screen shots of relevant code, can include complete file of UI and API on request.

I also have 2 short videos illustrating the create error and successful update, but since I cannot upload mp4 files, I have not included. they are available on request.

Any help would be greatly appreciated. Thanks!

Data Source

DropDownList

Grid

asked on 07 Jun 2022

0 answers

64 views

Adding a dropdown list in the Action Column instead of using command buttons doesn't work right

I'm new to Kendo UI/Telerik, but have been a web developer for over 15 years.

Please forgive my title as well, as I could be doing it completely wrong by doing this:

            dataBound:function(){
                $('.toolbar').kendoToolBar({
                    items: [ {
                        type: "splitButton",
                        text: "Edit",
                        click:function(e){
                            var grid = $('#grid').data('kendoGrid');

                            grid.editRow(e.target.parents('tr'))
                        },
                        menuButtons: [
                            { id: "foo", text: "Print", click:function(){alert('print')} },
                            { id: "bar", text: "Delete", click:function(e){
                                    var grid = $('#grid').data('kendoGrid');

                                    grid.removeRow(e.target.parents('tr'))
                                } },
                        ]
                    } ]
                });
            }

But that's what the demo shows. I’m a bit confused as to why this works with a hardcoded data source:

https://dojo.telerik.com/eMUwAqUH

I've been piecing together quite a bit on my own, but one thing has me stumped -- this seems like such a common requirement for Grid usage, and yet my searches don't seem give me anything for jQuery UI.

But as soon as I swap in my real data source (API call), when I hit Edit, then hit Edit again to save the change, the entire box disappears.

I took a short video:

https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4

This is a pretty big deal for me because all of my data tables are going to be API driven, and I want to use a dropdown for the action columns NOT individual buttons. A lot of the time I’m going to have more than just “Edit and Delete” so a dropdown makes more sense.

Any help would be appreciated, I'm sure you can literally swap out the dataSource and columns with a sample one, and you should get the exact same error. I'm running on the latest version of Edge, but same thing happens in Chrome.

Data Source

DropDownList

Grid

updated question on 24 May 2022

1 answer

98 views

Filtering client side - Dropdownlist

Hey guys,

Here's the thing, I have a dropdownlist populated already (use datasource in case this info is needed, since the info comes from an endpoint) and it has to be this function so that the user types anything (on an input generated by the method "filter" )and the data gets filtered, but i want to do it at the client side so in that case i wouldn't have to change any c# code. So i found out there's this method "filtering" but i didn't found an example of how to apply it, so i'm here in looking for any guidance.

Hope you understand my doubt.

Regards.

Data Source

DropDownList