Rank 1
Iron
Hello,
I'm running into a problem when trying to use the same dataSource in two different grids on my SPA page.
The following construction in used in the different grids:
{
field: "_company_id",
title: "Bedrijf",
editor: companyComboBox,
dataSource: dataSourceCompany,
dataTextField: "name",
dataValueField: "id"
}When I leave out the dataSource at one grid, both grids show up, but one grid only shows the _company_id value.
When I use the same code in both grids the second grid will not show, also no errors show up.
Please advice, I've added more info below, more info added.
5 Answers, 1 is accepted
Hi Paul,
Could you please send us more information about the implementation at your end? As far as I see you have a ForeignKey column in your Grid. However, if you need to configure a custom editor you could also take a look at the Editing custom editor demo linked below:
- https://demos.telerik.com/kendo-ui/grid/editing-custom
I am not sure about the exact scenario and implementation at your end, however, the issue with the second Grid not showing up might be related to duplicated id. In the Dojo example linked here, there are two elements with the same id. As you will see a single Grid is displayed. Could you please inspect the elements of the developer tools of the browser and check if the observed issue is not related to duplicated id of the custom editors?
Looking forward to your reply.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi Neli,
Below a part of the total implementation (both grids which refer to the same dropdown):
const dataSourceCompany = new kendo.data.DataSource({
transport: {
read: "/rest.php?item=company",
update: {
method: 'PUT',
url: "/rest.php?item=company"
},
destroy: {
method: 'DELETE',
url: "/rest.php?item=company"
},
create: {
method: 'POST',
url: "/rest.php?item=company&task=addCompany"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return kendo.stringify(options);
} else {
return options;
}
}
},
schema: {
data: function (response) {
return response.data;
},
total: "total",
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
name: {validation: {required: true}},
code: {validation: {required: true}},
sales_order_nr: {type: "number"},
debtor_nr: {type: "number", validation: {min: 0, required: true}},
creditor_nr: {type: "number", validation: {min: 0, required: true}},
purchase_order_nr: {type: "number", validation: {min: 0, required: true}},
quotation_nr: {type: "number", validation: {min: 0, required: true}},
invoice_nr: {type: "number", validation: {min: 0, required: true}},
delivery_note_nr: {type: "number", validation: {min: 0, required: true}},
rma_nr: {type: "number", validation: {min: 0, required: true}},
relation_nr: {type: "number", validation: {min: 0, required: true}},
pay_account_nr: {type: "string"},
default_payment_period: {type: "number", validation: {min: 0, required: true}}
}
}
},
error: function (e) {
let message = "";
$.each(e.errors, function (i, v) {
message += v.error.message;
})
alert("Error message: " + message);
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
function companyComboBox(container, options) {
$('<input name="' + options.field + '">')
.appendTo(container)
.kendoComboBox({
dataTextField: "name",
dataValueField: "id",
valuePrimitive: true,
template: '<span style="width: 500px; display: inline-block;">#: name #</span>',
dataSource: dataSourceCompany,
filter: "contains",
suggest: true,
index: 3
});
}
$("#gridSalesOrder").kendoGrid({
dataSource: {
transport: {
read: "/rest.php?item=salesOrder",
update: {
method: 'PUT',
url: "/rest.php?item=salesOrder"
},
destroy: {
method: 'DELETE',
url: "/rest.php?item=salesOrder"
},
create: {
method: 'POST',
url: "/rest.php?item=salesOrder"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return kendo.stringify(options);
} else {
return options;
}
}
},
schema: {
data: function (response) {
return response.data;
},
total: "total",
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
_company_id: {type: "number"},
date: {type: "date"},
description: {type: "string"},
transport_costs: {type: "number"},
other_costs: {type: "number"},
_employee_id: {type: "number"},
_debtor_nr : {type: "number"},
closed: {type: "boolean"},
price: {type: "number"},
_payment_type_id: {type: "number"},
customer_reference: {type: "string"},
sent_name: {type: "string"},
sent_pc: {type: "string"},
sent_street: {type: "string"},
sent_town: {type: "string"},
sent_country: {type: "string"},
_sales_order_nr: {type: "string"},
invoice_name: {type: "string"},
invoice_pc: {type: "string"},
invoice_street: {type: "string"},
invoice_town: {type: "string"},
invoice_country: {type: "string"},
_quotation_id: {type: "number"},
calculated_transport_costs: {type: "number"},
calculated_other_costs: {type: "number"},
contact_person_name: {type: "string"},
_shipper_id: {type: "number"},
_shipping_type_id: {type: "number"},
_sales_order_status_id: {type: "number"},
concern_description: {type: "string"}
}
}
},
error: function (e) {
let message = "";
$.each(e.errors, function (i, v) {
message += v.error.message;
})
alert("Error message: " + message);
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
editable: "inline",
toolbar: ["create"],
height: 300,
sortable: {
mode: 'multiple'
},
filterable: true,
scrollable: {
endless: true
},
pageable: {
numeric: false,
previousNext: false
},
detailInit: salesOrderLinesInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
resizable: true,
columns: [
{
field: "description",
title: "Omschrijving"
},
{
field: "_debtor_nr",
title: "Debiteur"
},
{
field: "_company_id",
title: "Bedrijf",
editor: companyComboBox,
dataSource: dataSourceCompany,
dataTextField: "name",
dataValueField: "id"
},
{
field: "_employee_id",
title: "Werknemer"
},
{
field: "date",
title: "Datum",
format: "{0: dd-MM-yyyy}"
},
{
field: "_shipper_id",
title: "Vervoerder"
},
{
field: "_shipping_type_id",
title: "Vervoerswijze"
},
{
field: "calculated_transport_costs",
title: "Bijdrage in transportkosten"
},
{
field: "transport_costs",
title: "Werkelijke transportkosten"
},
{
field: "calculated_other_costs",
title: "Bijdrage in overige kosten"
},
{
field: "other_costs",
title: "Werkelijke overige kosten"
},
{
field: "_payment_type_id",
title: "Betaaltype"
},
{
field: "customer_reference",
title: "Klantreferentie"
},
{command: ["edit", "destroy"], title: " ", width: "250px"}
]
});
$("#gridPurchaseOrder").kendoGrid({
dataSource: {
transport: {
read: "/rest.php?item=purchaseOrder",
update: {
method: 'PUT',
url: "/rest.php?item=purchaseOrder"
},
destroy: {
method: 'DELETE',
url: "/rest.php?item=purchaseOrder"
},
create: {
method: 'POST',
url: "/rest.php?item=purchaseOrder"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return kendo.stringify(options);
} else {
return options;
}
}
},
schema: {
data: function (response) {
return response.data;
},
total: "total",
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
_company_id: {type: "number"},
date: {type: "date"},
description: {type: "string"},
transport_costs: {type: "number"},
other_costs: {type: "number"},
_employee_id: {type: "number"},
_valuta_id: {type: "number"},
_creditor_nr : {type: "number"},
_contact_person_id: {type: "number"},
closed: {type: "boolean"},
price: {type: "number"},
_purchase_order_nr: {type: "string"}
}
}
},
error: function (e) {
let message = "";
$.each(e.errors, function (i, v) {
message += v.error.message;
})
alert("Error message: " + message);
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
editable: "inline",
toolbar: ["create"],
height: 300,
sortable: {
mode: 'multiple'
},
filterable: true,
scrollable: {
endless: true
},
pageable: {
numeric: false,
previousNext: false
},
detailInit:purchaseOrderLinesInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
resizable: true,
columns: [
{
field: "description",
title: "Omschrijving"
},
{
field: "_creditor_nr",
title: "Crediteur"
},
{
field: "_contact_person_id",
title: "Contactpersoon"
},
{
field: "_company_id",
title: "Bedrijf",
editor: companyComboBox,
dataSource: dataSourceCompany,
dataTextField: "name",
dataValueField: "id"
},
{
field: "_employee_id",
title: "Werknemer",
editor: employeeComboBox,
dataSource: dataSourceEmployee,
dataTextField: "name",
dataValueField: "id"
},
{
field: "date",
title: "Datum",
format: "{0: dd-MM-yyyy}"
},
{
field: "price",
title: "Prijs"
},
{
field: "tranport_costs",
title: "Transportkosten"
},
{
field: "other_costs",
title: "OVerige kosten"
},
{command: ["edit", "destroy"], title: " ", width: "250px"}
]
});I had read the links you proposed, but this issue is not mentioned there.
I also looked at the Dojo example but that's about the same id for the grid. The issue I encountered has to do with the column definition in the grids. The columns with the title "Bedrijf" seem to have a problem with the use of the same dataSource ("dataSource: dataSourceCompany"). If I leave that line out at one of the two grid columns, the grids are displayed. But the grid without the "dataSource" definition in the column will only display the _comapny_id value. So the issue is before the custom editor even is displayed, it seems to be with the column definition of the grids.
Hi Paul,
I used the provided Grid configuration to try to replicate the behavior. The Dojo example linked here contains two identical Grids. Each Grid has a foreign key column with a custom editor. The custom editors are using the same dataSource. Below you will find the main parts of the implementation:
const dataSourceCategory = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
})The columns configuration:
columns: [
{ field: "ProductName", title: "Product Name" },
{
field: "CategoryID",
width: "200px",
editor: customForeignKeyEditor,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: dataSourceCategory,
title: "Category"
},
...],Below you will find the custom editor. May I ask you to try to configure the custom editor at your side as in the example below (the marked in yellow part)?
function customForeignKeyEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: {
data: options.values
}
});
}In case the issue continues to persist please try to modify the Dojo example in order to replicate the behavior the way it is on your side and send it back for a review? This way we could take a closer look and provide further assistance.
Regards,
Neli
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
I think I found the issue, check the Dojo. I also had a third grid which is to maintain the data for the dropdown.
If that one is added, only the first grid and the maintenance grid are working.
The second grid is not created (only an empty table element in the div).
I hope you can find out what is happening here, because there are no errors.
Regards,
Paul
Hi Paul,
I managed to replicate the described issue by adding a third Grid. In order to avoid such behavior, I would suggest you ensure that the Grids are initialized after the custom editor datasource is fetched.
Here is a modified Dojo example. In the example, there are three identical Grids that are initialized without any issues.
Please try the same approach at your side and let me know if the suggestion is helpful for resolving the issue.
Regards,
Neli
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.