How to I access the value of an input element in a KendoUI Grid Popup editor?

Question

This is something that should be simple but is proving that it's not. I have a KendoUI Grid with a custom popup editor. When the popup opens it prepopulates a couple of inputs from the model with some ids. I want to access that information using Jquery and yet I cannot seem to get anything back.

My grid

@(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")
        ))

Test Editor

@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

This is my script that attemps to access the VesselId input. Typically I would just do something like:

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

However, this approach doesn't work, mainly because this is effectively dynamically created. So I tried to help jquery but drilling down into the actual window itself to find the value. However I'm still not managing to get it.

Here is my script so far:

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

Here is the object that is returned under 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, … }

You'll notice that, due to the dynamic nature of the input box that the value is null, despite the value showing in the input. So that means I need to get the value from somewhere else, looking at the object there is a field called value with the ID in it, however, I can't seem to access it.

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

Can anyone help?

What do you mean `looking at the object`? Is it the HMTL input instead of a jQuery object wih that input? In that case, this should work: ` uid.find('#VesselId')[0].value` , see [this](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — GaloisGirl, Jul 10 '20 at 12:57

score 0 · Answer 1 · answered Jul 10 '20 at 18:23

Try hooking the edit event of the grid in your grid setup code like so:

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

Then in the event handler:

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

How to I access the value of an input element in a KendoUI Grid Popup editor?

1 Answers1