Grid Hierarchical datasource CRUD only for each table

[Pham]

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.

[Kiril Nikolov]

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