Edit Template and Binding

[Robert Madrian]

Hi,

I use a Edit Template for the popup edit in my grid and it works fine except that if I change something and click save without closing the window the changes from the database (there are some computed columns) are reflecting in the grid but not in the popup - why?
(see also attached Pictures BeforeSave.jpg and AfterSave.jpg)

Isn't the popup window bind with MVVM in two way binding so changes in the grid should reflect in the window?

Robert

here is the html for the Template

<div class="container-fluid">
    <div class="form-horizontal" style="width:750px" id="formFachgruppenzugehörig" name="formFachgruppenzugehörig">
        @(Html.HiddenFor(m => m.Mitglied_ID, ""))
        @(Html.HiddenFor(m => m.Berechtigung_ID, ""))
        @(Html.HiddenFor(m => m.Sparte_ID, ""))
        @(Html.HiddenFor(m => m.Fachgruppe_ID, ""))
        @(Html.HiddenFor(m => m.FachgruppeSub_ID, ""))
        @(Html.HiddenFor(m => m.Fachgruppe_Version_ID, ""))
        @(Html.HiddenFor(m => m.Berufsgruppe_ID, ""))
        @(Html.HiddenFor(m => m.Berufsgruppe_Version_ID, ""))
        @(Html.HiddenFor(m => m.RowVersion, ""))
        @(Html.HiddenFor(m => m.Timestamp, ""))


        <div class="row p-h-xs">
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Sparte:</label>
                <div class="col-sm-9">
                    <p class="gpdbform-control-static">
                        <span class="label label-success pull-right">@(Html.ValueFor(m => m.Sparte_ID, ""))</span>
                        <span data-bind="text: Sparte"></span>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Fachgruppe:</label>
                <div class="col-sm-9">
                    <p class="gpdbform-control-static">
                        <span class="label label-success pull-right">@(Html.ValueFor(m => m.Fachgruppe_ID, ""))</span>
                        <span data-bind="text: Fachgruppe"></span>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Berufsgruppe:</label>
                <div class="col-sm-9">
                    <p class="gpdbform-control-static">
                        <span class="label label-success pull-right">@(Html.ValueFor(m => m.Berufsgruppe_ID, ""))</span>
                        <span data-bind="text: Berufsgruppe"></span>
                    </p>
                </div>
            </div>
            <hr class="light"/>
            <div class="form-group m-xxs">
                <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>
                <label class="col-sm-4 control-label">Hauptbetreuende Fachgruppe:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Hauptbetreuung, ""))
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">gelöscht:</label>
                <div class="col-sm-4">
                    @(Html.EditorFor(m => m.gelöscht, ""))
                    @Html.ValidationMessageFor(model => model.gelöscht)
                </div>
                <label class="col-sm-4 control-label">Hauptgewerbe:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Hauptgewerbe, ""))
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Aktuell:</label>
                <div class="col-sm-4">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Aktuell, ""))
                        </label>
                    </div>
                </div>
                <label class="col-sm-4 control-label">Hauptgremium:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Hauptgremium, ""))
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group m-xxs">
                <div class="col-sm-6">
                </div>
                <label class="col-sm-5 control-label">Nebengremium:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Nebengremium, ""))
                        </label>
                    </div>
                </div>
            </div>
            <hr class="light"/>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label"><small class="text-muted">angelegt:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-format="dd.MM.yyyy hh:mm:ss" data-bind="text: angelegt"></span></small>
                    </p>
                </div>
                <label class="col-sm-3 control-label"><small class="text-muted">Mitglied_ID:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-bind="text: Mitglied_ID"></span></small>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label"><small class="text-muted">geändert:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-format="dd.MM.yyyy hh:mm:ss" data-bind="text: geändert"></span></small>
                    </p>
                </div>
                <label class="col-sm-3 control-label"><small class="text-muted">Berechtigung_ID:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-bind="text: Berechtigung_ID"></span></small>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label"><small class="text-muted">Benutzer:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-bind="text: Benutzer"></span></small>
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>

[Konstantin Dikov]

Hi Robert,

The built-in popup of the Grid will be closed when you try to save the changes, so I am assuming that you are using an entirely custom partial view for the editing and not a template for the built-in PopUp editing. If that is the case, please ensure that you close the popup after you initiate the saving, because once the grid is saves, the returned data items will not be the same as prior to the saving, which is causing the issue in your scenario.

On a side note, the binding is indeed two-way binding and this could be tested easily if you change a value for some data item (directly in the data source), but once the data items are re-created after the saving, the two-way binding will be lost:

$("#grid").data("kendoGrid").dataSource.data()[0].set("ProductName", "changed value")

If further questions arise on this matter, please feel free to contact us again.


Regards,
Konstantin Dikov
Telerik by Progress

[Robert Madrian]

I have solved this with a call to kendo.bind($(form name), dataItem); in the DataBound Event, so that changes in the grid will be shown in the form...
robert