Как получить доступ к значению элемента ввода в редакторе всплывающих окон сетки KendoUI? - PullRequest
Новая
       24

Как получить доступ к значению элемента ввода в редакторе всплывающих окон сетки KendoUI?

1 голос
/ 10 июля 2020

Это должно быть просто, но доказывает, что это не так. У меня есть KendoUI Grid со специальным редактором всплывающих окон. Когда всплывающее окно открывается, оно предварительно заполняет пару входных данных из модели некоторыми идентификаторами. Я хочу получить доступ к этой информации, используя Jquery, но, похоже, не могу ничего вернуть.

Моя сетка 

@(Html.Kendo().Grid<ViewPosition>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.Name).Title("Name");
        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("ReadPositions", "Position")
        ))

Редактор тестов 

@model Position    
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <label asp-for="Id"></label>
            <input type="text" asp-for="Id" />
        </div>
        <div class="col">
            <label asp-for="VesselId"></label>
            <input type="text" asp-for="VesselId" />
        </div>
    </div>        
</div>

Jquery

Это мой сценарий, который пытается получить доступ к вводу VesselId. Обычно я просто делаю что-то вроде: 

let id = $('#VesselId').val();

Однако этот подход не работает, в основном потому, что он фактически создается динамически. Итак, я попытался помочь jquery, но углубился в само окно, чтобы найти значение. Однако мне все еще не удается его получить.

Вот мой сценарий: 

function GetVesselIdPopup() {
    var uid = $(".k-edit-form-container");
    var input = uid.find('#VesselId');
    console.log(input)
}

Вот объект, который возвращается под input

{…}
​0: <input id="VesselId" type="text" data-val="true" data-val-required="The VesselId field is required." name="VesselId" value="" data-bind="value:VesselId">    ​
length: 1    ​
prevObject: Object { 0: div.k-edit-form-container
, length: 1, prevObject: {…} }    ​
<prototype>: Object { jquery: "3.4.1", constructor: k(e, t), length: 0, … }

Вы заметите, что из-за динамической c природы поля ввода value имеет значение null, несмотря на значение, отображаемое во входных данных. Это означает, что мне нужно получить значение откуда-то еще, глядя на объект, есть поле с именем value с идентификатором в нем, однако я не могу получить к нему доступ. 

{…}​
0: input#VesselId
    value: "17383"

Кто-нибудь может помочь?

1 Ответ

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

Попробуйте перехватить событие редактирования сетки в коде настройки сетки следующим образом: 

.Events(e => e.Edit("onEdit"))

Затем в обработчике событий: 

<script>
    function onEdit(e) {
        var inputVal = e.container.find("input[name='VesselId']").val();       
    }
</script>
...