Render DropDownLists in a for loop with data filtering

[DoomerDGR8]

I have a view setup the following way:

@for (var i = 0; i < Model.ApprovingRoles.Count; i++)
{
    <div class="col-lg-6">
        @(Html.Kendo().DropDownListFor(m => m.ApprovingRoles[i])
              .Size(ComponentSize.Medium)
              .Rounded(Rounded.Medium)
              .FillMode(FillMode.Outline)
              .OptionLabel("Select " + Model.ApprovingRoles[i].Name)
              .HtmlAttributes(new { style = "width: 100%", required = "required", validationmessage = "Value required" })
              .DataTextField(nameof(SystemUserModel.EmployeeName))
              .DataValueField(nameof(SystemUserModel.Id))
              .Filter(FilterType.Contains)
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                    read.Action("GetUsersByRoleId", "Api").Data(Model.ApprovingRoles[i].Id.ToString());
                  }).ServerFiltering(true);
              })
              .Height(500)
            )
    </div>
}

1. Is this the correct way to display the drop-downs in a loop?
   
2. Each dropdown needs to apply a filter to the GetUsersByRoleId API, and the value is in m.ApprovingRoles[i].Id
   
3. Did I set up the read.Action().Data() correctly?
   

Currently:

• Four dropdowns appear which is correct
  
• They have the correct Option label
  
• They have no data, which should not be the case
  
• I have a breakpoint on the GetUsersByRoleId, and I'm just receiving a 0 for my int roleId parameter.

[DoomerDGR8]

I did some messing around with the .Data() function and came up with this:

read.Action("GetUsersByRoleId", "Api")
        .Data("{roleId:" + Model.ApprovingRoles[i].Id + "}");

And it seems to be working... Is this the recommended way?

[Alexander]

Hi Hassan,

Thank you for sharing your current solution with the community, it is greatly appreciated.

Generally, there is no recommended way to pass additional route parameters, it is rather up to the developer to decide how to pass additional route parameters as per his requirements. Thus, your approach is indeed a valid one as well.

Alternatively, you can also pass any arbitrary route values directly within the .Read() API method of the DataSource as the CRUD methods have an overload for route values as well:

//
// Summary:
//     Defines the fluent interface for configuring the Kendo.Mvc.UI.CrudOperation options.
public abstract class CrudOperationBuilderBase<TCrudOperationBuilder> : IHideObjectMembers where TCrudOperationBuilder : CrudOperationBuilderBase<TCrudOperationBuilder>
{
    protected readonly CrudOperation operation;
    protected readonly ViewContext viewContext;
    protected readonly IUrlGenerator urlGenerator;

    public TCrudOperationBuilder Action(string actionName, string controllerName, object routeValues);

    public TCrudOperationBuilder Action(string actionName, string controllerName, RouteValueDictionary routeValues);

}

Here is an example:

.DataSource(source =>
{
    source.Read(read =>
    {
      read.Action("GetUsersByRoleId", "Home",new { roleId = "2"});
    }).ServerFiltering(true);
})

I hope this helps.

Kind Regards,
Alexander
Progress Telerik