Pass model value on Read action on DropDownFor

[Carolyn]

I have a popup editor configured on a grid.  In the editor template, I have a dropdownfor with a Read action.  I need to pass the model value to the read action but it is not recognized.  Can you help?

Here is the editor template:

@model Procurement.Models.Pipe
<style>
    .k-edit-form-container {
        width: auto;
    }
</style>
<div class="panel" style="padding:5px;">
  
  
    @Html.HiddenFor(m => m.MaterialId)
    @Html.HiddenFor(m => m.PcsPartNum)
    @Html.HiddenFor(m => m.OuterDiameter, new { id="OD", name="OD"})
    <table>
        <tr><td colspan="2" align="center"><h4 class="text-info"> Pipe Details</h4></td></tr>
        <tr><td colspan="2" align="center"> <hr /></td></tr>
        <tr>
            <td width="30%">PCS Part Num</td>
            <td>@Html.TextBoxFor(m => m.PcsPartNum, new { ReadOnly = "true" })</td>
        </tr>
        <tr>
            <td>Description</td>
            <td>@Html.TextAreaFor(m => m.Description, new { ReadOnly = "true", TextMode = "MultiLine", Rows = "3", Cols = "500" })</td>
        </tr>
        <tr>
            <td>Sort Order</td>
            <td>@Html.TextBoxFor(m => m.Materials_Group.SortOrder, new { ReadOnly = "true" })</td>
        </tr>
        <tr>
            <td>Unit</td>
            <td>@Html.TextBoxFor(m => m.Materials_Group.Unit, new { ReadOnly = "true" })</td>
        </tr>
        <tr><td colspan="2"><hr /></td></tr>
        <tr>
            <td colspan="2" align="center">
                <table>
                    <tr>
                        <td class="text-info" width="30%">Client Part Num</td>
                        <td colspan="2">@Html.EditorFor(m => m.ClientPartNum)</td>
                    </tr>
                    <tr>
                        <td class="text-info">Additional Info</td>
                        <td colspan="2">@Html.TextAreaFor(m => m.AdditionalInfo, new { TextMode = "MultiLine", Rows = "3", Cols = "500" })</td>
                    </tr>
                    <tr><td colspan="2" align="center"><h5 class="text-info">Properties</h5></td></tr>
                    <tr>
                        <td class="text-info">Outer Diameter</td>
                        <td>@Html.DisplayFor(m=>m.OuterDiameter, new { style="width:100px;id:tbOD"})</td>
                        <td>@(Html.Kendo().DropDownListFor(m => m.OuterDiameter)
                            .Name("OuterDiameter")
                            .DataValueField("Text")
                            .DataTextField("Value")
                            .DataSource(ds =>
                            {
                                ds.Read(read =>
                                {
                                    read.Action("GetPipeOD", "Materials", new { od = m.OuterDiameter }); <<<<<< Here is where the model value needs to be sent >>>>>>>
                                });
                            })
                            .HtmlAttributes(new { style="width:100px"})
                            //.Events(e =>
                            //{
                            //    e.Change("onChange").Select("onSelect");
                            //})
                            )
                       </td>
                    </tr>
                    <tr>
                        <td class="text-info">Wall Thickness</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="text-info">Specification</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="text-info">Grade</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="text-info">Seam Type</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="text-info">Coating 1</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="text-info">Coating 2</td>
                        <td colspan="2"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

[Dimitar]

Hello Carolyn,

In order to pass additional parameters with the read request of the DataSource, the Data() method could be used:

.DataSource(source => {
  source.Read(read =>
  {
    read.Action("GetPipeOD", "Materials").Data("additionalReadData");
  });
})

<script>
  function additionalReadData(e) {
    var odValue = '@Model.OuterDiameter';
    return {
      od: odValue
    }
  }
</script>

Regards,
Dimitar
Progress Telerik

[Carolyn]

Hi Dimitar,

Thank you for responding.  I did try using .Data() but the value was still 0.  It seems the model is still empty when the script fires.

[Dimitar]

Hello Carolyn,

This should not be the case, as the script will fire once the page is already loaded. Thus, the model should be successfully populated.

Please make sure that the correct parameter is being passed in the remote end-point. For example, with the snippet from my previous reply, the method definition should be similar to the following:

public ActionResult GetPipeOD(int od)
{
   ...
}

In case the issue continues to persist, you could share an isolated solution(with dummy data), so that I am able to inspect the exact configuration and advise you further.

Regards,
Dimitar
Progress Telerik