Custom edit with kendo Window and kendo.bind?

3 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    227 posts
    Member since:
    Apr 2003

    Posted 17 Nov 2016 Link to this post

    Hi,

    I want to use my own Editor (PartialView) to edit row's from my Kendo MVC grid
    (not use the build in template editing because off the limitations with the layout like save and cancel button location etc.)
    attached you can see a Picture off my editing form (it uses i.e also Kendo Toolbar with save button...)

    My question is: what is the best approach to implement this?

    I have found two possibilities to solve this but not sure if these are good Solutions:

    1. Load the PartialView with the Kendo window without binding to the grid data but select the data in the Controller and use that model binding
      window.refresh({
              url: "/Mitglied/Fachgruppenzugehoerig/_Edit/",
              data: {
                  mitgliedid: dataitem.Mitglied_ID,
                  berechtigungid: dataitem.Berechtigung_ID,
                  sparteid: dataitem.Sparte_ID,
                  fachgruppeid: dataitem.Fachgruppe_ID,
                  fachgruppesubid: dataitem.FachgruppeSub_ID,
                  fachgruppeversionid: dataitem.Fachgruppe_Version_ID,
                  berufsgruppeid: dataitem.Berufsgruppe_ID,
                  berufsgruppeversionid: dataitem.Berufsgruppe_Version_ID
              }

    in the partial view I use normal razor Syntax to bind to the model:

    ...
    <div>
    <label class="col-sm-3 control-label">Rechtsw.datum:</label>
        <div class="col-sm-4">
        @(Html.EditorFor(m => m.Rechtswirksamkeitsdatum, ""))
        @Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
    </div>

    with this approach i have to refresh the grid after data changes...

    2. Load the PartialView with the Kendo window and use "Kendo.bind" to bind the controls to the valus of the Kendo grid:

    var grid = $("#grid").data("kendoGrid");
    var dataItem = grid.dataItem(grid.select());
    kendo.bind($('#externaleditor'), dataItem);

    here in the partial view I use different razor Syntax to bind to the grid values (see data_bind = "value: Rechtswirksamkeitsdatum") :

    <label class="col-sm-3 control-label">Rechtsw.datum:</label>
                    <div class="col-sm-4">
                        @(Html.TextBox("Rechtswirksamkeitsdatum", "", new { data_bind = "value: Rechtswirksamkeitsdatum", @class = "k-textbox" }))
                        @Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
                    </div>

     

    robert

     

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 21 Nov 2016 Link to this post

    Hi Robert,

    Although this could be done, I would recommend using the built-in template system instead. In case the buttons need to be re-positioned I suggest using the Grid's edit event handler to move them around using jQuery.

    Regards,
    Alexander Popov
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Robert Madrian
    Robert Madrian avatar
    227 posts
    Member since:
    Apr 2003

    Posted 21 Nov 2016 in reply to Alexander Popov Link to this post

    Hi,

    I use the built-in template System now and set the Buttons hidden to use Kendo Toolbar with save/cancel button...

    .k-edit-form-container .k-edit-buttons {
         visibility: hidden;
     }
Back to Top