Render DropDownLists in a for loop with data filtering

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 over there.

I figured out that it is pretty easy to provide a parameter or parameters to the API call:

read.Action("GetUsersByRoleId", "Api", new { roleId = Model[index].Id });