Hello,

I have a Kendo Grid with a command column, that on clicking shows extra details for that row. I want to show this extra information in a Kendo Window. I have been able to achieve this. Next, I want to add a button inside this Kendo Window, that allows user to show the details for the next grid row, without having to go back to the grid. I am having some trouble with this. Few notes about the Kendo Window -

1. The contents of the Kendo Window is displayed using a Script template. I am passing the grid's current dataItem to the template to render HTML. More on this in #3

2. The user can have multiple such grids open in the same window, and hence multiple Kendo Windows, so it's not practical to save the current row number and grid # in JS. The number of the grids is dynamic, so there is no id associated with any of them. 

3. To work around #2, instead of passing the grid's dataItem, I have an object that passes the entire data associated with the grid and the current index of the grid. The data in the grid is pretty small, so I am not too worried about passing entire data. In this approach, I was hoping, on the Next Button click action, I can retrieve the object passed earlier, and then increment the index. However, when I use Kendo Window's content(), I get a string back with HTML. I am guessing this is due to the Script template. I am not sure how to proceed with this approach. Is there a way to extract the underlying object that was passed to the script template?

Also, the approach in #3 seems very crude to me. Is there a better way to implement the functionality I am looking for? I looked around some of the other Kendo UI widgets, and Scrollview seemed like what I needed (minus the drag scroll). But it looks like scrollview is meant for mobile only?

Thanks,
Avnish

I added a Kendo Editor along with the FileBrowserController and ImageBrowserController per the example - File and Image Browser. My problem is the filter prevents all files from displaying. If the filter is in place I can't see any files in the directory even though there are files there with the correct extensions. If I comment out the filter I can see the files. I can see the Filter value getting set correctly in the debugger. Not sure how to fix this.

I have a grouped datasource.  The datasource appears to only let me filter by the "value" / grouped item.  How do I filter on properties such as name that are in the grouped items, "items" collection?

When I clicked Add or Edit button of Grid, it is centered correctly in computer.  When it is in IPAD, the popup will go to the top right corner.  I guess it could be bootstrap or accordion container of my settings.  Is there a way I can tell the popup of Add window to show in the middle or on top left corner?

Thanks.

I have seen the demo where you are using SignalR and entity framework to bind to a Kendo scheduler. I have tried using this but have all sorts of problems.

1. I am using a Edit Template with Kendo drop downs (the data for the drop downs are in Resources section but don't bind - I raised this as a separate question.
2. I have a number of extra fields in my model. When I click to edit only the standard fields Title, Start End are bound all others have no data

Is there a way to use Linq rather than EF as I'm more familiar with this?

This is my schedular initialisation code...

Hi,

I am using Aurelia with Kendo UI. I tried the context menu. I am having problems in calling a function from the select. It is unable to locate that method.

Can you please help?

Hi,

I wanted to change the way to choose foreColor and backColor using the kendoColorPicker.

The default way use kendoColorPallet.

I can't find anything on internet.

Can you help ?

Hi,

Initially i had Grid with CRUD operations working properly and after adding sortable now sortable is working fine but CRUD  is not working

if i remove sortable crud is working fine. I need to make both working where am i making mistake

$(document).ready(function () {
                    function dataSource_change(e) {
                      var data = this.data();
                      console.log(data.length); // displays "77"
                    }
                    var dataSource = new kendo.data.DataSource({
                       //pageSize: 20,
                      transport:{
                          read:{
                            url: function() {
                              return "/makes"},
                            dataType: "json",
                            cache: false
                          },
                          update: {
                            url: function (make) {
                            console.log(make)
                            
                            return  "/makes/"+ make.models[0].id
                            },
                            type: "PUT",
                            dataType: "json",
                            beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token',jQuery('meta[name="csrf-token"]').attr("content")); }
                          },
                          destroy: {
                              url: function (make) {
                                return  "/makes/"+ make.models[0].id
                              },
                              type: "DELETE",
                              dataType: "json"
                          },
                          create: {
                              url: "/makes",
                              type: "POST",
                              dataType: "json"
                          },
                          parameterMap: function (options, operation) {
                          if (operation !== "read"  && options.models) {
                            console.log(options)
                            return{"make": options.models[0]};
                          }
                          else{
                            return {"make":options};
                            }
                          }
                      },
                      batch: true,
                       schema: {
                           model: {
                             id: "id",
                             fields: {
                                id: { editable: false, nullable: true },
                                name: { validation: { required: true } },
                             }
                           }
                       }
                    });
                    dataSource.bind("change", dataSource_change);
                    dataSource.fetch();

                    var grid = $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: false,
                        height: 550,
                        toolbar: [{name: "create", text: "Add New Make"}],
                        columns: [
                            { field:"name",title:"Makes" },                                      
                            { command: ["edit", "destroy"], title: "Action", width: "250px" }],
                        editable: "inline"
                    }).data("kendoGrid");
                    grid.table.kendoSortable({
                        filter: ">tbody >tr",
                        hint: $.noop,
                        cursor: "move",
                        placeholder: function(element) {
                            return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                        },
                        container: "#grid tbody",
                        change: function(e) {
                            console.log(grid)
                            var skip = grid.dataSource.skip(),
                                oldIndex = e.oldIndex + skip,
                                newIndex = e.newIndex + skip,
                                data = grid.dataSource.data(),
                                dataItem = grid.dataSource.getByUid(e.item.data("uid"));
                            var updated_order = []
                            $('tbody tr').each(function(i){
                              updated_order.push({ name: $(this).children('td:first').text(), position: i+1 });
                            });
                            controller_name = $('#controller_name').val();
                            $.ajax({
                              type: "PUT",
                              url: '/sort',
                              data: { order: updated_order, controller_name: controller_name }
                            });

                            grid.dataSource.remove(dataItem);
                            grid.dataSource.insert(e.newIndex, dataItem);
                        }
                    });

                });

Hi,

I'm trying to pass in DataSourceRequest instance to a web api method (POST), and can't find the model binder for it.

Here's my scenario in short:

1) Kendo Grid uses MVC controller action to get the data, and DataSourceRequest is binded ok.

2) In turn, the MVC action needs to call a web api url (using post), and include the DataSourceRequest as content (json format)

I checked this article: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/web-api-server-operations

But it only discusses the GET request, and when grid is directly calling web api.

Is there a json model binder for DataSourceRequest, for web api?