Questions on Kendo UI for jQuery Forum

1 answer

500 views

Using the products example, I have a 5 column grid. Columns 1 and 2 are frozen, 3 and 4 are editable, and 5 is not editable.

I have used the onkeypress event to modify the tab behavior so it will only tab in columns 3 and 4, but it will also wrap from the last item in column 4 to the first one in column 3.

What I need to figure out is how to also change the selected cell based on using the arrow keys. The first one I am working on is the UP keypress. While I can detect the UP press, and I'm not sure the best way to get the previous row for the same column.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/frozen-columns">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
        $(document).ready(function() {
   var crudServiceBaseUrl = "http://demos.kendoui.com/service";
   var dataSource = new kendo.data.DataSource({
           transport: {
           read: {                url: crudServiceBaseUrl + "/Products",                dataType: "jsonp"              },
           update: {                url: crudServiceBaseUrl + "/Products/Update",                dataType: "jsonp"              },
           destroy: {                url: crudServiceBaseUrl + "/Products/Destroy",                dataType: "jsonp"              },
           create: {                url: crudServiceBaseUrl + "/Products/Create",                dataType: "jsonp"              },
           parameterMap: function(options, operation) {
               if (operation !== "read" && options.models) {
                   return {models: kendo.stringify(options.models)};
               }
           }
       },
       batch: true,
       pageSize: 30,
       schema: {
           model: {
               id: "ProductID",
               fields: {
                   ProductID: { editable: false},
                   ProductName: { editable: false },
                   UnitPrice: { editable: true},
                   UnitsInStock: {editable: true},
                   Discontinued: { editable: false, type: "boolean" }
               }
           }
       }
          });

   $("#grid").kendoGrid({
       dataSource: dataSource,
       editable: true,
       scrollable: true,
       navigatable: true,
       height: 500,
       columns: [
           { field: "ProductID", title: "ProductID", locked: true, lockable: false, width:110 },
           { field: "ProductName", title: "Product Name", locked: true, lockable: false, width: 510 },
           { field: "UnitPrice", title: "Unit Price", width: 510, attributes: {class: "editable-cell" } },
           { field: "UnitsInStock", title: "Units In Stock", width: 510, attributes: {class: "editable-cell" } },
           { field: "Discontinued", title: "Discontinued", width: 510 }
       ]
       }).find("table").on("keydown", onGridKeydown);
   });

   function onGridKeydown(e){
       if (e.keyCode === kendo.keys.TAB) {
           //Only want tabs to cycle through items specified with editable-cell
           //Tabbing in last item in grid will wrap to first editable-cell.
           var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
           var current = grid.current();
           var nextCell, nextRow;
           if (!current.hasClass("editable-cell")) {
               nextCell = current.nextAll(".editable-cell");
               if (!nextCell[0]) {
                   //search the next row
                   nextRow = current.parent().next();
                   nextCell = current.parent().next().children(".editable-cell:first");
               }
               nextRow = current.parent().next();
               if(!nextRow.length && !nextCell.length){
                   nextCell = grid.tbody.find(".editable-cell:first");
               }
               grid.current(nextCell);
               grid.editCell(nextCell[0])
           }
       } else if (e.keyCode === kendo.keys.UP) {
           var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
           var current = grid.current();
           console.log("up");
           //Need to move 'up' one row but maintain same column.
           //If UP pressed in first row in grid, wrap to last row.
       } else if (e.keyCode === kendo.keys.RIGHT || e.keyCode === kendo.keys.LEFT) {
           console.log("sideways");
           //If right, go nextCell (like a tab)
           //if left, see if possible to get previous cell.
       }
   };
</script>
</body>
</html>

Grid

answered on 21 Jul 2015

5 answers

250 views

TypeScript definition issue of DataSourceGroupItem

var x = new kendo.data.DataSource({

    data: [],

    group: {

        field: "boo", aggregates: [

            { field: "foo", aggregate: "sum" }

        ]

    }

});

The above TypeScript code causes a compilation error with TypeScript definition of KendoUI (http://www.telerik.com/forums/q1'14-release---missing-typescript-definitions-70584e6883b0 ). Here is the error message:

Supplied parameters do not match any signature of call target:
Types of property 'group' of types '{ data: any[]; group: { field: string; aggregates: { field: string; aggregate: string; }[]; [n: number]: kendo.data.DataSourceGroupItem; }; }' and 'kendo.data.DataSourceOptions' are incompatible:
Type '{ field: string; aggregates: { field: string; aggregate: string; }[]; [n: number]: kendo.data.DataSourceGroupItem; }' is missing property 'concat' from type 'kendo.data.DataSourceGroupItem[]'.

General Discussions

answered on 21 Jul 2015

3 answers

89 views

[Solved] Need guidance on how Views are destroyed

I noticed that template-based Views are not destroyed as Router is navigating through them - they are simply taken out of the DOM. Sometimes this might be desired behavior, but not always. What is the recommended approach for destroying views, when Router is navigation out of them? This also would require complete disconnect from any subscriptions to ViewModel if they are kept in memory.

Thanks,

Sam

View

answered on 21 Jul 2015

3 answers

1.2K+ views

Server side Grouping, sorting, and filtering

We are using a kendo ui grid to display some data and have had some issues with datasets over 1000 rows. I built a web service and enabled server side paging which improved the initial load time. But, now the grid is very sluggish when grouping, so I am attempting to enable server side grouping. In addition, I am looking at sorting and filtering on the server in an attempt to improve performance.

What I am struggling with is determining what is being passed to the WCF service from the kendo ui grid for grouping, sorting, and filtering.

So far we have a method prototype of public RetObj GetData(int skip, int take, int page, int pageSize).

I know I will have to add parameters to handle the grouping, sorting, and filtering, but how do I determine what parameters to add?

Grid

answered on 21 Jul 2015

3 answers

123 views

Window.Center() does nothing

Hi, I tried to get a modal window to center and its not having any effect.

I can move the window around with the position attributes, and by putting the window div in different places in the DOM..

The center() function does not throw any exceptions.

The problem exists in both Chrome and IE11.

My page does not contain any Iframes. Any advice?

Window

answered on 21 Jul 2015

2 answers

126 views

[Solved] Custom error template breaks datetimepickers when using Angular

Whenever I add a k-error-template to my validator form element, all kendo datetimepickers are gone and replaced by a plain input box.

Here's an example of the behavior I'm seeing:

http://dojo.telerik.com/ipupO/2

Validation

answered on 20 Jul 2015

2 answers

258 views

[Solved] Add WYSIWYG into kendo grid popup column

I want to add KendoEditor to my popup of custom-edit of 1 column field inside my kendo grid. I could add textarea successfully but don't know how to add kendoEditor to replace textarea.

{ field: "Description", title: "Description", id:"desc", attributes: { style: "text-align:left" }, editor: textareaEditorB },

function textareaEditorB(container, options) {
$('<textarea data-bind="value: ' + options.field + '" cols="100" rows="18" maxlength="10000"></textarea>').appendTo(container);
// $('$("#desc").kendoEditor()').appendTo(container); <==?????
}

Grid

answered on 20 Jul 2015

5 answers

5.7K+ views

selecting the closes row in the grid

I have a checkbox on each row of the grid on which if selected trying to get the id of that row. I have been using grid.dataItem($(event.target).closest("tr")) which was working perfectly fine and suddenly it stopped working giving null exception. I am using in lot of places event.target for the grid all are having the same problem. Did i accidentally delete any reference or you guys changed anything?

$("#gridProvidersWindow").on("click", ".checkbox", function (e) {

var checked = $(this).is(":checked");

var grid = $("#gridProvidersWindow").data("kendoGrid");

var model = grid.dataItem($(event.target).closest("tr"));

checkedProviderIds[model.Id] = checked;

});

Grid

answered on 20 Jul 2015

6 answers

583 views

Add button not working while applying filters on the grid column

when we apply filter to any of the grid column, the add record button is not working?

please advice.

Grid

answered on 20 Jul 2015

13 answers

3.2K+ views

Load and Expand all parent nodes when child node id is given with ondemand loading in treeview

Hello,

I have a treeview which has multiple levels and so we load only root nodes when treeview is displayed and everytime a node is expanded we query database and load its children. When the treeview is loaded sometimes i have a child node id and when treeview laods if a node id is passed then we should select the node by default and expand all its parent nodes. So my problem is when mytreeview loads i have only root nodes loaded adn no children and so if i look for id i do not find the node to expand. So my question is how do we load on demand when a child node id is provided which could be from nth level from any parent node whcih are not yet loaded.

thanks

Anamika

TreeView

answered on 20 Jul 2015