DropDownListfor - id / text and validation

[Egi Žaberl]

Hi!

I am trying to achieve the same functionality with EJ().DropDownListFor as with Html.DropDownListFor but with no luck.
When creating new user i want to show a drop down list with companies and wattermark text ("empty" default value as "--- Select Company ---"). When user clicks on a save button client validation must occur if user did not select any company.
With Html.DropDownListFor code works fine.

In model i have this line (one of them):
[Display(Name = "UserIdCompany", ResourceType = typeof(Resources.ModelResources))]
[Required(ErrorMessageResourceType = typeof(Resources.ModelResources), ErrorMessageResourceName = "ErrorUserIdCompany")]
public int IdCompany { get; set; }

In controller i have specified this:
[HttpGet]
public ActionResult New()
{
    var data = new UserNew()
    {
        Companies = new CompaniesDb().GetAll(),
    };   
    ViewData["userCompany"] = GetCompaniesDropdown(data.Companies);
    return View(data);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult New(UserNew data)
{
    data.Companies = new CompaniesDb().GetAll();
    ViewData["userCompany"] = GetCompaniesDropdown(data.Companies);
    var user = new Users
    {
        Active = data.Active,
        FullName = data.FullName,
        IdCompany = data.IdCompany   
    };
    if (ModelState.IsValid)
    {
        UsersDb db = new UsersDb();
        db.Create(user);
    }
    else
    {
        return PartialView("_New", data);
    }
}

private DropDownListProperties GetCompaniesDropdown(IEnumerable<Companies> data)
{
    DropDownListProperties ddp = new DropDownListProperties();
    ddp.DataSource = data;
    ddp.EnableFilterSearch = true;
    ddp.WatermarkText = Resources.PageResources.DefaultValueCompanies;
    ddp.Width = "100%";

    DropDownListFields df = new DropDownListFields();
    df.Text = "Name";
    df.Id = "Id";
    df.Value = "Id";
    ddp.DropDownListFields = df;

    return ddp;
}

In view i have this (not working as supposed):
@Html.EJ().DropDownListFor(m => m.IdCompany, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["userCompany"])
@Html.ValidationMessageFor(m => m.IdCompany)

Dropdown is loaded but it shows 0 in text when closed and not watermark text as it supposed to. When expanded, it shows companies by it's Name (this is O.K.). When company selected, validation shows "invalid data - company must be type of integer" and so i cannot post form because of invalid data.
If i post form without selecting company (with 0), validation occurs (this is O.K.) and page reloads with filled form fields except EJ().DropDownListFor - it shows no data and also it looses it's styling and look like old-school html input field.

This works (page shows dropdown with Name in text and Id in value param):
@Html.DropDownListFor(
    m => m.IdCompany,
    new SelectList(Model.Companies, "Id", "Name"),
    Resources.PageResources.DefaultValueCompanies
)
@Html.ValidationMessageFor(m => m.IdCompany)

Please help me and tell me what am i doing wrong.

Regards, Egi

[Kasithangam C]

Hi Egi,

Thanks for contacting Syncfusion Support.

Query 1:  i want to show a drop down list with companies and wattermark text ("empty" default value as "--- Select Company ---"). When user clicks on a save button client validation must occur if user did not select any company.

We have prepared the sample based on your requirement and please refer to the following sample:

Sample: Sample

In this sample, we have passed DB data to the Datasource property of dropdownlist and set the dropdownlist properties in the server side as shown below code:

<code>

  public ActionResult Index()

        {

            DropDownListProperties ddp = new DropDownListProperties();

            ddp.DataSource = getMakes();

            ddp.EnableFilterSearch = true;

            ddp.WatermarkText = "--- Select Company ---";

            ddp.Width = "100%";

            DropDownListFields df = new DropDownListFields();

            df.Text = "LastName";

            df.Id = "EmployeeID";

            df.Value = "LastName";

            ddp.DropDownListFields = df;

            ViewData["userCompany"] = ddp;

            return View();

          

        }

public List<Make> getMakes()

        {

            var ds = new DataClasses1DataContext();

            List<Make> data = new List<Make>();

            data = (from ord in ds.Employees

                    select new Make

                    {

                        EmployeeID = ord.EmployeeID,

                        LastName = ord.LastName

                    }).ToList();

            return data;

        }

</code>
Could you please check with the above sample? If still see the same issue, please modifying the sample based on your application along with replication procedure and send it back to us.

Query 2: page reloads with filled form fields except EJ().DropDownListFor - it shows no data and also it looses it's styling and look like old-school html input field.

To render the controls kept inside partial view, we need to refer script manager in the partial view in which the controls are present. Then the control will be rendered properly. Please refer to the below code:

<code>

@(Html.EJ().ScriptManager())

</code>

Please let us know if you need any further assistance.                                    

Regards,

Kasithangam.

[Egi Žaberl]

Hi!

Thank you for your answer! I have managed to build a working dropdown based on your sample. I had to change field type in my view model from int to string and all other relations to that field. Now dropdown shows wattermark and validation works as supposed to.

Changed from:
[Display(Name = "UserIdCompany", ResourceType = typeof(Resources.ModelResources))]
[Required(ErrorMessageResourceType = typeof(Resources.ModelResources), ErrorMessageResourceName = "ErrorUserIdCompany")]
public int IdCompany { get; set; }

To:
[Display(Name = "UserIdCompany", ResourceType = typeof(Resources.ModelResources))]
[Required(ErrorMessageResourceType = typeof(Resources.ModelResources), ErrorMessageResourceName = "ErrorUserIdCompany")]
public string Company { get; set; }

And thank you for your "hint" about @(Html.EJ().ScriptManager())

[Ezhil S]

Hi Egi,

Thanks for your update.

We are glad that provided solution helped you to resolve the issue at your end.

Let us know if you need further assistance.

Regards,
Ezhil S