Accessing model fields in editor templates

[Danny]

Hello,

I am attempting to display a link when you open the editor modal from the Kendo grid on my site. The problem that I have run into is that I can't find a way to access any of the variables from my model, where I need to pull the link from.

Here is my grid code:

@(Html.Kendo().Grid<AttorneyRequestPendingDeterminationViewModel>(Model.AttorneyRequests)
          .Name("attorneyRequestGrid")
          .DataSource(dataSource => dataSource
              .WebApi()
              .Read(read => read.Action("GetPendingDeterminationQueue", "AttorneyRequests"))
              .Model(model => model.Id(p => p.Id))
              .Update(read => read.Action("DecisionsEdit", "AttorneyRequests"))
              .Update(read => read.Type(HttpVerbs.Post))
              .Events(events => events.RequestEnd("onRequestEnd"))
              .AutoSync(true)
          )
          .Columns(columns =>
          {
              columns.Bound(m => m.CreatedDateDisplay).Title("Date Entered");
              columns.Bound(m => m.LocalId).Title("Local ID");
              columns.Bound(m => m.DefendantName).Title("Name");
              columns.Bound(m => m.OffenseCodeDisplay).Title("Offense Code");
              columns.Bound(m => m.EnteredBy).Title("FQ User ID");
              columns.Bound(m => m.InterviewLocation).Title("Interview Location");
              columns.Bound(m => m.Recommendation).Title("Recommendation");
              columns.Command(m => m.Edit()).Title("Actions");
          })
          .Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("DecisionsTemplate"))
          .Deferred()
          )

<script>
    require(['/Content/js/config.js'], function() {
        require(['jquery', 'lib/kendo/kendo.grid.min', 'lib/kendo/kendo.aspnetmvc.min', 'form-inputs', 'form-submit', 'modal'], function($, kendogrid, kendomvc, FormInputs, FormSubmit, Modal) {
            @Html.Kendo().DeferredScriptsFor("attorneyRequestGrid", false)
        });

        function onRequestEnd(e) {
        }
    });    
</script>


And here is DecisionsTemplate.cshtml:

<fieldset>
    <legend>Decisions</legend>
    <p class ="colossal">
        @Html.Label(m => m.Recommendation)
        <input class="text-box single-line" id="Recommendation" name="Recommendation" type="text" value="" disabled />
    </p>
    <p class="colossal">
        @Html.Label(m => m.Decision)
        @Html.Kendo().DropDownListFor(m => m.Decision).BindTo(@ViewBag.Decisions)
    </p>
    <p class="colossal">
        @Html.Label(m => m.EligibilityOverrideReason)
        @Html.Kendo().DropDownListFor(m => m.EligibilityOverrideReason).BindTo(@ViewBag.EligibilityOverrideReasons)
    </p>
    <p class="colossal">
        @Html.Label(m => m.NotEligibleReason)
        @Html.Kendo().DropDownListFor(m => m.NotEligibleReason).BindTo(@ViewBag.NotEligibleReasons)
    </p>
</fieldset>

In the modal, all fields are null, although I can get them to display using @Html.EditorFor, so I feel like there has to be a way for me to access them. I have tried using Javascript, but it appears to not work in the template. Are there any workarounds for this problem? I'd be happy to supply any further code or information you might need from me.

Thanks,
Danny

[Atanas Korchev]

Hi Danny,

Indeed the editor template is populated at the client-side hence the Model server-side property isn't available. The recommended approach is to use the edit event of the grid and populate the UI there. The model and its properties are available in the event arguments. Here is a quick demo:

@(Html.Kendo().Grid()
   .Events(e = >e.Edit("grid_edit"))

<script>
function grid_edit(e) {
  var editForm = e.container;
  var model = e.model

   editForm.find("#label_id").text(model.Title);
}
</script>

Regards,
Atanas Korchev
Telerik