This is a migrated thread and some comments may be shown as answers.

return multiple dataValueFields from single selction

6 Answers 321 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Gerald
Top achievements
Rank 1
Gerald asked on 30 Jan 2019, 05:23 PM

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


6 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 01 Feb 2019, 12:08 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gerald
Top achievements
Rank 1
answered on 04 Feb 2019, 08:58 AM

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

0
Gerald
Top achievements
Rank 1
answered on 04 Feb 2019, 09:07 AM

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. :-)

0
Gerald
Top achievements
Rank 1
answered on 04 Feb 2019, 01:10 PM

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

0
Accepted
Marin Bratanov
Telerik team
answered on 04 Feb 2019, 02:02 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gerald
Top achievements
Rank 1
answered on 12 Feb 2019, 08:00 AM

Hello,

 

sorry for the lateness in my reply.

 

THANK YOU.

 

This worked perfectly.

 

Many thanks for your superb help

 

Tags
DropDownList
Asked by
Gerald
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Gerald
Top achievements
Rank 1
Share this question
or