Accessing model fields in editor templates

2 posts, 0 answers
  1. Danny
    Danny avatar
    6 posts
    Member since:
    Jul 2014

    Posted 06 Nov 2014 Link to this post

    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






  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 10 Nov 2014 Link to this post

    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.

     
Back to Top