Drop Down display text

2 posts, 0 answers
  1. Justin
    Justin avatar
    14 posts
    Member since:
    Dec 2011

    Posted 02 Jan 2012 Link to this post

    Hello, I'm curious if there is a way to have the drop down display one line of text constantly. I want to drop down to always display "Please select a field" no matter what is selected from the list below. Once the user makes a selection a field is added to a form and the user can again select another field so it doesn't make sense for the "Please select a field" message to be replaced with the chosen field. It would just be confusing.

    Right now I have it set up so that element 0 is the "Please select" message and a bit of javascript that on change does what it's supposed to do and then selects element 0. This works, however there is a "Please select" item that the user sees along with the list of choices. It's far from ideal.

    $(document).ready(function () {
        SetupForm();
     
        // Kendo Combo Box
        $("#fieldToAdd").kendoDropDownList({ index: 0, change: onChange });
     
     
        function onChange() {
            var fieldToAdd = $("#fieldToAdd").data("kendoDropDownList");
     
            value = fieldToAdd.value();
            text = fieldToAdd.text();
            if (value >= 0) AddFieldOnForm(value, text);
            fieldToAdd.select(0);
        }
    }
    <select id="fieldToAdd" class="inputfields" title="test" style="width: 152;">
    <option value="-1" style="text-align: center;">Add Field</option>
    <option value="5">Checkbox</option>
    <option value="9">Checklist</option>
    <option value="8">File Upload</option>
    <option value="10">Label</option>
    <option value="6">Multiple Choice</option>
    <option value="7">Picklist</option>
    <option value="12">CRM Picklist</option>
    <option value="1">Text Single-line</option>
    <option value="2">Text Multi-line Small</option>
    <option value="3">Text Multi-line Medium</option>
    <option value="4">Text Multi-line Large</option>
    <option value="11">Subscription Management</option>
    <option value="13">Star Rating</option>
    <option value="14">Image</option>
    </select>


    EDIT: An acceptable solution would also be to disable the option from being visible when the drop down is expanded but still be able to programatically select it.

  2.
  3. Justin
    Justin avatar
    14 posts
    Member since:
    Dec 2011

    Posted 02 Jan 2012 Link to this post

    Ended up removing the "Add Field" option and then changed the docuemnt.ready to this.

    $(document).ready(function ()
    {
        SetupForm();
     
        // Kendo Combo Box
        var fieldToAdd = $("#fieldToAdd");
        fieldToAdd.kendoDropDownList({ index: 0, change: onChange });
     
        var data = fieldToAdd.data("kendoDropDownList");
        data.value(null);
        data.text("Add Field");
     
        function onChange()
        {
            // Get the current values
            var data = $("#fieldToAdd").data("kendoDropDownList");
            value = data.value();
            text = data.text();
     
            // Add the selected field
            AddFieldOnForm(value, text);
     
            // Reset the drop down label
            data.value(null);
            data.text("Add Field");
        }
    });
Back to Top