Questions on Kendo UI for jQuery Forum

3 answers

170 views

Grouping is setup for the kendo grid. When columns are dragged into the grouping area, do you only allow sorting by clicking on the grouping names? Is it possible to also click on column headers and sort?

Hierarchical Data Source

answered on 25 Nov 2015

3 answers

205 views

Hierarchy data not displaying records

I have an MVVM application using Kendo Grid, and I want to display hierarchy (nested grid). I am trying to replicate this example but I am not able to display the hierarchy data. How can I get the hierarchy records to display?

cshtml code:

<div id="custOrderGrid"

        data-role="grid"

        data-resizable="false"

        data-navigatable="true"

        data-editable="true"

        data-pageable="false"

        data-scrollable="true"

        onscroll="true"

        data-detail-template="child-template"

        data-columns="[

                { 'field': 'OrderID', 'title': '<b>Order #', 'width': 65 },

                { 'field': 'LineNo', 'title': '<b>Line Number', 'width': 65 },

                { 'field': 'ItemNo', 'title': '<b>Item Number', 'width': 65 },

                { 'field': 'Desc', 'title': '<b>Description', 'width': 150 }

            ]"

        data-bind="source: orderSearchResults"

        style="height: 55%">

</div>

<script id="child-template" type="text/x-kendo-template">

    <div data-role="grid"

         data-bind="source: obj2"

         data-columns="[

    { field: 'name' },

    { field: 'oid' }

    ]"></div>

</script>

typescript code:

orderSearchResults = new kendo.data.DataSource({

schema: {

model: {

id: "OrderID",

fields: {

LineNo: { type: "string" },

ItemNo: { type: "string" },

Description: { type: "string" }

}

},

data: [

{

OrderID: "L44ZX4", LineNo: "15", ItemNo: "*X1WCJH", Description: "CDF9X2XSB",

obj2: [{

name: 'a1',

oid: 1

},

{

name: 'b1',

oid: 2

},

{

name: 'c1',

oid: 3

}]

}

]

});

I don't see an error messages. How can I display the hierarchy records? See image file attached.

Hierarchical Data Source

answered on 30 Jul 2015

1 answer

103 views

How to map the grid header column to group header column?

We are trying to mapping the group Header column to the grid columns. While we re-size the column, the design(UI) getting disturbed.

Hierarchical Data Source

answered on 27 Jul 2015

3 answers

46 views

IE 10 issue - new row is inserting at last of the grid for batch editing grid

In Internet Explorer 10, while we are add one row using "Add" button, the row will be added on the last position in the grid instead of top of the grid.

Hierarchical Data Source

answered on 27 Jul 2015

1 answer

221 views

Grid Hierarchical datasource CRUD only for each table

Hello Telerik team

--------------- Problem ---------------

I'm using Kendo template to show a Grid. Data bind to this Grid retrieves from 3 tables, each table in Database map to a class in source.

I build my grid using Kendo template, and bind to div using Kendo.

html

<script type="text/html" id="temp-grid">

<div data-bind="...">

.... grid structure

</div>

</script>

kendo.bind($('#GridQuestion'), questionViewModel);

Grid shows data as this: List groupQuestionSet, each groupQuestionSet contains many QuestionSet, each QuestionSet contains many Question.

This is Grid screen in browser:

Gridview in browser

This is Table Relationship.

Table relationship diagram

This is storeprocedure, SQL query :

SELECT GroupQuestionSet.Id AS 'GroupQuestionSetId', GroupQuestionSet.GroupQuestionSetName, QuestionSet.Id AS 'QuestionSetId', QuestionSet.QuestionSetName, Question.Id as 'QuestionId', Question.QuestionContent

FROM GroupQuestionSet

INNER JOIN QuestionSet ON GroupQuestionSet.Id = QuestionSet.GroupQuestionSetId

INNER JOIN Question on Question.QuestionSetId = QuestionSet.Id

This is JSON test data :

function initTestData() {

//This is data from GroupQuestionSetTable in database

var GroupQuestionSetTable = [

{

"Id": 1,

"GroupQuestionSetName": "GroupQuestionSet 1"

},

{

"Id": 2,

"GroupQuestionSetName": "GroupQuestionSet 2"

},

{

"Id": 3,

"GroupQuestionSetName": "GroupQuestionSet 3"

}

];

//This is data from QuestionSetTable in database

//GroupQuestionSetId if foreign key link to Id column of GroupQuestionSetTable

var QuestionSetTable = [

{

"Id": 1,

"GroupQuestionSetId": 1,

"QuestionSetName": "QuestionSet 1"

},

{

"Id": 2,

"GroupQuestionSetId": 1,

"QuestionSetName": "QuestionSet 2"

},

{

"Id": 3,

"GroupQuestionSetId": 1,

"QuestionSetName": "QuestionSet 3"

},

{

"Id": 4,

"GroupQuestionSetId": 2,

"QuestionSetName": "QuestionSet 4"

}

];

//This is data from SubQuestionTable in database

//QuestionSetId if foreign key link to Id column of QuestionSetTable

var QuestionTable = [

{

"Id": 1,

"QuestionSetId": 1,

"QuestionContent": "QuestionContent 1"

},

{

"Id": 2,

"QuestionSetId": 1,

"QuestionContent": "QuestionContent 2"

},

{

"Id": 3,

"QuestionSetId": 1,

"QuestionContent": "QuestionContent 3"

},

{

"Id": 4,

"QuestionSetId": 2,

"QuestionContent": "QuestionContent 4"

}

];

}

------------------------ need ------------------------

When I create, update, delete Question inside QuestionSet (or GroupQuestionSet or QuestionSet) Grid only interact with Database and only reload that row. The same as when we use Kendo grid with create, read, update, delete

------------------------ My curent solution ------------------------

When insert, update, del: Browser rebind all grid. -> it will slow if we have large data.

------------------------ My temporary solution ------------------------

I have read this topic http://stackoverflow.com/questions/16097878/kendo-ui-unable-to-bind-data-to-list-view-using-mvvm but I don't understand.

My temporary solution is :

Source:

Contruct a Temp object the same as result table from above query-->Load Kendo grid using that list of Temp object and use Kendo grid with create, read, update, delete -> In create, read, update, delete I will write code to create, read, update, delete to only GroupQuestionSet or QuestionSet or Question

I still looking for some other solutions.

Thank you.

Hierarchical Data Source

answered on 17 Jun 2015

2 answers

90 views

transport destroy method delete issue

Hierarchical Data Source
When the transport destroy is called the method is always GET and not delete as defined.
What am I doing wrong here ?

So below for the destroy code:

destroy: function (options) {
$.ajax({
type: 'delete',
url: "http://localhost:81/public/index.php/treepage/" + options.data.id,
dataType: "jsonp",
success: function(result) {
// notify the data source that the request succeeded
console.log("destroy succes");
},
error: function(result) {
// notify the data source that the request failed
console.log("destroy error", result);
options.error(result);
},
beforeSend: function() {
console.log("treemodel - beforesend - destroy");
}
})
.done (function(data) { console.log("done destroy - data:", data) });
}

Hierarchical Data Source

answered on 25 Mar 2015

1 answer

281 views

Example of building a hiearchal data source

All of the examples I have seen for the HierarchalDataSource show binding, either to local data, somewhat artificially hard coded, or to remote data that is assumed to be already in json hierarchal format.

I, however, have a flat datasource from which I need to build a hierarchy. So I started out with the following code (html not shown). The question is how to create the children (and further children of children). Obviously this needs to get more complex because I will need to access my own flat data records and also I will need templates for all nodes. But pointers for this would be a great help. Thanks in advance.

(function () {
    'use strict';
angular.module('FieldTreeApp', ['kendo.directives'])
       .controller('FieldTreeViewCtlr', function ($scope) {
           $scope.treeOptions = {
               dataSource: makeData()
           };

    function makeData() {
                var ds = new kendo.data.HierarchicalDataSource();
                ds.add({
                    text: "My first node"
                });
                ds.add({
                    text: "My second node"
                });

                var x = ds.data(); // Does get my data.

                return ds; // This does create the 2 top level nodes.
            }

Hierarchical Data Source

answered on 20 Feb 2015

1 answer

87 views

Subclassing kendo.data.Node and kendo.data.HierarchicalDataSource

I would like to create a specific hierarchy of Manufacturers, Cars and Parts.

To achieve this, I would like to subclass kendo.data.Node as follows:

var Manufacturer = kendo.data.Node.extend({

//...

});

var Car = kendo.data.Node.extend({

//...

});

var Part = kendo.data.Node.extend({

//...

});

I would then like to subclass kendo.data.HierachicalDataSource, to represent such a hierarchy.

Question 1: How can I achieve that?

Data comes from a RESTful JSON service located at:
http://<ip address>/api/v1/manufacturers (GET, POST)
http://<ip address>/api/v1/manufacturers/<mid> (GET, PUT, DELETE)
http://<ip address>/api/v1/manufacturers/<mid>/cars (GET, POST)
http://<ip address>/api/v1/manufacturers/<mid>/cars/<cid> (GET, PUT, DELETE)
http://<ip address>/api/v1/manufacturers/<mid>/cars/<cid>/parts (GET, POST)
http://<ip address>/api/v1/manufacturers/<mid>/cars/<cid>/parts/<pid> (GET, PUT, DELETE)

Then I would like to instantiate my subclassed hierarchy to use this JSON service.

Question 2: How can I achieve that?

Hierarchical Data Source

answered on 06 Feb 2015

1 answer

394 views

Angular TreeView sorting children of an node by index

Hi,
I have an angular TreeView, and I need to reorder nodes from a specfic parent by a item property (index).
How can I do this?

Hierarchical Data Source

answered on 16 Dec 2014

1 answer

149 views

Multiple Children fields?

Hi,

The nodes comprising my HierarchcalDataSource possess two fields that hold potential children and all children from both fields need to be displayed in my kendoTreeView.  But the model.children property only allows specifying a single field (I believe - still very new to this). Basically I am looking for something that does the following where the two children fields are idenfied as 'Children1' and 'Children2':

dataSource: new kendo.data.HierarchicalDataSource({
         schema: {
               model: { id: "Id",
                             hasChildren: function (item) {
                                            return ((item.Children1 != null && item.Children1.length > 0) ||
                                                        (item.Children2 != null && item.Children2.length > 0));
                             },
                             children: "Children1" or "Children2"
                }
         }
}

Thank you,
Tom

Hierarchical Data Source