How do I select an item in the ejDropDownList at creation time?

[Xander van der Merwe]

I'm creating an ejDropDownList and would like to select one of the values as the default value, but none of the following works and I cannot figure it out from the online help either:

    var selectValues = [

        { id: 1, title: "One" },

        { id: 2, title: "Two" },

        { id: 3, title: "Three" },

        { id: 4, title: "Four" }

    ];

    var defaultId = 2;

    $("#dropdown").ejDropDownList({

        dataSource: selectValues ,

        fields: { text: "title", value: "id" },

        

        // "selectItemByValue": defaultId , // doesn't work

        // "value": defaultId, // doesn't work 

        // "selectItemByIndex": 1,  // doesn't work - although I really want to set by value rather than index

        // "itemId" : 1,  // doen't work

        multiSelectMode: false,

    });

Can you help please?

[Xander van der Merwe]

The only way I could get it to work is like this:

 var defaultId = 2;

    $("#dropdown").ejDropDownList({

        dataSource: selectValues ,

        fields: { text: "title", value: "id" },

        multiSelectMode: false,

    }).data("ejDropDownList").selectItemByValue(defaultId);

[Harikrishnan P]

Hi Xander van der Merwe,

 

Please refer the below approaches to set default value for Dropdownlist.

To select Default value through Property:

1.       To select default value, you can use the property “selectedItem”

Example:

          

 $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title", value: "id" },

                selectedITem:2  //Selects the 2nd item in the list as default value

            });

 

Now the 2^nd Item in the Dropdownlist values, will be shown as default value.

2.       To select default value, you can use the property “value”

 

Example:

          

 $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title", value: "id" },

                value:”default value”  //Selects the specified value given for the “value” property.

            });

 

To select Default value through Methods:

Dropdownlist Control methods can be accessed in two different ways as follows:

• Using the object of DropDownList, we can call the methods of ejDropDownList.

1.     Initialize the DropDownList object

    //initialize the DropDownList object

    var drpdwnObj = $("#drpdwn").data("ejDropDownList");

 

2.     Using that object call the methods.

//calls the selectItemByValue method of DropDownList

drpdwnObj.selectItemByValue(“value”);

 

• another way of accessing the methods is without creating object as follows

             //to select value using DropDownList selectItemByValue method

             $("#drpdwn").ejDropDownList("selectItemByValue",”Value”);

 

 

1^st Method: “selectItemByValue”  - This method is used to select a list item in DropDownList using given “value” field.

 

Example:

Var defaultId=”2”;   //[Note: "2" refers to the value specified in "value" field(you have mapped “id” to the value field.]

    $("#dropdown").ejDropDownList({

        dataSource: selectValues ,

        fields: { text: "title", value: "id" }

}). data("ejDropDownList").selectItemByValue(defaultId); // Selects the dropdownlist item whose value is “2”.

 

2^nd Method: “selectItemByText” - This method is used to select a list item in DropDownList using given text field.

 

Example:

Var defaultId=”Two”;   //[Note: "Two" refers to the value specified in "text" field;(you have mapped “title” to the text field.)]

    $("#dropdown").ejDropDownList({

        dataSource: selectValues ,

        fields: { text: "title", value: "id" }

}). data("ejDropDownList").selectItemByText(defaultId); // Selects the dropdownlist item whose text is “Two”.

 

3^rd Method: “selectItemByIndex”- This method is used to select a list item in DropDownList using given index field.

 

Example:

Var defaultId=3;   //[Note: "3" refers to the index dropdownlist items]

    $("#dropdown").ejDropDownList({

        dataSource: selectValues ,

        fields: { text: "title", value: "id" }

}). data("ejDropDownList").selectItemByIndex(defaultId); // Selects the dropdownlist item whose index is “3”.

We identify that the below code has not worked because, here methods are used like properties.

var defaultId = 2;

    $("#dropdown").ejDropDownList({

        dataSource: selectValues ,

        fields: { text: "title", value: "id" },

        

        // "selectItemByValue": defaultId , // doesn't work

        // "value": defaultId, // doesn't work 

 

        // "selectItemByIndex": 1,  // doesn't work - although I really want to set by value rather than index          

 

        // "itemId" : 1,  // doen't work

            multiSelectMode: false,

    });

 

 

Please follow the above mentioned approaches to set the default value for Dropdownlist.

 

If you need any clarifications, Please visit our online help link.

http://help.syncfusion.com/js

 

Please let us know if you have further queries, We will wait to hear from you.

 

Regards,

HariKrishnan.

[Xander van der Merwe]

Thanks for the reply, but my point is that the following as per point 2 of your reply does NOT work, so I must assume this is a BUG at present?:

 var selectValues = [

        { id: 1, title: "One" },

        { id: 2, title: "Two" },

        { id: 3, title: "Three" },

        { id: 4, title: "Four" }

    ];

    var defaultId = 2;

  $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title", value: "id" },

                value: defaultId

            });

When you run the above example it will show the selected value as "2" instead of "Two" inside the dropdownlist.

[Harikrishnan P]

Hi Xander,

We would like to let you know that the “value” property is used to apply the value specified in it.

    var defaultId = 2;

  $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title", value: "id" },

                value: defaultId

            });

Here the value specified in defaultId is “2”. So “2” will be shown as selected value.

We would like to suggest you that, instead of mapping “id” to “value” filed; you can map it to “id” field.

Also, you can map the “title” to “text” as well as “value” field.

You can try like this,

        var defaultId = "Two";

 

        $('#dropdown').ejDropDownList({

 

            dataSource: selectValues,

 

            fields: { id:"id",text: "title", value: "title" },

 

            value: defaultId

 

        });

Now the Dropdownlist selected value will be “Two”. Or you can select the default value through previously mentioned approaches.

Please let us know if you have further queries.

 

Regards,

HariKrishnan.

[Xander van der Merwe]

Thanks for your reply, but it does not answer my question.

The defaultId is NOT a string, but an integer as shown in ALL my code examples above. It is very typical for the Id to be an integer and the Text to be a string as it is shown in my code samples above.

So can I ask again, please provide me with an example where the following works (where the defaultId is an INTEGER and not a string):

var selectValues = [

        { id: 1, title: "One" },

        { id: 2, title: "Two" },

        { id: 3, title: "Three" },

        { id: 4, title: "Four" }

    ];

    var defaultId = 2;

  $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title", value: "id" },

                value: defaultId

            });

Thanks in advance

[Harikrishnan P]

Hi Xander,

Sorry for the inconvenience caused. You can use the “selectedItem” property, which renders the Dropdownlist with specified index. “selectedItem” property requires Integer.

Please see the code below:

var selectValues = [

        { id: 1, title: "One" },

        { id: 2, title: "Two" },

        { id: 3, title: "Three" },

        { id: 4, title: "Four" }

    ];

 var defaultId = 2;

  $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title",value:"title”,id: "id" },//Title can be mapped to both value and text field. Value field is optional. Id can be mapped to “id” field.

                selectedItem: defaultId //Selects the Dropdown list with specified Item

            });

 

Now the value in the Dropdownlist will be “Three”. Similarly you can pass the required Dropdownlist items index, to the “SelectedItem” property.

 

Please Let us know if you have further queries,

Regards,

HariKrishnan.

[Xander van der Merwe]

I'm going to make one last attempt to explain the problem:

• I need to set the selected item in the dropdown by the value of the ID which is an INTEGER
• I do NOT want to set the selected item by the text that is displayed in the dropdown
• I do NOT want to set the selected item by it's index

Each value in the dropdown list is represented by a simple object in the form (this is only an example):  { id=1, title="One" }  where the id is an INTEGER and the title is a STRING.

When loading an object from the database for editing and one of the properties of that object needs to be represented by a dropdown list in the UI then you need to set the selected item from the current INTEGER property value that is stored in the database. This is a very common scenario.

This is a "simplified example":

var selectValues = [

        { id: 1, title: "One" },

        { id: 2, title: "Two" },

        { id: 3, title: "Three" },

        { id: 4, title: "Four" }

    ];

    var defaultId = 2;

  $('#dropdown').ejDropDownList({

                dataSource: selectValues,

                fields: { text: "title", value: "id" },

                value: defaultId  // <<== this should work and I believe it is a BUG that it does not

            });

When setting the value = defaultId it should show the text in the dropdown as "Two".

As mentioned in the example, I believe there is a bug with the ejDropDownList control that prevents you from setting the selected value via the value property using the integer "id" field in the above example.

[Harikrishnan P]

Hi Xander,

Sorry for the inconvenience caused. You can try this below code.

 

        var selectValues = [

       { id: 1, title: "One" },

       { id: 2, title: "Two" },

       { id: 3, title: "Three" },

       { id: 4, title: "Four" }

        ];

        var defaultId = 2;

 

        $('#dropdown').ejDropDownList({

 

            dataSource: selectValues,

 

            fields: { text: "title", value: "id" },

 

        }).data("ejDropDownList").selectItemByValue(defaultId);

 

This would show the text in the dropdownlist as “Two”. “selectItemByValue” method is used to select a list item in DropDownList using given value field.  We would like to clarify you that, the property “value” will display whatever the value assigned for it. This is the default behavior of “value” property. If you want to select the Dropdownlist Item based on its value, you can use the “selectItemByValue” method.

Please let us know if you have further queries.

Regards,

HariKrishnan.

[Vid]

This is still the problem.

Nothing work, setting the value, slectedItemIndex, selectedItems..

How to set default value in dropdownlist to be shown when list is created?

[Saranya Sivakumar]

Hi Vid,

Thanks for using Syncfusion products.

We have analyzed the reported query (Nothing work, setting the value, selectedItemIndex, selectedItems.) with our sample and we are unable to reproduce the reported issue. As we said in our previous updates, we can make use of “value” property to select the default value in the Dropdownlist control.

 Please refer the below code snippet.

[Script]

$('#bikeList').ejDropDownList({

dataSource: BikeList,

fields: { id: "empid", text: "text", value: "value" },

value: "Fazzer",

});

We have also prepared a sample based on this. Kindly download the sample from the following location.

Sample Location: Sample

In this sample, we have showcased the default value using value, selectedItemIndex and selectedItems in three different Dropdownlist control. Can you please check with the above sample? If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you better.

You can also refer the following class reference link for JavaScript to know about the list of properties, methods and events supported by esach MVC component. Sincr, our ASP.NET MVC components are created as wrapper for the JavaScript components the properties, methods and events will be same for MVC components.

http://help.syncfusion.com/cr/js

Please let us know if you require further assistance on this.

Regards,

Saranya.S

[Vid]

Hi again and thanks for answering my question.

This is my code:

// DataManager creation

    var dropDown_DataManager = ej.DataManager({

        url: $("#UserType").data("url")

    });

    $("#UserType").ejDropDownList({

        dataSource: dropDown_DataManager,

        fields: { text: "Name", value: "Id" },

        width: 200,

        selectedItemIndex: 2

    });

..and I still have the same problem..nothing works.

Maybe it is working when the data is local and not coming remotely?

[Saranya Sivakumar]

Hi Vid,

Thanks for your update.

We have analyzed the reported issue (SelectedItemIndex not working in Dropdownlist) in our sample and found that the property does not select the item with the specified index while connecting Remote datasource. We have confirmed this as a defect and an issue report has been logged on this. We will fix this issue internally and it will be available in our upcoming Volume 1, 2015 main release which is expected to be rolled out at the end of next month(March).

Please let us know if you have further concern.

Regards,

Saranya.S