Get an URL parameters to populate a kendoForm DropdDownList item input upon page load.

[Lee]

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: "[e-mail]"
                },
                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

 

[Neli]

Hi Lee,

I would suggest you to get a reference to the DropDownList widget and use its value method:

- https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/value

Below is an example:

const input = document.getElementsByName('DropDownList');
$(input).data('kendoDropDownList').value(8)

In the Dojo example linked here the value of the DropDownList is set on a button click. 

I hope you will find the provided suggestion helpful.

Regards,
Neli
Progress Telerik