Grid Hierarchical datasource CRUD only for each table

2 posts, 0 answers
  1. Pham
    Pham avatar
    12 posts
    Member since:
    Jun 2015

    Posted 15 Jun 2015 Link to this post

    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.

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top