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

Hello,

I have an issue when using Kendo Editor for the element that has html binding.

I have the following markup:


On the page load I get the following error:

Uncaught Error: The html binding is not supported by the Editor widget

What could be a possible solution of this problem? How can I use Kendo Editor and at the same time use MVVM bindings? I tried creating a custom binding from the example here. But I get the same error saying that my custom binding is not supported by the Editor widget.

Hi Team,

We are developing an Intuition platform, having Auto complete functionality in the editor. Here we are handling the editor data as expressions,

In the editor there will be any number of variables, operators, text and comments can use by the user. Each line is separated in <p> and inside that all the nodes are formatted.

For Example:
Variables and Operators placed in <a> tags
Comments and default text in <span> tags 

We are having typing and Editing functionality, if the typing text is matching in the variable or operator text then we have to place the string in <a> tag.
When the user can edit the expression anywhere in the editor. If they edit the variable text,
 For example:

Consider "Alpha0" is a variable which is formatted to <a href="#" style="color: #a50;">Alpha0</a>, the user edited the text to "Alha0", after the editing the node formatting to <Span style=" color: black;">Alha0</span> 

The color format change is working when typing and editing in Chrome. In IE 10 is not supporting in all the cases.

If I try to update in the middle of the expression the caret position is jumping to first node. The below code is using for getting the caret position

var selection = editor.getSelection();
var selectedElement = selection.focusNode;
var range;

if (selectedElement.nodeName != 'P'
&& selectedElement.nodeName != 'DIV') {
range = editor.getSelection().getRangeAt(0).endOffset;
} else if ((selectedElement.nodeName == 'P' || selectedElement.nodeName == 'A')) {
var index = editor.getSelection().getRangeAt(0).endOffset;
if (index != 0) {
selectedElement = selectedElement.childNodes[index - 1];
range = selectedElement.textContent.length;
} else if (selectedElement.childNodes.length > 0) {
selectedElement = selectedElement.childNodes[index];
range = index;
}
}

If the text is editing in the middle of <a> tag it should change to <span> tag based on the validation, in that case editor's caret position getting as "0". So it jumping to the first node. Please help us with this issue.

Thanks in Advance.

ok, using fiddler and chrome tools I don't see a POST go out to my web service for the following when using "people.add"


i have read posts for hours and hours...tried almost everything i read and can't get the create to POST to my web service.

Thanks for any help.
Richard