Hello,
I want to create an admin module to create states/provinces. I have a database with two tables, states and countries.
In the states table, we have a name and country_id, referring to the table countries.
I've used CRUD for the countries, which is working great.
For the states i collect the data: states.id, states.name, states.country_id, showing in the table.
When i edit a row (popup), I use a kendoDropDown which is also working correctly.
Now what i want to achieve is when showing the grid, i don't show the country_id, but i want to see the corresponding countries.label.
I've tried to change the transport:read to remove the country_id and replacing it with countries.label, but then the combobox isn't working properly.
Can anybody help me?
Thanks,
vince
I use the following code:
$(document).ready(function () {
var crudServiceBaseUrl = "/crm/api.php?",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "class=States&action=view",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "class=States&action=update",
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl + "class=States&action=delete",
dataType: "json"
},
create: {
url: crudServiceBaseUrl + "class=States&action=add",
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, type:"number" },
name: { type:"string", validation: { required: true } },
country_id: { type:"string", validation: { required: true } },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 400,
toolbar: ["create"],
sortable: {
mode: "single",
allowUnsort: false
},
filterable:true,
columns: [
{ field:"id", title: "ID" , width: "80px"},
{ field: "name", title:"Name"},
{ field: "country_id", title:"Country", editor: cntry_combo_editor},
{ command: ["edit", "destroy"], title: " ", width: "185px" }],
editable: "popup"
});
});
function cntry_combo_editor(container, options) {
$('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
autoBind: false,
dataSource: {
type: "json",
transport: {
read: "/crm/api.php?class=Countries&action=view"
}
},
optionLabel: "Select Country",
dataTextField: "label",
dataValueField: "id"
});
}
I want to create an admin module to create states/provinces. I have a database with two tables, states and countries.
In the states table, we have a name and country_id, referring to the table countries.
I've used CRUD for the countries, which is working great.
For the states i collect the data: states.id, states.name, states.country_id, showing in the table.
When i edit a row (popup), I use a kendoDropDown which is also working correctly.
Now what i want to achieve is when showing the grid, i don't show the country_id, but i want to see the corresponding countries.label.
I've tried to change the transport:read to remove the country_id and replacing it with countries.label, but then the combobox isn't working properly.
Can anybody help me?
Thanks,
vince
I use the following code:
$(document).ready(function () {
var crudServiceBaseUrl = "/crm/api.php?",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "class=States&action=view",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "class=States&action=update",
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl + "class=States&action=delete",
dataType: "json"
},
create: {
url: crudServiceBaseUrl + "class=States&action=add",
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, type:"number" },
name: { type:"string", validation: { required: true } },
country_id: { type:"string", validation: { required: true } },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 400,
toolbar: ["create"],
sortable: {
mode: "single",
allowUnsort: false
},
filterable:true,
columns: [
{ field:"id", title: "ID" , width: "80px"},
{ field: "name", title:"Name"},
{ field: "country_id", title:"Country", editor: cntry_combo_editor},
{ command: ["edit", "destroy"], title: " ", width: "185px" }],
editable: "popup"
});
});
function cntry_combo_editor(container, options) {
$('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
autoBind: false,
dataSource: {
type: "json",
transport: {
read: "/crm/api.php?class=Countries&action=view"
}
},
optionLabel: "Select Country",
dataTextField: "label",
dataValueField: "id"
});
}
3 Answers, 1 is accepted
0
vince
Top achievements
Rank 1
Rank 1
answered on 23 May 2012, 11:20 AM
i found a possible solution for this, but i'm still having a weird problem
function getCountry is called correctly, but it seems the countryDataSource is an empty datasource object.
My code:
function getCountry is called correctly, but it seems the countryDataSource is an empty datasource object.
My code:
<script> $(document).ready(function () { var crudServiceBaseUrl = "/crm/api.php?", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "class=States&action=view", dataType: "json" }, update: { url: crudServiceBaseUrl + "class=States&action=update", dataType: "json" }, destroy: { url: crudServiceBaseUrl + "class=States&action=delete", dataType: "json" }, create: { url: crudServiceBaseUrl + "class=States&action=add", dataType: "json" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 30, schema: { model: { id: "id", fields: { id: { editable: false, nullable: true, type:"number" }, name: { type:"string", validation: { required: true } }, country_id: { type:"string", validation: { required: true } } } } } }); countryDataSource = new kendo.data.DataSource({ transport: { read: { url: "/crm/api.php?class=Countries&action=view", dataType: "json" } }, schema: { model: { id: "id", fields: { id: { editable: false, nullable: true, type:"number" }, label: { type:"string", validation: { required: true } } } } } }); $("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 400, toolbar: ["create"], sortable: { mode: "single", allowUnsort: false, virtual: true }, filterable:true, columns: [ { field:"id", title: "ID" , width: "80px"}, { field: "name", title:"Name"}, { field: "country_id", title:"Country", editor: cntry_combo_editor, template: '#= getCountryName(country_id) #'}, { command: ["edit", "destroy"], title: " ", width: "185px" }], editable: "popup" }); }); function cntry_combo_editor(container, options) { $('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({ autoBind: false, dataSource: { type: "json", transport: { read: "/crm/api.php?class=Countries&action=view" } }, optionLabel: "Select Country", dataTextField: "label", dataValueField: "id" }); } function getCountryName(country_id) { console.log(countryDataSource) for (var i = 0; i < countryDataSource.length; i++) { if (countryDataSource[i].id == country_id) { return countryDataSource[i].label; } } return "N/A"; } </script>0
vince
Top achievements
Rank 1
Rank 1
answered on 23 May 2012, 01:37 PM
I found a solution, to this problem... in stead of working with a datasource call, i get the data via an ajax call
<script> $(document).ready(function () { var crudServiceBaseUrl = "/crm/api.php?", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "class=States&action=view", dataType: "json" }, update: { url: crudServiceBaseUrl + "class=States&action=update", dataType: "json" }, destroy: { url: crudServiceBaseUrl + "class=States&action=delete", dataType: "json" }, create: { url: crudServiceBaseUrl + "class=States&action=add", dataType: "json" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 30, schema: { model: { id: "id", fields: { id: { editable: false, nullable: true, type:"number" }, name: { type:"string", validation: { required: true } }, country_id: { type:"string", validation: { required: true } } } } } }); $.ajax({ url: "/crm/api.php?class=Countries&action=view", async: false, dataType: 'json', success: function(data) { countryDS = data; } }); $("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 400, toolbar: ["create"], sortable: { mode: "single", allowUnsort: false, virtual: true }, filterable:true, columns: [ { field:"id", title: "ID" , width: "80px"}, { field: "name", title:"Name"}, { field: "country_id", title:"Country", editor: cntry_combo_editor, template: '#= getCountryName(country_id) #'}, { command: ["edit", "destroy"], title: " ", width: "185px" }], editable: "popup" }); }); function cntry_combo_editor(container, options) { $('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({ autoBind: false, dataSource: countryDS, optionLabel: "Select Country", dataTextField: "label", dataValueField: "id" }); } function getCountryName(country_id) { $.each(countryDS, function(key, val) { if(val.id== country_id){ country = val.label; } }); return country; } </script>0
Paolino
Top achievements
Rank 1
Rank 1
answered on 05 Sep 2012, 08:27 AM
if you still want to use the DataSource component, before the grid definition you have to call the read() method:
this beacause without a binding the datasource is not populated.
I hope this solve your problem as it does for me.
countryDataSource.read();this beacause without a binding the datasource is not populated.
I hope this solve your problem as it does for me.