This is a migrated thread and some comments may be shown as answers.

Accessing model fields in editor templates

1 Answer 1134 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 06 Nov 2014, 08:43 PM
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






1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 Nov 2014, 04:33 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Danny
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or