Telerik Forums / UI for ASP.NET MVC Forum / Grid /

Edit Template and Binding

Telerik UI for ASP.NET MVC
Resources Buy Try

3 posts, 0 answers

Robert Madrian

227 posts

Member since:
Apr 2003
Posted 17 Nov 2016 Link to this post

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>

AfterSave.jpg

BeforeSave.jpg
Konstantin Dikov
Admin

2466 posts

Posted 21 Nov 2016 Link to this post

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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Robert Madrian

227 posts

Member since:
Apr 2003

Posted 21 Nov 2016 in reply to Konstantin Dikov Link to this post

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

Edit Template and Binding

Robert Madrian

Konstantin Dikov

Robert Madrian