We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DropDownListFor does not work with Template

Thread ID:

Created:

Updated:

Platform:

Replies:

118516 Mar 16,2015 09:28 AM UTC Mar 27,2015 06:38 AM UTC ASP.NET MVC 10
loading
Tags: DropDownList
Jimmy Soh
Asked On March 16, 2015 09:28 AM UTC

Hi

I want to DropDownListFor with template, but when I include a template the selected Text and value is not updated.
Can I know if DropDownListFor work with template? Below is my code

Controller

            DropDownListProperties ddl = new DropDownListProperties();
            ddl.DataSource = db.PageBanners.ToList();
            DropDownListFields ddf = new DropDownListFields();
            ddf.Value = "i_banner_id";
            ddl.Template = "<img class='eimg' src='/Banner/${u_image}' width='100px' /><div class='customalign'><div class='ename'> ${u_title} </div></div>";
            ddl.DropDownListFields = ddf;

            ViewData["BannerDDL"] = ddl;

View

 @Html.EJ().DropDownListFor(model => model.i_banner_id, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["BannerDDL"]).Width("250px")

Thank you!

Saranya Sivakumar [Syncfusion]
Replied On March 17, 2015 12:02 PM UTC

Hi Jimmy,

Thanks for using Syncfusion products.

We would like to let you know that, DropDownListFor control will work well with template. We can use any template in the DropDownListFor control. For your convenience we have prepared the sample with the image and title as you have given in the update. Please download the sample from the following location.

http://www.syncfusion.com/uploads/user/forum/118516/DDL_For_value-644783507.zip

Also the value gets reflected and updated in the DropDownListFor control if we give the value that is binded in the fields of the DropDownListFor control as shown in the following code snippet.

[Controller]

cars.Add(new Books { text = "Louis", value = "Louis", eimg = "7", desig = "Representative", country = "Australia" });

We have to give the value which we have binded in the DropDownListFor fields.

Please check with the sample. If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. Please let us know the Essential Studio version which you are using. This would be helpful for us to serve you better.

Please let us know if you have further concern.

Regards,

Saranya.S


Jimmy Soh
Replied On March 17, 2015 01:27 PM UTC

Hi Saranya.S

Thanks for the sample. I will take a look and try out.


Jimmy

Jimmy Soh
Replied On March 18, 2015 08:16 AM UTC

Hi Saranya

Still not  working. Attach is the code I modify based on your sample.
What I want to achieve here is to show the banner  with image on the dropdown list. When user selected a banner and post, it will update the Page table BannerID(int) field.
The version of Syncfusion dll I am using is 12.4450.0.24
Thanks for your help.

Saranya Sivakumar [Syncfusion]
Replied On March 18, 2015 04:22 PM UTC

Hi Jimmy,

Thanks for your update.

We would like to let you know that, in order to get the banner id as value, we have to map the ‘bannerId’ column to text field in dropdown control and get the same value with using same model while postback as shown in the following code snippet.

<code>

[cs]

publicActionResultIndex()

{

DropDownListPropertiesDropdownProperties =newDropDownListProperties();

DropdownProperties.DataSource = GetDataSource();

DropdownProperties.Template ="<img class='eimg' src='/images/Employees/${eimg}.png' alt='employee' width='100px'/><div class='ename'> ${bannerId} </div>";

DropDownListFieldsddlfields =newDropDownListFields();

ddlfields.Text ="bannerId";

DropdownProperties.DropDownListFields = ddlfields;

ViewData["DropdownModel"] = DropdownProperties;

returnView();

}

[HttpPost]

publicActionResultRegister(Booksmodel)

{

returnView(model);

}</code>

In the view page we have to map the text value as shown in the following code snippet.

<code>

[view]

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

</code>

For your convenience we have modified the sample, please download the sample from the following location.

http://www.syncfusion.com/downloads/support/directtrac/135838/DDL_For_value259511479.zip

Please let us know if you have further concern.

Regards,

Saranya.S


Jimmy Soh
Replied On March 19, 2015 04:16 AM UTC

Hi Saranya

Thank you for the reply with sample.
In the sample code, you have change the bannerID from int to string with the name stored as the value and use it to display on the dropdown template.
But in real life programming, most of the database structure does not work in that way.

In most case, the list use for dropdown usually retrive from another database table with ID ( auto increase int field - primary key) and a text description show on the dropdown. When user select the item, the ID is then updated to the model's foreignkey field.

Your DropdownFor work with .Text and .Value well on the above example if without using template. but once using tample to show the image, it will not work unless we change the database structure.

May I suggest that you look into enhancing the template with  DropdownFor feature so that it will work in most of the real life cases with database table.

Thank you

Saranya Sivakumar [Syncfusion]
Replied On March 20, 2015 01:09 PM UTC

Hi Jimmy,

Thanks for your update.

We would like to let you know that, we have modified the sample by changing “bannerId” to the int field as per your requirement. We have to map the “bannerId” to the value field and the “name” to the text field in which you can able to get the text “name” to display and get the value “bannerId” in the form postback since value will be posted in the form postback.

We have modified the sample to achieve your requirement, please download the sample from the following location.

http://www.syncfusion.com/uploads/user/forum/118516/DDL_For_value_(2)1315018977.zip

Please let us know if you have further concern.

Regards,

Saranya.S


Jimmy Soh
Replied On March 26, 2015 02:58 AM UTC

Hi Saranya.S

Thanks for your help. Finally managed to get it work. 
but now I face another problem. I also have DatePickerFor that previously will show the date from from the database but now not showing.
And if I run it on Firefox, it does shows after I hit the browser's refresh button.
I have attached the code here for your review.

Thank you.

Attachment: DDL_For_value_44a04c77.zip

Saranya Sivakumar [Syncfusion]
Replied On March 26, 2015 07:33 AM UTC

Hi Jimmy,

Thanks for using Syncfusion products.

We would like to let you know that, the reported issue (Datetime value is not set for a DatePickerFor control) is a known issue in 12.4.0.24 version. This issue has been fixed and included in our latest service pack release (12.4.0.34) of Vol 4, 2014 and it is available for download under the following link location.

http://www.syncfusion.com/forums/118366/essential-studio-2014-volume-4-service-pack-2-release-v12-4-0-34-available-for-download

Kindly upgrade to the latest version to resolve the issue.

Please let us know if you have further queries.

Regards,

Saranya.S


Jimmy Soh
Replied On March 27, 2015 01:43 AM UTC

Great! Its working now. Thanks!!

Saranya Sivakumar [Syncfusion]
Replied On March 27, 2015 06:38 AM UTC

Hi Jimmy,

Thanks for your update.

Please let us know if you have further concern.

Regards,

Saranya.S

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;