To reproduce, go to the Foreign Key Column example(http://demos.kendoui.com/web/grid/foreignkeycolumn.html), add a new row, put a value in for the product name, select "Beverages" for the category, then click on the Unit Price cell. Observe that the category cell now is blank instead of showing the selected "Beverages" value.
Any help would be much appreciated.
Thanks,
--Evan
10 Answers, 1 is accepted
Basically when the current model property has no DefaultValue and there is no OptionLabel defined in the DropDownList, the first item in the list appears as selected, but the selected value is null, because the user never changes the item. In current case you should set the default value for this property in your model:
var
dataSource =
new
kendo.data.DataSource({
pageSize: 30,
data: products,
autoSync:
true
,
schema: {
model: {
id:
"ProductID"
,
fields: {
ProductID: { editable:
false
, nullable:
true
},
ProductName: { validation: { required:
true
} },
//set the default value of the ForeignKeyColumn:
CategoryID: { field:
"CategoryID"
, defaultValue: 1, validation: { required:
true
}},
UnitPrice: { type:
"number"
, validation: { required:
true
, min: 1} }
}
}
}
});
Another option would be to use the Edit event of the Grid to set the OptionLabel of the DropDownList which will appear as first item:
function
onEdit(e)
{
ddl = $(
"#grid tbody [data-role=dropdownlist]"
).data(
"kendoDropDownList"
);
if
(ddl)
{
ddl.options.optionLabel =
"Please select:"
;
ddl.refresh();
ddl.value(
""
);
}
}
Kind Regards,
Vladimir Iliev
the Telerik team
@model List<
Business.EquipmentModel
>
@(Html.Kendo().Grid(Model)
.Name("EquipmentGrid")
.Columns(columns =>
{
columns.Bound(e => e.EquipmentId).Title("Id").Width(50);
columns.Bound(e => e.Description);
columns.Bound(e => e.Make);
columns.Bound(e => e.Model);
columns.ForeignKey(e => e.EquipmentTypeId, (System.Collections.IEnumerable)Business.EquipmentTypeModel.All(), "EquipmentTypeId", "EquipmentTypeName").Title("Type");
columns.ForeignKey(e => e.FacilityId, (System.Collections.IEnumerable)Business.FacilityModel.All(), "FacilityId", "FacilityName").Title("Facility");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(e => e.EquipmentId);
model.Field(e => e.EquipmentId).Editable(false);
})
.Create(update => update.Action("Equipment_Create", "Equipment"))
.Update(update => update.Action("Equipment_Update", "Equipment"))
.Destroy(update => update.Action("Equipment_Destroy", "Equipment"))
)
)
As I mention in my previous reply if setting the Default value is not an option in your case you should use the Edit event of the Grid to set the OptionLabel of the DropDownList which will appear as first item:
function
onEdit(e)
{
ddl = $(
"#grid tbody [data-role=dropdownlist]"
).data(
"kendoDropDownList"
);
if
(ddl)
{
ddl.options.optionLabel =
"Please select:"
;
ddl.refresh();
ddl.value(
""
);
}
}
Vladimir Iliev
the Telerik team
I added this line:
.Events(events => events.Edit("onEdit"))
However, this applies to both editing "New" records and "Existing" records. I only want it to apply for New. I do not see a class or differentiation between the two in code. The user should not have to "Select One:" if a value already exists. How would I check for a value?
Thanks.
There is IsNew method in the current model passed in the Edit event properties which you should use. Please check the example below:
function
onEdit(e) {
if
(e.model.isNew()) {
//Execute your custom logic
}
}
For more information about available client-side events for the Grid you should check the Grid Events and DataSource Events in the documentation.
Kind regards,
Vladimir Iliev
the Telerik team
The grid:
@(Html.Kendo().Grid(Model)
.Name("equipmentGrid")
.Columns(columns =>
{
columns.Template(@<
text
></
text
>).ClientTemplate("<
a
class
=
'k-button'
href
=
'/Equipment/#=EquipmentId#'
>Open</
a
>").Width(90);
columns.Bound(e => e.EquipmentId).Title("Id").Width(50).Hidden();
columns.Bound(e => e.Description).Template(@<
text
></
text
>).ClientTemplate("<
a
href
=
'/Equipment/#=EquipmentId#'
>#=Description#</
a
>").Title("Description");
columns.Bound(e => e.Make);
columns.Bound(e => e.Model);
columns.ForeignKey(e => e.EquipmentTypeId, (System.Collections.IEnumerable)EquipmentTypeModel.All(), "EquipmentTypeId", "EquipmentTypeName").Title("Type");
columns.ForeignKey(e => e.FacilityId, (System.Collections.IEnumerable)FacilityModel.All(), "FacilityId", "FacilityName").Title("Facility");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ColumnMenu()
.Events(events => events.Edit("onEdit"))
}
The javascript:
function onEdit(e) {
if (e.model.isNew()) {
ddl = $("#equipmentGrid tbody [data-role=dropdownlist]").data("kendoDropDownList");
if (ddl) {
ddl.options.optionLabel = "Please Select:";
ddl.refresh();
ddl.value("");
}
}
}
Basically you can use the jQuery Each method to find all DropDownLists in the current grid row and execute the required logic:
e.g.:
function
onEdit(e) {
if
(e.model.isNew()) {
$(
"#equipmentGrid tbody [data-role=dropdownlist]"
).each(
function
() {
$(
this
).data(
"kendoDropDownList"
);
if
(ddl) {
ddl.options.optionLabel =
"Please Select:"
;
ddl.refresh();
ddl.value(
""
);
}
})
}
}
Kind Regards,
Vladimir Iliev
the Telerik team
Code works except for this line:
$(this).data("kendoDropDownList");
var ddl = $(this).data("kendoDropDownList");
The second parameter for the ForeignKey will provide the data that will be used by the column to populate the dropdown editor. Check out the API reference below that describes the parameters:
Regards,
Viktor Tachev
Progress Telerik