This is a migrated thread and some comments may be shown as answers.

dropdown, Grid, CRUD, popup editing

3 Answers 363 Views
Grid
This is a migrated thread and some comments may be shown as answers.
vince
Top achievements
Rank 1
vince asked on 22 May 2012, 02:11 PM
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"
                        });
            }

3 Answers, 1 is accepted

Sort by
0
vince
Top achievements
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:
<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
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
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:
countryDataSource.read();

this beacause without a binding the datasource is not populated.

I hope this solve your problem as it does for me.

Tags
Grid
Asked by
vince
Top achievements
Rank 1
Answers by
vince
Top achievements
Rank 1
Paolino
Top achievements
Rank 1
Share this question
or