return multiple dataValueFields from single selction

7 posts, 2 answers
  1. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jan 2019

    Posted 30 Jan Link to this post

    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


  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4818 posts

    Posted 01 Feb Link to this post

    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.
  3. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jan 2019

    Posted 04 Feb in reply to Marin Bratanov Link to this post

    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

  4. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jan 2019

    Posted 04 Feb in reply to Gerald Link to this post

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

  5. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jan 2019

    Posted 04 Feb in reply to Marin Bratanov Link to this post

    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

  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4818 posts

    Posted 04 Feb Link to this post

    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.
  7. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jan 2019

    Posted 12 Feb in reply to Marin Bratanov Link to this post

    Hello,

     

    sorry for the lateness in my reply.

     

    THANK YOU.

     

    This worked perfectly.

     

    Many thanks for your superb help

     

Back to Top