This is a migrated thread and some comments may be shown as answers.

Grid Hierarchical datasource CRUD only for each table

1 Answer 213 Views
Hierarchical Data Source
This is a migrated thread and some comments may be shown as answers.
Pham
Top achievements
Rank 1
Pham asked on 15 Jun 2015, 12:01 PM

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

<div id="GridQuestion" data-bind="..."></div>

<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.

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 17 Jun 2015, 02:43 PM
Hi,

The functionality that you are looking for is not available as a built in feature of the grid. So you need to handle this in your server side code which I can see that you already did, so this is the way to go. 
Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Hierarchical Data Source
Asked by
Pham
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or