I'm having an issue with the ForeignKey drop down not showing the selected value when I pick the first one in the list.
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
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
0
Hi Evan,
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:
Kind Regards,
Vladimir Iliev
the Telerik team
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brendon
Top achievements
Rank 1
Rank 1
answered on 15 Nov 2012, 08:47 PM
Having the same issue. I do not know the default value as the list is dynamic so that method likely will not work. I have two foreign keys in my grid, how do I use javascript to add a different "Select" to each? Ideally however, the first item in the drop down should have a value and I am still questioning why it does not.
@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")) ))0
Hi Brendon,
Kind Regards,
Vladimir Iliev
the Telerik team
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brendon
Top achievements
Rank 1
Rank 1
answered on 05 Dec 2012, 06:08 PM
I was looking for an MVC example...but I was able to figure it out. Note, the Web Example named Events under Grid does not have an MVC example.
I added this line:
Then added the javascript posted.
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.
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.
0
Hi Brendon,
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brendon
Top achievements
Rank 1
Rank 1
answered on 13 Dec 2012, 11:32 PM
The following code works for the first drop down list in the grid, but the second instance is ignored. I've tried my hand as the javascript, but I'm not great at it. Cannot figured out how to apply it to both drop downs. Can you give me an example of how to add the Please Selection option to ALL the drop downs in a grid while in edit or new mode?
The grid:
The javascript:
Thanks.
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(""); } }}0
Hi Brendon,
Kind Regards,
Vladimir Iliev
the Telerik team
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brendon
Top achievements
Rank 1
Rank 1
answered on 14 Dec 2012, 04:22 PM
Ah the Each method...I was trying something else...
Code works except for this line:
should be:
Thanks!
Code works except for this line:
$(this).data("kendoDropDownList");var ddl = $(this).data("kendoDropDownList");0
Kevin
Top achievements
Rank 1
Rank 1
answered on 19 Jun 2019, 04:55 PM
Can someone please explain how the second parameter of the Columns.ForeighKey works?
0
Hi Kevin,
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
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
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.