Set Default Value in Javascript

[Fabio Melendez]

I have a dropdownlist loaded vith values

@Html.EJ().DropDownList("perSelect").Datasource(Model.Roles).DropDownListFields(per => per.Text("PermissionName").Value("PermissionsId")).EnableIncrementalSearch(true).ShowRoundedCorner(true)

My List has

Name: Admin ID: 1

Name: User ID: 2

So when the application user clicks on a grid to edit the permissions for a user I want to default the value in the dialog that comes up

Trying to do something like this

var dropDown = $("#perSelect").ejDropDownList("instance");

dropDown.data("ejDropDownList").selectItemByValue(record.Role);

But that doesn't work, how would I go about selecting an element from within the dropdown for an edit type functionality

[Balamurugan P]

Hi Fabio Melendez.

Thanks for using Syncfusion Products. In your code snippet, dropdown list object has been created using $("#perSelect").ejDropDownList("instance") this method, so there is no necessary to use “data (‘ejDropDownList’)” method again. You can achieve your requirement using below code snippet.

Code snippet [JavaScript]:

//create object for ejDropDownList

var dropDown = $("#perSelect").ejDropDownList("instance");

//using ejDropDownList object, we can call selectItemByValue() method

dropDown.selectItemByValue(record.Role);

 

Note: Above code snippet contains “selectItemByValue()“ method. But this method selectItemByValue() name has been changed  as setSelectedValue() in (12.2.0.1) release onwards. So If you are going to use latest version (12.3.0.36) of Essential studio, you need to use “setSelectedValue()” method instead of “selectItemByValue()”, then only it will not throw any exception.

 In (12.2.0.1) release, we have made major changes on API to provide consistent API across all our controls and you can find the API changes from the following link / release notes.

http://help.syncfusion.com/ug/js/default.htm#!documents/apichangesdetails.htm

Our latest version of essential studio is available for download under the following link

http://www.syncfusion.com/forums/117495/essential-studio-2014-volume-3-final-release-v12-3-0-36-available-for-download

You can refer the following common user guide for JavaScript/ASP.NET MVC to know more about getting started with our components. Under each components we have provided “Concepts and features” section which explains about the features of the particular component.

http://help.syncfusion.com/web

You can also refer the following class reference link for JavaScript. Since, 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 have any queries.

Regards,

Balamurugan P

 

 

 

[Fabio Melendez]

How do I unselect the selected item ?

[Fabio Melendez]

The problem I have with this is that after the user selects an item from the dropdown list they can not unselect it, so is there a way to unselect a value?

It appears that the blank field shows up initially, but after the value is selected it will not show anymore.

[Manikandan Mariappan]

Hi Fabio Melendez,

We have analyzed your requirement “I have with this is that after the user selects an item from the dropdown list they cannot unselect it, so is there a way to unselect a value?” We have provided following three methods to unselect the value in dropdownlist control.

1. unselectItemByIndex(indexvalue)

2. unselectItemByText(textvalue)

3. unselectItemByValue(value)

In the following code snippet, we have showcased how to unselect the value in dropdownlist using “unselectItemByValue” method.

 

<script>

    var dropObj;

    $(function () {

        dropObj = $("#bikeList").ejDropDownList('instance');

        //we have three way to unselect the selected value in dropdownlist control

        //unselectItemByText,unselectItemByIndex and unselectItemByValue       

        //we follow the followin script section to use the unselectItemByValue

 

        //un select the value by button click event

        $("#click").click(function () {

            dropObj.unselectItemByValue("Dazzler");

        });

    });

</script>

 

 

We have prepared a simple sample to exhibit this behavior, please find the sample from the following location

Sample Location:  Sample

Please let us know if you have further queries,

Regards

Manikandan Mariappan