DropDownListFor does not work with Template

[Jimmy Soh]

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]

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]

Hi Saranya.S

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

Jimmy

[Jimmy Soh]

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]

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]

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]

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]

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]

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]

Great! Its working now. Thanks!!

[Saranya Sivakumar]

Hi Jimmy,

Thanks for your update.

Please let us know if you have further concern.

Regards,

Saranya.S