Questions on Kendo UI for jQuery Forum

0 answers

11 views

want to add validation on saving the kendo grid

let me explain what issue i am facing , i have two cloumns in kendogrid one is dropdown and other is simple textbox

let say dropodown column has (emailadress, website dropdown) now i want to match the exact expression of mail to the other column

if it matches then save the record if not matches than show the toolptip and prevent for saving changes

this is the code

save: function(e) {
                                    // Get the data item being saved
                                    var dataItem = e.model;

                                    // Access properties of the data item and perform actions accordingly
                                    var addressType = dataItem.intInternetAddressTypeID;
                                    var inputField = dataItem.strInternetAddress;

                                    // Perform validation or other actions based on the properties
                                    if (addressType === "2") {
                                        // Email validation for input field
                                        var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
                                        if (!emailRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid email address format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    } else if (addressType === "10") {
                                        // Phone number validation for input field
                                        var phoneRegex = /^[0-9]+$/;
                                        if (!phoneRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid phone number format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    }
                                },

i also enable the tooltip from databound
dataBound: function (e) {
e.sender.element.find("[data-strInternetAddress-msg]").each(function () {
                                    $(this).kendoTooltip({
                                        position: "bottom",
                                        content: $(this).attr("data-strInternetAddress-msg"),
                                    });
                                });
}but tooltip is not showing in the page , it preventing from saving but not showing tooltip after inspection i found that it creating this html

<td role="gridcell" data-container-for="strInternetAddress" data-strinternetaddress-msg="Invalid email address format"><input type="text" class="k-input k-textbox k-valid" name="strInternetAddress" required="required" data-required-msg="Internet Address is required" data-bind="value:strInternetAddress"></td>

Help me how to show the tooltip not alert i dont want alert

DropDownList

Grid

ToolTip

Validation

asked on 17 Apr 2024

0 answers

10 views

Simplifies dropdownlist input on mobile devices.

https://dojo.telerik.com/ahoKociN/2

1) normal select box : (in the iPAD)

2) kendo ui select box :

Question :

How can I input like 1) on mobile while using kendo jquery?

DropDownList

asked on 30 Mar 2024

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

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

0 answers

63 views

ddl cascade - select instead of filtering

is it possible to change the behavior to have the item just selected instead of filtered to give the ability to the user to select the value from the whole datasource?

now the user just see limited set of data according to the parent selection

DropDownList

asked on 17 Dec 2022

0 answers

62 views

Select correct element in DDL while using virtual

Hi,

I have a DDL that gets its first value from a grid ("myValue"), a simple string that will be written to the DDL (same JSON format that the DDL is expecting

{

field1: "myValue",

field2: ""

}

). When the DDL is opened, the value I entered ("myValue") should be searched in the data source of the DDL and this value should be put into focus. In the end the JSON looks like this:

{

field1: "myValue",

field2: "describtion of myValue"

}

The DDL datasource has to compare the value from field1 ("myValue), if it matches it has to select it,

As long as I don't use virtual this works, but as soon as I use virtual it doesn't work anymore.
How can I achieve that the value from the grid is written into the DDL and the DDL then sets the correct data set into the focus?

Thanks in advance.

DropDownList

updated question on 30 Nov 2022

0 answers

68 views

Keyboard Filter DropDownList without expanding when filter = startwith (possible just enabled)

when we have the search option enabled for DDL we cant make a selection using keyboard & typeing the first letter (without expanding the drop down)

are there workaround to make it work togather?

DropDownList

asked on 16 Aug 2022

0 answers

173 views

Kendo dropdown data binding

Hello Team,

I am using one kendo dropdown control inside a form. While submitting the form value is properly binding. But when I am opening an existing form for editing, kendo dropdown is not showing the value which it is fetching from database.

In side view dropdown control---

<input id="AssignedTo" class="form-control" style="width: 250px;" />

 <script type="text/javascript">
        $(document).ready(function () {

   $("#AssignedTo").kendoDropDownList({
                autoBind: false,
                filter: "contains",
                dataTextField: "FullName",
                dataValueField: "StaffID",
                optionLabel: "Search by first or last name",
                dataSource: {
                    serverFiltering: true,
                    pageSize: 80,
                    transport: {
                        read: {
                            url: "/Test/Staff/Search"
                        }
                    }
                },
                value: '@Model.StaffID'
            });
        })

So what is happening right now, when I am editing the form, the dropdown show "Search by First or last name", but when we expand the options, the expected option is already selected but the dropdown text is not set.

Attached the screenshots of the control.

Please provide solution to display the selected value when the form gets loaded.

Thanks

Amrendra

DropDownList

asked on 01 Aug 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