return multiple dataValueFields from single selction

[Gerald]

Hello,
I'm new to this, so this might be a simple answer, but I could for the life of me not locate it.

The page I am working on has a kendoDropDownList that work fine

       kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid" }); });

I then have some javascript that displays the data

        var getType = $("#type").val();
        console.log(getType);

What I now need is this to return 2x dataValueField . I've tried

        <script>
        kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transpormet": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid" }); });
        kendo.syncReady(function () { jQuery("#name").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "ta" }); });
        </script>

with the javascript reading

        var getType = $("#type").val();
        console.log(getType);
        var getName= $("#name").val();
        console.log(e);

But getName is "undefined", so, I assume, the second JQuery is not being run.
What's the best way to a second value using the same dropdownlist selection?
ThanK you

[Marin Bratanov]

Hello Gerald,

The data source object can have more than two fields, and the .dataItem of the event arguments of the select event gives you access to those, so if each item is matched 1:1 with a secondary value, you can keep them in a single dropdown. Here's an example I made for you: https://dojo.telerik.com/@bratanov/ojInOfuW.

Here is also an example that uses two separate widgets and shows the data for both on click of a button which also uses the text and dataItem methods to get all the data relevant to the selected item: https://dojo.telerik.com/@bratanov/ehUbOKiz.

If the relationship is 1:many, I suggest that you use the cascading feature: https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist.

Regards,
Marin Bratanov
Progress Telerik

[Gerald]

Hi Marin, thank you for the examples ( the second one didn't seem to do anything though ?? ).

Your one seems to do what I am after (thank you), but when I try and put it in the current code I have, I am unable to select anything from the dropdown any more.

 

            <label class="k-label">RType:</label>
            <input class="k-widget" id="rtype" name="rtype" style="width:250px;" type="text" />
            <script>
                kendo.syncReady(function () {
                    jQuery("#roomtype").kendoDropDownList({
                        kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid", "select": "selectHandler"
                    });
                    function selectHandler(e) {
                        var value = $("#type").val();
                        var secondaryField = e.dataItem.tname;
                        alert("value: " + value + "\nmore data: " + secondaryField);
                    };
                });
            </script>

Wold you be able to spot whereI have gone wrong ?

Thank you

[Gerald]

Don't worry, I think I spotted my mistake...

            <label class="k-label">RType:</label>
            <input class="k-widget" id="rtype" name="rtype" style="width:250px;" type="text" />
            <script>
                kendo.syncReady(function () {
                    jQuery("#roomtype").kendoDropDownList({
                        kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid", "select": selectHandler
                    });

                    var rtype = $("#type").data("kendoDropDownList");

                    function selectHandler(e) {
                        var value = $("#type").val();
                        var secondaryField = e.dataItem.tname;
                        alert("value: " + value + "\nmore data: " + secondaryField);
                    };
                });
            </script>

 

...now to add seconday value to its own Variable. :-)

[Gerald]

I've worked out how to add the secondary value to a variable but, how can I grab the secondary value if nothing in the dropdown menu has been "selected" (short of adding Optionallabel)?

The first item in the dropdown might be the one the user requires, so they would not "select" it (As its already chosen).

 

thank you

[Marin Bratanov]

Hello Gerald,

If the user has not selected anything, then there is no data the widget can provide. This is what the option label and required field validation avoid.

As soon as the user makes a selection, you can capture the secondary field.

If there is value pre-selected (e.g., because it comes as the value of the widget, or the value attribute of the DOM element), using the .dataItem() method of the dropdownlist widget in its dataBound event will give you the corresponding information. Here's a modification of the first example that showcases this: https://dojo.telerik.com/@bratanov/ojInOfuW/2.

Regards,
Marin Bratanov
Progress Telerik

[Gerald]

Hello,

 

sorry for the lateness in my reply.

 

THANK YOU.

 

This worked perfectly.

 

Many thanks for your superb help