I'm trying to use my own CSS class to style an element in a grid cell, but Kendo's styles are overriding my class and not allowing my style. How do I use my own style in a grid cell?

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 ?

Hi 
I have created a simple textinput widget with a button. When the button is clicked a window (with a combobox is created). The combobox is initialized correctly. However, when I declare a second textinput widget, the combobox does not initialize. 

I've searched around the forums but can't find any answers. I have created a simple test app to demonstrate the problem.

Any help would be appreciated.

Kashim

I have a grid that uses virtual scrolling. It ends up with about 250 rows. Once all of the data is loaded into the grid and I try to grab the scroll handle and drag it back to the top, it does not work.  I can click the scroll arrows or within the scroll bar and it scrolls fine, but I can't drag the scroll handle to the top or anywhere for that matter to get it to scroll.

Also, only the editors towards the top of the grid appear. If I click in an editable field after scrolling down, the editor does not appear.

I've created a jsFiddle that demonstrates the issue with editing in conjunction with the virtual scrolling here: http://jsfiddle.net/yGSHr/ 

However, I can't reproduce the scroll bar issues in this particular example.

Hi there,

I'm looking for a way to "reset" virtual scrolling on sorting/filtering. E.g in the code below I'm resetting the sort, pageSize and page params to the default values. Note that especially page is set to 1. While the datasource is retrieving the correct dataset the scroll bar isn't reset.


A live version that demonstrates this behavior can be found at http://openaccess.spirit.de/.

Without any filter applied scroll down a little and then either use the search box or the dropdown filter. The desired behavior would be that the dimension of the scroll bar would be newly calculated and the slider should move to the initial position whenever there's a request for page 1.

Thanks,

Rainer

I have a datasource, and i need to get the first element, and save it into a variable.
The methods get(x) and at(x), doesn't work. How can i do this?

I have a basic screen with two kendo ui dropdownlists and I'm testing with IE7.  The second dropdownlist on the screen opens but then doesn't close after a selection is made.  I created a sample page with only the two controls and I can duplicate the issue.  The lists work fine in all other browsers.  I also tested this with more than two kendo ui dropdownlists and the first one on the page always works and any subsequent lists have the same closing issue. I am a licensed user with a company in Philadelphia and I'm using the latest version of kendo v2012.1.322. 

Here is my sample code:

Hi,

I am having 2 problems using tabstrip.

1.I want to add a view page in to one of the tabs i am using asp.net mvc3 application.I want to insert the view page in to one 
   of the tab is it possible using kendo ui i have tried setContenturl method it is not happening when i am using that is there any 
   alternative to do that

2.The second one is i am having 4 tabs that are coming from database and when i am adding another additional tab dynamically
   using append or insertAfter methods a tab is adding and the content that i am including is not displaying.when i am clicking that 
   tab the tab is like that only.What should i suppose to do



Thanks,
Srinivas

Helo,

I designed the panel bar .I want to get the items in the panel bar dynamically but am getting items in the white space when we drag panel item but not in the panel bar.i has to get the items in the panel bar dynamically.If anyone knows please help me

Hi,

I want to do this:
For example, I have a treeview with one node "Root":
+ Root

Then when I expand this node, I will send a request to server and get child nodes of node "Root", and append to it.

But currently, if a node have no child nodes, the expand icon is not showed and the expand event is not fired, so I cannot do anythings further.

are there any ways that I can do that?

Thanks!
Thai