Hi,

     In this demo: https://demos.telerik.com/kendo-ui/scheduler/timeline

     How can I elegantly get field value that is DropDownList type in customize validation  function , for example:  roomId or attendees.

     Thank you very much for your help.    

Hi,

     In this demo: https://demos.telerik.com/kendo-ui/scheduler/timeline

     I have a drives me crazy question:

       How can I code field's  change event function in edit-form , for example:  roomId or attendees.

    Thank you very much for your help. 

Hi,

We are using keno grid component, in one of the grid column we are appending kendo multiselect to user to select option ,on selecting we are setting other columns , on setting of other columns selected option from dropdown is going off

Scenario1: once we set the remaining columns the selected option from kendo multiselect is going off.

Scenario2: if we select second time the same option then the selected option is not going off.

Scenario3: if we add the row to the grid , the second time selected option is going off again.

can u please suggest is there anything wrong in the code.

for reference:  http://dojo.telerik.com/iNaqIYEh/27

Thank you

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.

Hi guys,

I've implemented virtualization over a dropdown which has a lot of items/rows (more than 3k) so I went with this approach. The issue now is that the dropdown always selects the first option no matter if i specify the value in any way. Any advices or any guide to fix this?

Best regards.

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.

Hello,

I'm working with a Kendo Form. My goal is to get the certain parameter to populate its respective dropdownlist in the kendo form once the user clicks the link provided.

URL Example - User will click this link and navigate to form with their respective session code and paper/abstract code populated in dropdownlist item:

https://website.com/SpeakerRegistration?sessioncode=1234&abstractcode=16143

Test Commentary:

I am able to validate that upon page load, it does get the parameters and prints to console. BUT, I am not able to get it to populate in the dropdownlist. 

The Kendo Form Code & Window.load code at the bottom:

$(document).ready(function () {
            var validationSuccess = $("#validation-success");
 
            $("#exampleform").kendoForm({
                orientation: "vertical",
                formData: {
                    Email: "john.doe@email.com"
                },
                items: [{
                    type: "group",
                    items: [
                        {
                            field: "FirstName",
                            label: "First Name",
                            editor: "TextBox",
                            validation: { required: true }
                        },
                        {
                            field: "LastName",
                            label: "Last Name",
                            editor: "TextBox",
                            validation: { required: true }
                        },
                        {
                            field: "Degrees",
                            label: "Degrees",
                            editor: "TextBox"
                        },
 
                        {
                            field: "Session_ID",
                            label: "Session ID",
                            id: "sessions",
                            editor: "DropDownList",
                            validation: { required: true },
                            editorOptions: {
                                placeholder: "Session #",
                                filter: "contains",
                                dataSource: {
                                    type: "Data",
                                    serverFiltering: true,
                                    transport: {
                                        read: {
                                            url: "@Url.Action("SessionDropdown", "ConfSessions2022")",
                                            contentType: "application/json",
                                            type: "POST"
                                        }
                                    }
                                },
                                change: function (e) {
                                    var paperDrop = $("#Paper_ID").data("kendoDropDownList");
                                    paperDrop.dataSource.read();
                                },
                            }
                        },
 
                        {
                            field: "Paper_ID",
                            label: "Paper ID",
                            id: "papers",
                            editor: "DropDownList",
                            validation: { required: true },
                            editorOptions: {
                                placeholder: "Paper #",
                                filter: "contains",
                                dataSource: {
                                    type: "Data",
                                    serverFiltering: true,
                                    transport: {
                                        read: {
                                            url: "@Url.Action("PaperDropdown", "ConfSessions2022")",
                                            contentType: "application/json",
 
                                            data: ReadData
 
 
 
 
                                        }
                                    }
                                }
                            }
 
                        },
                        {
                            field: "File",
                            editor: function (container, options) {
                                 $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>')
                                    .appendTo(container)
                                    .kendoUpload({
                                        async: {
                                            chunkSize: 11000,// bytes
                                            autoUpload: false,
                                            saveUrl: "@Url.Action("Chunk_Upload_Save", "ConfSessions2022")",
                                            removeUrl: "remove"
 
                                        },
                                        upload: onUpload,
                                        validation: {
                                            allowedExtensions: [".mp4"],
                                            maxFileSize: 524288000
                                        },
                                        select: onSelect
 
                                    });
                            }
                        }
 
 
                    ]
                }],
                validateField: function (e) {
                    validationSuccess.html("");
                },
                submit: function (e) {
                    e.preventDefault();
                    var upload = $("#File").data("kendoUpload");
                    upload.upload();
 
                    validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
                },
                clear: function (ev) {
                    validationSuccess.html("");
                }
            });
 
        });
 
        function onUpload(e) {
            e.sender.options.async.saveUrl = "@Url.Action("Chunk_Upload_Save", "ConfSessions2022")" + "?FirstName=" + document.getElementById("FirstName").value + "&LastName=" + document.getElementById("LastName").value + "&SessionID=" + document.getElementById("Session_ID").value + "&PaperID=" + document.getElementById("Paper_ID").value;
        }
 
 
 
        function ReadData() {
            var dropdownVal = document.getElementById("Session_ID").value;
 
            return {
                sessionDrop: dropdownVal
            };
        };
 
        function onSelect(e) {
            $("div.k-action-buttons").hide();
        }
 
 
 
        window.onload = function() {
            try {
                const input = document.getElementsByName('Session_ID');
                const inputTwo = document.getElementsByName('Paper_ID');
                var url_string = (window.location.search).toLowerCase(); //
                var url = new URLSearchParams(url_string);
                var session = url.get('sessioncode');
                var paper = url.get('abstractcode');
                var inputThree = document.getElementsByClassName('k-input-value-text');
                input.value = session;  // fill the form with the SessionID
                inputTwo.value = paper;
                console.log(session+ " and "+paper);
                
            } catch (err) {
                console.log("Issues with Parsing URL Parameter's - " + err);
            }
        }

Thank you, look forward to receiving your help.

Lee

I have tow KendoUI grids with one row and multiple columns.

If we change value of Column1 dropdown in Grid1, it should change value of Column1 Dropdown in Grid2,

Please share your inputs how we can implement this requirement in Jquery.

I have implemented both grids dropdown lists using Column Template.

Please find attachment for grid structures.