Почему поле ввода в моем всплывающем редакторе сетки KendoUI не заполняется? - PullRequest
Новая
       23

Почему поле ввода в моем всплывающем редакторе сетки KendoUI не заполняется?

0 голосов
/ 28 мая 2020

Я использую KendoUI для ASP. NET Core для работы с данными в моем веб-приложении. У меня есть сетка, в которой используется настраиваемый редактор всплывающих окон. Это достигается с помощью следующего кода: 

 @(Html.Kendo().Grid<Sale>()
                    .Name("salesGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.CreatedDate).Format("{0:dd/MM/yyyy}");
                        columns.Bound(p => p.Status).Width(180);
                        columns.Bound(p => p.Seller).Width(150);                            
                    })
                    .ToolBar(toolBar =>
                    {
                        toolBar.Create().Text("Add Transaction");            
                    })                    
                    .Editable(editable => editable.Mode(GridEditMode.PopUp).AdditionalViewData(new { vid = vesselid}).TemplateName("EditSalePopup"))
                    .Pageable()
                    .Sortable()                    
                    .DataSource(dataSource => dataSource
                        .Ajax()                        
                        .PageSize(20)
                        .ServerOperation(false)                        
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.Id).Editable(false);
                            model.Field(p => p.CreatedDate).Editable(false);
                        })
                        .Read(read => read.Action("ReadSales", "Vessel").Data("GetVesselId"))
                        .Update(update => update.Action("UpdateSale", "Vessel"))
                        .Create(create => create.Action("CreateSale", "Vessel").Data("GetVesselId"))
                        .Destroy(destroy => destroy.Action("DeleteSale", "Vessel"))
                    ))

Вы заметите, что в коде редактирования есть как дополнительное значение, которое необходимо передать, так и имя самого шаблона редактора 

.Editable(editable => editable.Mode(GridEditMode.PopUp).AdditionalViewData(new { vid = vesselid}).TemplateName("EditSalePopup"))

vesselId взято из данных просмотра в верхней части моей страницы, значение подтверждено и его можно увидеть. 

@model Vessel     
@{ 
    string vesselid = Model.Id.ToString();
}

Вот код моего настраиваемого редактора, который находится в папке Shared / EditorTemplates 

@model Sale

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="md-form form-group">
                <p>@ViewData["vid"]</p>
                <input type="text" asp-for="VesselId" value="@ViewData["vid"]" />                        
            </div>
        </div>
    </div>
</div>

Идея состоит в том, что когда вы нажимаете add transaction в сетке, вы получаете этот настраиваемый редактор с полем ввода vesselid, заполненным идентификатором судна. Чтобы проверить, что значение передается в редактор, я добавил <p> с viewdata["vid"], и я ясно вижу, что идентификатор передан правильно, однако входные данные ниже не заполняются идентификатором из ViewData всегда показывает 0.

Чтобы исследовать это, я смотрю на ввод в том виде, в каком он был отображен в браузере, и он выглядит следующим образом: 

<input type="text" value="10577" data-val="true" data-val-required="The VesselId field is required." id="VesselId" name="VesselId" data-bind="value:VesselId">

Как вы можете видеть из визуализированного кода, значение есть и правильное но ввод по-прежнему показывает 0. Может ли кто-нибудь помочь мне понять, что здесь происходит не так и почему я не могу использовать идентификатор, как определено?

1 Ответ

0 голосов
/ 29 мая 2020
• 1000

Итак, вы могли бы добавить это поле в модель сетки. Еще одна вещь, которую вы можете сделать, - это обработать событие редактирования сетки и обновить модель или DOM во время редактирования: 

...
.Events(ev =>
{
   ev.Edit("onGridEdit");
})
...


<script type="text/javascript">

    function onGridEdit(e) {
        // Update the grid's model or set the value of a hidden, etc.
        var uid = $(".k-edit-form-container").closest("[data-role=window]").data("uid");
        var model = $("#salesGrid").data("kendoGrid").dataSource.getByUid(uid);
        model.set("VesselId", vesselid);  
    }

</script>

Еще один способ - использовать привязку MVVM .

...