Get row data from editor template?

2 posts, 0 answers
  1. Joseph
    Joseph avatar
    1 posts
    Member since:
    May 2016

    Posted 27 Sep 2018 Link to this post

    I'm working on a kendo grid and I'm having some trouble on a use case I feel like should be pretty straight forward but I can't seem to figure out so apologies if I'm missing something obvious. Basically I have a grid that has two dropdowns using editor templates and two number values, looks something like this:

    @(Html.Kendo().Grid(Model.gridModel)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Type).Width(200).EditorTemplateName("TypeDropDownList");
            columns.Bound(c => c.SubType).Width(150).EditorTemplateName("SubTypesDropDownList");
            columns.Bound(c => c.ArgOne).Width(50);
            columns.Bound(c => c.ArgTwo).Width(50);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(false)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(p => new { p.Type, p.SubType });
                model.Field(p => p.Type).DefaultValue("Select Type");
                model.Field(p => p.SubType).DefaultValue("Select Sub Type");
                model.Field(p => p.ArgOne).DefaultValue(0);
                model.Field(p => p.ArgTwo).DefaultValue(0);
            })
        )
    )

     

    I have an event set up on the change event for the drop down but I'm running into some trouble on how I can get the current row's data: I've tried using the closest('tr') but I'm not getting a result back:

    function dropDownGridChange(e) {
        var gridObject = $("#grid");
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem($(this).closest('tr')); //returns undefined

        ...

     

    I even tried putting a cell close event on the grid itself and was going to try and get the row from the UID but I can't seem to pull that value out either:

    function onChangeGrid(e) {
    var grid = e.sender;
    var cell = grid.select();
    var row = cell.closest('tr');
    var row_uid = row.attr('data-uid'); //returns undefined

    ...

     

    Is there any way I can get the data out when the dropdown changes or any other way I could update ArgOne & ArgTwo on that change if I'm not going about this the right way? I'm just not sure where I'm going wrong.

  2. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 01 Oct 2018 Link to this post

    Hello Joseph,

    The context (this keyword) of the change event handler of the drop down editor is the drop down widget itself. In other words you could access the row using the following code:

    function dropDownGridChange(e) {
        var gridObject = $("#grid");
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem(this.wrapper.parents('tr')); //returns undefined
        ...

    Furthermore, the Change event of the grid is triggered when the user selects/unselects a row/cell. I noticed that in your configuration Selection is not enabled which means that the Change event of the grid will not trigger. 


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top