DropDownList vs DropDownListFor

[William Wong]

In my MVC projects I find that DropDownList works while DropDownListFor is not, e.g.

@(Html.EJ().DropDownList("ABC")
                        .Width("100%")
                        .Datasource(Model.GetABCList().ToList())
                        .DropDownListFields(f => f.ID("Id"))
                        .DropDownListFields(f => f.Value("Value"))
                        .DropDownListFields(f => f.Text("Text"))
                        .AllowMultiSelection(true)
                        .ShowCheckbox(true)
                    )

creates a dropdown and a proper list for selection; but

@(Html.EJ().DropDownListFor(x => x.ABC)
                        .Width("100%")
                        .Datasource(Model.GetABCList().ToList())
                        .DropDownListFields(f => f.ID("Id"))
                        .DropDownListFields(f => f.Value("Value"))
                        .DropDownListFields(f => f.Text("Text"))
                        .AllowMultiSelection(true)
                        .ShowCheckbox(true)
                    )

creates an empty dropdown without any item and the width is not set neither. I also encounter similar cases on other xxxFor controls. Am I doing something wrong? BTW, by monitoring the network traffic I think the value posted to the server are in fact from the "Text" field although I have specified both the ID and Value fields.

[Saranya Sivakumar]

Hi William,

Thanks for your update.

Query: DropdownlistFor creates an empty dropdown without any item and the width is not set neither

We have analyzed the reported issue (DropdownlistFor creates an empty dropdown without any item and the width is not set neither) with the sample in the version 13.1.0.30. We suspect that the issue may occur since you have defined the properties of the DropdownlistFor control in the builder itself.

You need to get the model from Controller/Action Result and assign the model properties to the DropdownlistFor control as shown in the following code example.

<code>

@Html.EJ().DropDownListFor(model => model.Company, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["DropdownModel"]) </code>

Pass the model class from the Action Result and set the DropdownlistFor properties that you like to assign to the DropdownlistFor control as shown in the following code snippet.

<code>

public ActionResult DropdownlistFeatures()

        {

            DropDownListProperties DropdownProperties = new DropDownListProperties();

            DropdownProperties.DataSource = GetDataSource();

            DropdownProperties.Width="100%";

            DropdownProperties.AllowMultiSelection = true;

            DropdownProperties.ShowCheckbox = true;

            DropDownListFields DropdownFields = new DropDownListFields();

            DropdownFields.Text = "Text";

            DropdownFields.Id = "UniqueKey";

            DropdownFields.Value = "Company";

            DropdownProperties.DropDownListFields = DropdownFields;

            ViewData["DropdownModel"] = DropdownProperties;

            return View();

         }

</code>

Also we are having an UG documentation of explaining the Server side validation and the documentation link is given below.

http://help.syncfusion.com/ug/js/Documents/serversidevalidation.htm

Query: I think the value posted to the server are in fact from the "Text" field although I have specified both the ID and Value fields.

We were able to reproduce the problem (Text is only posted and the value is not posted) and we have logged a report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let me know if you have any questions.

Regards,

Saranya.S

[William Wong]

Thank you very much for your prompt reply! Another minor issue I encountered with DropDownList is the WatermarkText: DropDownList would not show the WatermarkText if multiselection is enabled. Finally is it possible to enable user to enter text if incremental search is enabled? For example, shown below is another project I did using jQuery and chosen, I have also extended it to add new items at runtime when user pressed the enter key.

[Saranya Sivakumar]

Hi William,

Thanks for your update.

Query: Dropdownlist watermarktext not working when AllowMultiSelection is enabled.

We were able to reproduce the problem (Dropdownlist watermarktext not working when AllowMultiSelection is enabled.) and we have logged a report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Query: Allow user to enter text and to add new text if it is not present in the suggestion list.

In order to allow user to enter text you can use EJ Autocomplete control. In Autocomplete we are having an API called “AllowAddNew” which is used to allow or restrict our Autocomplete control from adding new item to the list. It accepts Boolean value. By default, the value of “AllowAddNew” property will be “false”. We have to set it as true in order to add new text in the Autocomplete control. Also we are having an API called “AddNewText” which is used to add new item to the list items. It accepts String value. By default, the value of “AddNewText” API will be “Add New”. We can change it accordingly as shown in the following code snippet.

<code>

@Html.EJ().Autocomplete("visualmode").Datasource((IEnumerable<CarsList>)ViewBag.datasource).Width("225").MultiSelectMode(MultiSelectModeTypes.VisualMode).AllowAddNew(true).AddNewText("Enter new text")

</code>

Note: AddNewText can only be used in the Visual mode only.

We are having a Knowledge base documentation and the documentation link can be found below.

http://www.syncfusion.com/kb/4763/how-to-add-text-dynamically-in-the-autocomplete-control-when-it-is-not-present-in-the-suggestion-list

For your convenience we have prepared the sample based on your requirement and the same can be downloaded from the following location.

http://www.syncfusion.com/uploads/user/forum/119412/ze/AutocompleteAddText1301420667844

Please let me know if you have any questions.

Regards,

Saranya.S