I have a Kendo Grid with 10 columns out of which 3 are editable. Now when I enable the navigatable = true, The cursor goes to all the columns when I press "tab" key. I want a functionality, where when I press tab key (or enter or space key), my cursor moves to the next editable column only and should not go through the non-editable column. When I reach the last editable column of the row and press the tab key, it should go to the first editable column of the next record.

I need this feature for data entry operator, so that they don't have to use mouse while entering data.

P.S. My editable columns are in between the non editable columns.

Thanks for the help in advance.

Regards,
Komail Noori

The pricing sheet here at http://www.telerik.com/purchase/kendo-ui-complete indicates that access to a Custom Script Builder is included in the license, but I can't find it. Am I being dumb? No luck with search, and no other reference to this tool anywhere else that I've found.

Hi,

I was wondering if it's possible to embed an ActionLink in the title of any given chart.

So instead of "Data Chart" as the title, I want to put in something like:

Html.ActionLink("Chart Title", "SomeActionName",  "ActionController", new {target="_blank"})

I need the grid to scroll exactly one row with each mouse wheel click, or each click on the scroll bar arrows, and if I click in the scroll bar somewhere, it has to match up perfectly with the displayed rows without showing any partial rows. In short, I am required to never display a partial row.

Is there a way to enforce this with the kendoGrid? Or what is the basic approach that you might suggest for tackling this behavior in a general way?

Currently, each row is set to 15px height, and the content area is set to 240px, allowing for a total of 16 visible rows at a time. It looks great on load, but when I start to scroll down, the scroll does not match exactly with each row height. This means there might be a row that is partially displayed on both the top and bottom of the scrollable area.



Here's how I've configured the columns:

columns: [
                {field:"one",
                    title: "One",
                    attributes:{
                        style: "width:60px; height:15px; border: 0px;"
                    },
                    headerAttributes:{
                        style:"width:60px; height:20px; border-right:1px solid gray;"
                    }},

                {field:"two",
                    title: "Two",
                    attributes:{
                        style: "width:170px; height:15px; border: 0px;"
                    },
                    headerAttributes:{
                        style:"width:170px; height:20px; border-right:1px solid gray;"
                    }}
            ]

/*snip*/
$tableGrid.find(".k-grid-content").height(240);

Hello!

We use Web KendoUI Grid (v.2013.3.1127).

We have a grid with defined DataSource and things (sorting/paging/filtering) works as intended.

But we have a problem when we trying to implement following:

We try to dynamically bind given grid to JSON data on first page load (which are part of data we load when user brings given page for first time) to save additional hit to server.

We do something like this:


This works well and data are there, but we have a difficulty how to set paging properties on these data, for example how to set a dataSource.total property.

We tried:


and we also tried:


But this do not works too.

So our question is: How to properly set paging properties while dynamically binding JSON data to the Web KendoUI Grid?

thanks in advance,
Igor.

Hi,

I'm trying to make paging work on the server side for large numbers of records. If I set schema.total to an arbitrary hard coded number then i start to see paging as expected. However I would like to return the total number of records by way of an additional angularjs rest call that is just responsible for a returning a data count.

 $scope.m = {
        dataDetailedDs: new kendo.data.DataSource({
          type: "read",
          transport: {
            read: {
              url: "api/Data",
              dataType: "json"
            }
          },
 schema: {
            type: "json",
            data: "value",
            total: function() {
              $http.get('api/Data/NumberOfRecords').
                success(function(d) {
                  $scope.m.dataDetailedDs.total = d;
                  //also tried 
                 //return d;
                 //
                 //also tried
                 //return 10000;
                });
            },
            model: {
              fields: {
                Name: { type: "string" },
                ProjectId: { type: "number" },
                DataTypeId: { type: "number" },
                AlternativeName: { type: "string" },
                Guid: { type: "string" },
                Hashcode: { type: "string" },
                LastmodifiedTime: { type: "date" }
              }
            }
          },
          pageSize: 20,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true,

I can verify the success call back occurs but I cant get the grid to update itself to recognise it has pages. I assume this is because the total rest call is async and the grid doesn't then become updated.

I guess this is the wrong way to go about it, please can you help?
I didn't particularly want to wrap my entity objects in another object which has a field containing the total number of records...

As an aside i was using odata previously and got all this for free which was great until i ran into performance problems in sql server due to the generated queries from the entity framework. Sp_exexcute sql is doing lots of parameter sniffing and causing bad execution paths so queries are timing out. If a tweak the queries myself within sql server and add option recompile i can resolve the parameter sniffing bad execution path performance issues but unfortunately I don't have any control over the generated queries. if you have any thoughts on this and how to get around the issue I would also appreciate it!

Thanks for your help!
Doug

It appears that when removing an item from the multiselect box (by clicking on the "x") it not only removes it from the selected values, but also from the local data collection...

So this is the chain of events...
1.) datasource brings down a list of 10 items to local data collection on page load
2.) User selects 3 items
3.) User removes 1 item of the 3 that were selected.
4.) There is now only 9 items in the local data collection

So, how do I get that last item (the removed item) to stay in the local data collection so the user can select it again if they want. 

Hi,

i am having trouble with the Hierarchical Data Source in conjunction with the TreeView and nesting. The goal is to show a treeview with root items like "employees", "profiles" and sub items being the acutal items. So every root item is using a different data source. This is not working, as the root nodes are not expanding while the data source seems to load perfectly.
I have prepared a small fiddle to show the problem: http://jsfiddle.net/ruapho/GaFd6/4/

Any ideas?

I have a multi select that is configured like this:

var config = {
    dataTextField: "Name",
    dataValueField: "Id",
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/api/terms"
            }
        },
        filter: { field: "Name", operator: "neq", value: "Default" }
    })
};

For some reason the filter is not applied and "Default" is always shown as an option in the multi-select. Everything binds correctly otherwise. Am I missing something?

Hi,

I want to use an all day template for events that spans multiple rows but have a problem that the events sit on top of each other.

http://jsfiddle.net/Tups/Y6nTQ/3/

Is there anything I can do so that the scheduler calculates the correct positions?

Thanks