How to bind DropdownList Value to ViewModel property?

[Jing Ling]

Hi

I am working on MVC project with Syncfusion version 12.1. I have two issues about how to use Syncfusion DropdownList.

(1) I have a country drop down list on my page. The data source is a list of Country class as below:

public class Country

{

    public int CountryID {get;set;}

    public string CountryName {get;set;}

}

And I have a View Model class as below:

public class MyViewModel

{

    public int SelectedCountryID {get;set;}

}

On my page I have a dropdownList as below:

@Html.EJ().DropDownList("SelectedCountryID").Datasource((IEnumerable<Country>)ViewBag.CountryList).DropDownListFields(d => d.ID("CountryID").Text("CountryName").Value("CountryID")).Render()

However when I submit the page, the dropdown only posts back the "CountryName" instead of "CountryID". Could you let me know how to let drop down post back the CountryID?

(2) Can I make width of the dropdown auto-adjust to length of the item inside?

Thank you

Jing

[Harikrishnan P]

Hi Jing,

Query: how to let drop down post back the CountryID?

Sorry for the inconvenience caused. In normal Dropdownlist textbox during the postback, “id” of the selected item specified in the "value" attribute is obtained. But, currently our Dropdownlist control behavior is, during the postback, the value in the Dropdownlist textbox alone is obtained.We have confirmed this (unable to obtain the “id” of the selected item during postback) as bug and a defect report has been logged for this.

 

Query: Can I make width of the dropdown auto-adjust to length of the item inside?

Currently we do not have any property to achieve this behavior (auto adjust dropdown popup width based on the contents inside). We will consider this as bug and a defect report has been logged for this. As a workaround to achieve this behavior we suggest the following method. We need to set the width of Dropdownlist popup to auto, by overriding the class of the same as shown below,

 

<style>

    .e-ddl-popup.e-js {

        width: auto !important;

    }

</style>

 

 

The fix for both the issues mentioned above will be available in our upcoming vol 2 2014 release. We will update you once our vol2 2014 release is rolled out. Please be patience until we get back to you.

 

Please let us know if you have further queries.

Regards,

HariKrishnan.

[Jing Ling]

Hi

Thanks for replying me. I have two other issues if you can help me

(1) I have a DatePicker as follow:

@Html.EJ().DatePicker("DateOfBirth").RoundedCorner(true).Render()

But it does not post back selected date at all. Could you help me to solve this problem?

(2) Also I have a NumericTextBox. It has "," between numbers. Could you let me know how to remove it?

Thanks

Jing 

[Harikrishnan P]

Hi Jing,

Thanks for the update.

Query 1: I have a DatePicker as follow, But it does not post back selected date at all.

We are able to reproduce the specified issue (“unable to get the Date value selected in postback”) and an issue report has been logged for this. Fix for this issue will be available in our upcoming service pack release which is expected to be rolled out by this month end.

This cause for this issue is, “name” attribute is not included in the datepicker input element. We suggest you the following workaround to get the date value selected in postback.

Include the “name” attribute for the datepicker element when the page is ready. Please refer the below code to achieve this,

 

//”name” attribute for the Datepicker element is added in document.ready

 

<script>

    $(function () {

        $("#date").attr("name", "datepicker");

    });

</script>

 

Now in the controller action specify the value of the name attribute, to get the value.

 

    [HttpPost]

        public ActionResult DatePicker(string datepicker)

        {

            string value = datepicker; // value obtained is stored in a variable

            return View();

        }

 

Query: Also I have a NumericTextBox. It has "," between numbers. Could you let me know how to remove it?

 

We would like to let you know that, if the value is retrieved from the numeric textbox only the values will be obtained. “,” (comma) will not be retrieved. Also, currently we have not provided option to hide the “,”. It is the default behavior of the control to show it based upon the value in the numeric textbox.

 

Please let us know if you have further queries,

Regards,

HariKrishnan.

[Jing Ling]

Hi

Thanks for reply. I tried the numeric textbox again and found out the post back value still containing ",". I attached  a sample project. Please let me how to remove the "," inside post back value.

Thanks

Jing

Attachment: SyncfusionMvcApplication3_7f257a72.zip

[Gobalakrishnan S]

Hi Jing,

   We have logged this as a feature request in our database. We will implement this feature in any of our future releases. We usually have an interval of at least three months between releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update you when this feature has been implemented.

As a workaround for this requirement we suggest the below method. Please refer the below steps.

Add the below code block in view page.

 

@using (Html.BeginForm("Test", "Testing", FormMethod.Post, null))

     {

         @Html.EJ().NumericTextbox("numeric").Value("12345").Render()

            @Html.EJ().ScriptManager()

         <input type="submit" onclick="onBtnClick()" value="submit" />

     }

 

Add the below code inside the script tag for removing the separator.

<script type="text/javascript">

    function onBtnClick() {

        var obj = $("#numeric").data("ejNumericTextbox");

        $("#numeric").val(obj.model.value);

    }

</script>

 Add the below code block in Controller Action Result

       [HttpPost]

        public ActionResult Test(string numeric)

        {

            var NumericValue = numeric; //Numeric Text Box value obtained without separator(,)       

            return View("Default");

        }

 

Please let us know if you have further queries,

Regards,

Gobalakrishnan S

[Harikrishnan P]

Hi Jing,

We are glad to announce that our ASP.NET MVC service pack 12.1.0.49 is rolled out successfully and is available to download under the following link:

http://www.syncfusion.com/downloads/mvc-service-packs

Also, the reported issues “unable to get the Date value selected in postback” and “auto adjust dropdown popup width based on the contents inside” has been fixed in this service pack release. But unfortunately, the issue “unable to obtain the “id” of the selected item during postback” is not fixed in this service pack release, due to other high priority tasks. It will be fixed and will be available in our upcoming main release volume 2 2014 which is expected to be rolled out at the end of June month. We will update this thread once this issue is fixed.

We thank you for your support and appreciate your patience in waiting for this service pack release. Please get in touch with us if you would require any further assistance.

Regards,

HariKrishnan.

[Jing Ling]

Hi Jing,

We are glad to announce that our ASP.NET MVC service pack 12.1.0.49 is rolled out successfully and is available to download under the following link:

http://www.syncfusion.com/downloads/mvc-service-packs

Also, the reported issues “unable to get the Date value selected in postback” and “auto adjust dropdown popup width based on the contents inside” has been fixed in this service pack release. But unfortunately, the issue “unable to obtain the “id” of the selected item during postback” is not fixed in this service pack release, due to other high priority tasks. It will be fixed and will be available in our upcoming main release volume 2 2014 which is expected to be rolled out at the end of June month. We will update this thread once this issue is fixed.

We thank you for your support and appreciate your patience in waiting for this service pack release. Please get in touch with us if you would require any further assistance.

Regards,

HariKrishnan.

Hi

Thanks for reply. I installed ASP.NET MVC service pack 12.1.0.49. However I still cannot get the selected date value post back from DatePicker. Could you provide me a working sample so I can see what's wrong with my implementation?

Thank you

Jing

[Sasikala Nagarajan]

Hi Jing,

Sorry for inconvenience caused.

We have prepared the sample based on your requirement in DatePicker Control. Please find the sample from the below location. In the given sample, the selected date is obtained in the form postback and the obtained date value is stored in a variable and displayed in another view page. Please let us know if you have further queries.

DatePicker Sample

Regards,       

Sasikala Nagarajan

[Jing Ling]

Hi Jing,

Sorry for inconvenience caused.

We have prepared the sample based on your requirement in DatePicker Control. Please find the sample from the below location. In the given sample, the selected date is obtained in the form postback and the obtained date value is stored in a variable and displayed in another view page. Please let us know if you have further queries.

DatePicker Sample

Regards,       

Sasikala Nagarajan

Hi Sasikala Nagarajan

Thanks for your help. I now fixed issue about posting back selected date. However I found if I did not select any date, the DatePicker will post back a value "Select Date". Is there anyway I am let DatePicker to post back Null value instead of "select date"?

Thanks

Jing

[Sasikala Nagarajan]

Hi Jing,
Thanks for update.
Sorry for inconvenience caused. We are able to reproduce the specified issue “When user does not select any date from DatePicker ,datepicker will post back the “select date”. So We have confirmed this  issue  as a defect and we have logged a defect report. It will be fixed and will be available in our upcoming main release volume 2 2014  which is expected to be rolled out at the end of June month. We appreciate your valuable patience until then.

Regards,
Sasikala Nagarajan