How do I get a specific field value from the selected row with a custom editor?

[Travis Bell]

Lets say I have a grid:

var release_grid = $("#release_grid").kendoGrid({

  dataSource: dataSource,

  pageable: false,

  sortable: true,

  columns: [

    { field: 'primary', title: 'Primary?', width: '78px' },

    { field: 'iso_3166_1', title: "Country", width: '320px', editor: countryDropDownEditor, template: kendo.template($("#country_template").html()) },

    { field: 'release', title: "Release Date", format: '{0:yyyy-MM-dd}', width: '105px' },

    { field: 'certification', title: 'Certification', width: '105px', editor: certificationDropDownEditor, template: '#=certification#' },

    { command: [

      { name: "edit", text: { edit: "Save", update: "Save",  cancel: "Cancel" }, template: kendo.template($("#edit_template").html()) },

      { name: "destroy", template: kendo.template($("#delete_template").html()) }

    ], title: 'Edit' }],

  editable: {

    mode: 'popup',

    confirmation: 'Are you sure you want to delete this record?'

  }

});

Now for the 'certification' field, I would like it to do an AJAX call with the selected value from the 'iso_3166_1' value. How do I do this?

function certificationDropDownEditor(container, options) {

  $('<input data-text-field="certification" data-value-field="certification" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({

    autoBind: false,

    dataSource: {

      type: "json",

      transport: {

        read: '/country/certifications'

      }

    }

  });

}

I cannot figure out how to pull the selected row's 'iso_3611_1' value out to use in this AJAX call. Anyone got any pointers?

[Vladimir Iliev]

Hi Travis,

 
Basically you can get field value from the currently edited row from the PopUp window using jQuery name attribute selector. Please check the example below:

currentValueForSend = $("[name=iso_3611_1]").val();

 Kind Regards,
Vladimir Iliev
the Telerik team

[Travis Bell]

Hi Vladimir,

Thanks for the reply. I ended up doing this on the other combo box (the one that you choose to get the value for to pass to the certifications call):

function countryDropDownEditor(container, options) {

  $('<input data-text-field="english_name" data-value-field="iso_3166_1" data-bind="value:' + options.field + '"/>"').appendTo(container).kendoComboBox({

    autoBind: false,

    placeholder: "Select a country...",

    dataTextField: "english_name",

    dataValueField: "iso_3166_1",

    dataSource: country_data_source,

    change: function() {

      certification_data_source.query({ iso_3166_1: this.value() });

    }

  });

}

Which seems to be working but with one problem, the change event is only firing on my first selection within the countryDropDownEditor. Every subsequent change within the same edit window doesn't fire the event. Any ideas?

[Vladimir Iliev]

Hi Travis,

 
From the provided information it's not clear for us what is preventing the ComboBox from firing the change event after the first request - could you please provide sample where the issue is reproduced?

Kind Regards,
Vladimir Iliev
the Telerik team

[Travis Bell]

I solved that particular issue, and another that were both related. When the datasource doesn't have valid data in it there's a couple things that were behaving very strangely. Perhaps this could help someone else.

First, the change event was only firing once, as I mentioned. Second, in my example, the certification_data_source query method would fire and create an infinite loop of requests until I killed my browser (hundreds and hundreds requests).

On one hand I can see why you would simply say "make sure to have valid data coming in from the datasource" but on the other I wasn't that far yet, I was just trying to get the basic functionality nailed and ran into a ton of issues that wasted a good part of a day.

Hopefully this helps someone else out there.

[ajith]

Hi Vladimier,

    Getting Value is OK. How can i set value by the selected row of another grid? can you please help me.

 

[Boyan Dimitrov]

Hello ajith,

As far as I understand you want to set the selected item of the Kendo DropDownList widget. Please refer to the select method. 

Regards,
Boyan Dimitrov
Telerik

 

 

[ajith]

Hi, Boyan

    I am trying to update two columns of a grid with values from selected row of another grid. my code is,

<a id="window"></a>
@(Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetLocationViewModel>()
            .Name("AssetlocationGrid")
           .Columns(columns =>
    {
        //columns.Bound(p => p.UserId).Width(125);
        columns.Bound(p => p.CampanyCode).Width(125);
        columns.Bound(p => p.location1code).Width(165).Filterable(false);
        columns.Bound(p => p.location2code).Width(150).Filterable(false);
        columns.Bound(p => p.locationCode).Width(125);
        columns.Bound(p => p.Name).Width(150);
        columns.Bound(p => p.ShortName).Width(150);
        columns.Bound(p => p.CreatedBy).Width(150);
        columns.Bound(p => p.ModifyBy).Width(150);


        //columns.Bound(p => p.Designation).Width(150);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)

        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.locationCode))
        .Create(update => update.Action("AssetLocEditingPopup_Create", "Location"))
            .Read(read => read.Action("AssetLocationEditingPopup_Read", "Location"))
            .Update(update => update.Action("AssetLocEditingPopup_Update", "Location"))

            .Destroy(update => update.Action("AssetLocEditingPopup_Destroy", "Location"))
    )




)



<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
    //function OnlocationChange(e) {
    //    $('#AssetlocationGrid').data().kendoGrid.dataItem($(this.element)
    //        .closest('tr'))
    //    .set('loc_l1code', this.value());
    //$("#grid").on("dblclick", " tbody > tr > td", function () {
    //....
   // });
    //}
    $("#AssetlocationGrid").on("dblclick", " tbody > tr > td", function () {

        $("#window").load("@Url.Action("PopupWindow", "Location")"); // popup window with grid
        //$(this).load("/Shared/_assetLocationPopup");
    });


    function onRowSelected() {

        var grid = $("#popupGrid").data("kendoGrid");
        var selectedItem = grid.dataItem(grid.select());

        var loc = selectedItem.Name
        //$('#AssetlocationGrid').data().kendoGrid.dataItem($(this.element)
        //    .closest('tr'))
        //.set('loc_l1code', this.value());
        //$('#AssetlocationGrid').data().kendoGrid.dataItem($(this.element)
        //    .closest('tr'))
        //.set('loc_l1code', loc);
      var grid=  $("#AssetlocationGrid").data("kendoGrid").onRowSelected.add('location1code',loc);
       // here i need the code to update asset location grid

        alert(loc)
    }

</script>

@{Html.Kendo().Window()
.Name("locapopupWindow")
.Title("Select Location")
.Draggable()
.Width(500)
.Height(300)
.Actions(actions => actions
    .Custom("custom")
    .Minimize()
    .Maximize()
    .Close()

    )
    .Content(@<text>

   @{Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetLocationViewModel>()
    .Name("popupGrid")

           .Columns(columns =>
           {
               columns.Bound(p => p.CampanyCode).Width(125).Visible(false);
               columns.Bound(p => p.location1code).Width(165).Visible(false);
               columns.Bound(p => p.location2code).Width(150).Visible(false);
               columns.Bound(p => p.Name).Width(150);
               columns.Bound(p => p.ShortName).Width(150);
               columns.Bound(p => p.CreatedBy).Width(150).Visible(false);
               columns.Bound(p => p.ModifyBy).Width(150).Visible(false);

           })
    .Pageable()
    .Sortable()
    .Scrollable()

    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))

    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:250px;" })

    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)

        //.Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.location1code))

        .Create(update => update.Action("Level2LocEditingPopup_Create", "Asset"))
            .Read(read => read.Action("Level2LocationEditingPopup_Read", "Location"))


    )

    .Render();

    }
<script>

    $("#popupGrid").data("kendoGrid").bind("change", onRowSelected);
</script>
 </text>
    )

       .Render();


       }

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    //function onChange(e) {
    //    $('#locationGrid').data().kendoGrid.dataItem($(this.element)
    //        .closest('tr'))
    //    .set('loc_l1code', this.value());
    //}

</script>

         

 

[Boyan Dimitrov]

Hello ajith,

 

A possible way to access the model object for a specific table row of a Kendo Grid is to use the dataItem method. 

 

I would suggest to find the row you want to modify using jQuery, access its dataItem and modify the property values. 

 

Regards,
Boyan Dimitrov
Telerik