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

BUG in kendo UI Grid widget - CRUD using dropdown

0 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Srinivas
Top achievements
Rank 1
Srinivas asked on 30 May 2012, 10:27 AM
Hi,

I want to use CRUD features, but only predefined set of values are allowed for one field.

<div id="grid"></div>
            
            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "<?= base_url().'/index.php/'.$action?>";
                        var dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "<?= '/read/'.$table_name?>",
                                    dataType: "json"
                                },
                                update: {
                                    url: crudServiceBaseUrl +  "<?= '/update/'.$table_name?>",
                                    type: "POST" ,
                                    dataType: "json"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "<?= '/destroy/'.$table_name?>",
                                    type: "POST" ,
                                    dataType: "json"
                                },
                                create: {
                                    url: crudServiceBaseUrl +  "<?= '/create/'.$table_name?>",
                                    type: "POST" ,
                                    dataType: "json"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            pageSize: 30,
                            schema: {
                                model: {
                                    id: "item_name",
                                    fields: {
                                        item_name: { validation: { required: true } },
                                        item_type: {  validation: { required: true, min: 1} },
                                        item_calories: {  type: "number", validation: { required: true, min: 1} },
                                        item_ingredients: { },
                                        item_category: {validation: { required: true } } ,
                                        dish_type: {validation: { required: true } }
                                    }
                                }
                            }
                        });

here dish_type can only contain VEG or NON VEG:

 var categoryDataSource = new kendo.data.DataSource({
                    data: [ {
                               item_type: "Veg"
                           },
                           {
                            item_type: "Non Veg"
                           }
                          ]
                    });                    
                    
                    function categoryDropDownEditor(container, options) {
                        $('<input data-text-field="item_type" data-value-field="item_type" data-bind="value:' + options.field + '"/>')                        .appendTo(container)
                            .kendoDropDownList({
                                autoBind: false,
                                dataSource: categoryDataSource
                            });
                    }
                    
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 400,
                        toolbar: ["create"],
                        columns: [
                            { field:"item_name", title: "Product Name" },
                            { field: "dish_type", editor:categoryDropDownEditor },
                            { field: "item_type", title:"Type", format: "{0:c}", width: "150px"  },
                            { field: "item_calories", title:"Calories", width: "150px" },
                            { field: "item_ingredients", width: "300px" },
                            { field: "item_category", width: "150px" },                           
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }],
                        editable: "popup"
                    });


BUG: while editing, value selected in drop down is not reflected, whereas object is getting bound.. Kindly help. 
Is it not recommended to use GRID for CRUD with predefined value for a field ?

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Srinivas
Top achievements
Rank 1
Share this question
or