
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?'
}
});
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'
}
}
});
}
8 Answers, 1 is accepted
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

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() });
}
});
}
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?
Vladimir Iliev
the Telerik team

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.

Hi Vladimier,
Getting Value is OK. How can i set value by the selected row of another grid? can you please help me.
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

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
>
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