This is a migrated thread and some comments may be shown as answers.

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

8 Answers 690 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Travis Bell
Top achievements
Rank 1
Travis Bell asked on 09 Jan 2013, 04:38 PM
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?

8 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 11 Jan 2013, 12:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Travis Bell
Top achievements
Rank 1
answered on 11 Jan 2013, 08:04 PM
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?
0
Vladimir Iliev
Telerik team
answered on 15 Jan 2013, 12:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Travis Bell
Top achievements
Rank 1
answered on 15 Jan 2013, 03:40 PM
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.



0
ajith
Top achievements
Rank 1
answered on 18 May 2015, 04:46 AM

Hi Vladimier,

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

 

0
Boyan Dimitrov
Telerik team
answered on 19 May 2015, 04:04 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ajith
Top achievements
Rank 1
answered on 20 May 2015, 05:22 AM

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>
         

 

0
Boyan Dimitrov
Telerik team
answered on 21 May 2015, 03:27 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Travis Bell
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Travis Bell
Top achievements
Rank 1
ajith
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or