Recreate the grid on demand

14 posts, 2 answers
  1. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    Here is our scenario:
    We have a tree view control on the left with the list of document types and a grid control on the right that will list the documents (based on document type selection) with both inside a splitter control.When the users clicks on the document type, we want to recreate the grid because based on the document type the columns will change. 

    For Example:
    Document Type A will have columns Name, Type, Create Date, Attribute1, Attribute 2
    Document Type B will have columns Name, Type, Create Date, Attribute6, Attribute 7, Attribute 8, Attribute 9
    Document Type C will have columns Name, Type, Create Date, Attribute5

    Problem:
    When we click on the document type, the old column still exists and the new columns are not created but the data gets refreshed.

    Questions:
    1) What is the best option for our scenario?
    2) Is there a way to destroy and recreate grid on demand?
    3) If we have to destroy and recreate every time the users click on the document type, will that impact performance?

    Here is  the code to create grid:
    @model System.Data.DataTable

    @(Html.Kendo().Grid(Model)
        .Name("DocumentGrid")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                columns.Bound(column.ColumnName).Groupable(column.ColumnName != "Id").Title(column.Caption).Hidden(column.ColumnName == "Id");
            }
        })
        .Pageable()
        .Sortable()
        .Navigatable()
        //.Scrollable()
        .Filterable()
        .Groupable()
        .ColumnMenu()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
                {
                    foreach (System.Data.DataColumn column in Model.Columns)
                    {
                        model.Field(column.ColumnName, column.DataType);
                    }                
                })
            .Read(read => read.Action("GetDocuments", "Controller"))
            .PageSize(20)
        )
    )

    Here is the code the create the tree view:
    @helper RenderTreeView()
    {
        @(Html.Kendo()
              .TreeView()
              .ExpandAll(true)
              .Name("treeview")
              .DataTextField("Text")
              .Events(events => events
                                      .Select("onChange"))
              .BindTo(Model, mappings =>
              {
                  mappings.For<Test.Models.AllDocumentType>(binding => binding
                                                                                         .ItemDataBound((item, AllDocumentType) =>
                                                                                         {
                                                                                             item.Id = AllDocumentType.Id;                                                     
                                                                                             item.Text = AllDocumentType.Text;                        
                                                                                         })
                                                                                         .Children(AllDocumentType => AllDocumentType.DocumentTypes));
                  mappings.For<Test.Models.DocumentType>(binding => binding
                                                                                      .ItemDataBound((item, DocumentType) =>
                                                                                      {
                                                                                          item.Id = DocumentType.Id.ToString();
                                                                                          item.Text = DocumentType.Name;
                                                                                      }));
              })                     
        )
    }

    Here is the onchange event:
    function onChange(e) {
            var data = treeview.dataItem(e.node);
            
            $.post('@Url.Action("DocumentGrid", "Collector")', {
                id: data.id
            }, function (data) {
                var grid = $("#DocumentGrid").data("kendoGrid");
                grid.dataSource.read();            
            });
        }; 

    Thanks,
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Apr 2013 Link to this post

    Hello,

     The only option to recreate the grid is to do it on the client side:

    1. Call the destroy method of the grid
    2. Empty the grid element
    3. Create a new grid

    Here is a live demo: http://jsbin.com/iyukiv/1/edit

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Apr 2013

    Posted 30 Apr 2013 Link to this post

    Hello Atanas,
    Thank you for the information. I will try what you have suggested.
    I just have one more question. Since i am using the splitter control, is there a way to refresh the right pane that contains the grid when user clicks the tree view on the left pane?

    Thanks
  4. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 01 May 2013 Link to this post

    Hi,

     You can use the ajaxRequest method to reload a splitter pane.

    Kind regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Apr 2013

    Posted 01 May 2013 Link to this post

    Thank you for the tip. The ajaxRequest method works. I was able to reload the pane with the grid so i didn't have to destroy and recreate the grid. The reload takes care of that.
  6. Bryan
    Bryan avatar
    5 posts
    Member since:
    Mar 2013

    Posted 29 May 2013 Link to this post

    Atanas,

    I work with Dinesh, so this is a follow-up question.  We are now trying to persist grid and column settings, and it seems that I cannot access the grid's datasource when it is in a separate partial view.  I tried to move the grid into the same view, but then there are many other problems with trying to destroy, recreate, and re-populate the grid and hide columns and whatnot, so I was curious if there is some way I am not aware of to access the grid's datasource (in a partial view) from the parent view to push it back to the controller.  Any ideas on how to accomplish this?

    Thanks,
    Bryan
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 May 2013 Link to this post

    Hi,

     Why can't you access the grid data source? It is exposed via the dataSource field.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Bryan
    Bryan avatar
    5 posts
    Member since:
    Mar 2013

    Posted 29 May 2013 Link to this post

    I can access the dataSource of the grid when it is in a partial view, but all the properties are always: 
    page: 1, pageSize: 0, sort = null, group = null, filter = null.  

    When I moved the grid back to the parent, I could see all of the real data in the datasource, but when it is in a partial, I get the above values.

    The jquery/javascript is in the parent view (it doesn't seem to pick it up if it is in the partial).  

    I don't see the actual page when I view the source from the browser.  It doesn't seem to inline it.
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 May 2013 Link to this post

    Hello,

     I am not sure I understand what the exact problem is. Could you provide the code you are currently using? 

     The browser displays only the HTML rendered by the server. Any dynamic HTML is not shown. You need to use the developer tools of your browser to inspect the live DOM.


     On a side note the state of the datasource by default is page: 1, pageSize: 0, sort = null, group = null, filter = null.  

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Bryan
    Bryan avatar
    5 posts
    Member since:
    Mar 2013

    Posted 29 May 2013 Link to this post

    I will put something together.  Thanks!
  11. Bryan
    Bryan avatar
    5 posts
    Member since:
    Mar 2013

    Posted 29 May 2013 Link to this post

    Here is a quick demo of what I am talking about.  The method on the HomeController is "SaveGridSettings".  
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 May 2013 Link to this post

    Hello Bryan,

    Your code looks correct (I couldn't test it though because it is not a complete application). What exactly happens when the document_gridOnDataBound function gets executed? Have you tried debugging it? Is the grid reference valid? You can check that using the debugger which is part of your browser's developer tools.

    Regards,

    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Bryan
    Bryan avatar
    5 posts
    Member since:
    Mar 2013

    Posted 30 May 2013 Link to this post

    Ah,  found the "Pause on all exceptions" toggle.  It is failing in jquery.min.js somewhere.  I'm not really sure how to fix it, though:

    "Error: An invalid or illegal string was specified.
        at Function.st [as find] (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:4:6060)
        at b.fn.extend.find (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:4:20941)
        at b.fn.b.init (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:1154)
        at b (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:206)
        at HTMLTableElement.b.event.handlers (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:28766)
        at HTMLTableElement.b.event.dispatch (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:28046)
        at HTMLTableElement.v.handle (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:25042)"
  14. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 May 2013 Link to this post

    Hi,

     We are not sure how to fix this either. We recommend opening a support ticket and attaching a runnable version of your project which replicates the problem. Once we reproduce it locally we would get back with a solution.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top