Как показать изменения данных в сетке KendoUI Grid, использующей пакетные обновления? - PullRequest
Новая
       66

Как показать изменения данных в сетке KendoUI Grid, использующей пакетные обновления?

0 голосов
/ 13 июля 2020

Настройка

  • Я использую сетку KendoUI в моем ASP. NET основном веб-приложении.
  • Сетка использует «пакетные обновления» для управления данные в нем.
  • Источник данных сетки - это SQL View, потому что у меня есть некоторые сложности с данными, которые необходимо преодолеть, и SQL представление с легким способом сделать это, что позволяет избежать запросов Linq .
  • Пакетные обновления моей сетки используют пользовательский всплывающий редактор, который я создал.

Код

MyProject / Data / Views / ViewPosition 

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MyProject.Data.Views
{
    [Table("ViewPosition")]
    public class ViewPosition
    {
        //Position
        public int Id { get; set; }
        public int VesselId { get; set; }

        //Charterer Id
        public int? Charterer { get; set; }

        //Charter Name
        public string ChartererName { get; set; }
    }
}

Сетка

Как вы увидите из приведенного ниже кода, который был сокращен для краткости, происходит несколько вещей, первое и наиболее очевидное - сетка использует пакетные обновления. , поэтому изменения вносятся, а затем сохраняются вместе с помощью кнопки «Сохранить изменения».

Во-вторых, я использую специальный редактор всплывающих окон, который называется «TestEditor» для целей этой демонстрации. Это позволяет пользователю изменить «Charterer»

. Сетка вызывает метод в контроллере Positions, который обращается к сервису, предоставляемому через внедрение зависимостей, который смотрит на класс объекта, который привязан к представлению SQL в моем база данных. Это представление связывает Устав (который является Id) с ChartererName. 

@(Html.Kendo().Grid<ViewPosition>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.Name).Title("Name");
        columns.Bound(x => x.ChartererName).Title("Charterer");
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("TestEditor"))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)            
        .ServerOperation(false)
        .Model(model => {
            model.Id(p => p.Id);                
        })
        .Read(read => read.Action("ReadPositions", "Position"))
    ))

/ Positions / ReadPositions 

    public IActionResult ReadPositions([DataSourceRequest]DataSourceRequest request)
    {
        var data = _viewPositionService.GetViewPositions();
        var result = data.ToDataSourceResult(request);
        return Json(result);
    }

/ Views / Shared / EditorTemplates / TestEditor 

@model MyProject.Data.Views.ViewPosition
<div class="container-fluid">
    <div class="row">       
        <div class="col">
            <kendo-dropdownlist name="Charterer" style="width:100%"
                                for="Charterer"
                                datatextfield="ChartererName"
                                datavaluefield="Id"
                                option-label="-- Select --"
                                min-length="3"
                                filter="FilterType.Contains">
                <datasource type="DataSourceTagHelperType.Ajax" page-size="50">
                    <transport>
                        <read url="/Core/ReadCharterers" />
                    </transport>
                </datasource>
                <virtual value-mapper="ChartererValueMapper" />
                <popup-animation>
                    <open duration="300" effects="fadeIn" />
                    <close duration="300" effects="fadeOut" />
                </popup-animation>
            </kendo-dropdownlist>
        </div>      
    </div>
</div>

Проблема

Проблема в том, что когда пользователь редактирует данные, во всплывающем окне отображается Charter в раскрывающемся списке, который можно изменить и обновить. Однако, когда пользовательский редактор всплывающих окон закрывается, хотя Charter, который является Id, изменился, ChartererName остается таким же в самой сетке.

Причина такого поведения в том, что, поскольку я использую представление SQL, необходимо будет снова прочитать источник данных, чтобы сопоставить Charter с ChartererName. Однако, поскольку мы не сохраняем данные немедленно, такой сценарий невозможен и лишает смысла пакетные обновления.

Вопрос

Что можно с этим сделать? Есть ли способ передать потенциальное обновление псевдо источника данных при закрытии всплывающего редактора? Это неправильный подход и есть ли лучший способ сделать это?

...