Custom edit with kendo Window and kendo.bind?

[Robert Madrian]

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

 

[Alexander Popov]

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

[Robert Madrian]

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;
 }