displaying gridview in window only appears once

3 posts, 0 answers
  1. Perrin
    Perrin avatar
    7 posts
    Member since:
    Jun 2018

    Posted 21 Jun 2018 Link to this post

    I'm working on a project which uses a button to open a kendo window. Inside this kendo window is a splitter which splits the window vertically  50%. On the left side is a kendo treeview control and on the right, a gridview will appear via the treeview's select event. This works but only once. I then have to refresh the page to get it to work again. I'm not sure why this is. I'll include some example code below. Thank you for your help. 

    Here's the HTML for the window and the grid 

    <div id="example">
       <div id="window">
                <div id="horizontal" style="height: 100%; width: 100%;">
                   <div id="left-pane">
                      <div class="component-tree-view k-content">
                         <div id="treeview-left"></div>
                        </div>
                     </div>
                   <div id="grid">      
                   </div>
        
                </div>
          
             </div>
    </div>

     

    This is the javascript to initialize the the splitter and the window 

    $(document).ready(function() {
     
       $("#horizontal").kendoSplitter({
          panes: [
              { collapsible: true },
              { collapsible: false },
              { collapsible: true }
          ]
       });
     
           var myWindow = $("#window");
     
     
     
            myWindow.kendoWindow({
                width: "1500px",
                title: "Parts Group",
                height:"500px",
                visible: false,
                actions: [
                    "Close"
                ],
            }).data("kendoWindow").center().open();
        });

     

    And this is my select event for the treeview to initialize the grid.

    function onselect(e) {
     
       //initializing the grid here
       $("#grid").kendoGrid({
          toolbar: [
            { template: kendo.template($("#template").html()) }
          ],
          dataSource: {
             data: filteredData,
             schema: {
                model: {
                   fields: {
                      ComponentId: { from: "ComponentId", filterable: true, },
                      Description: { from: "Description", filterable: true, }
                   }
                }
             }
          },
          selectable: true,
          change: onChange,
          allowCopy: true,
          height: 500,
          scrollable: false,
          sortable: true,
          refresh: true,
          columns: [
              { field: "ComponentId", title: "Component Id", template: "#=test(data)#", filterable: true },
              { field: "Description", title: "Description", template: "#=description(data)#", filterable: true }
          ],
       });
       
    }

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2104 posts

    Posted 25 Jun 2018 Link to this post

    Hello Perrin,

    Here's a dojo example, in which a Grid is initialized on TreeView node selection in a Splitter, which is nested in a Window. At my end the Grid is visible every time the Window is opened. Could you modify the example accordingly so that the issue you are experiencing is reproduced and link it back for further review?

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Perrin
    Perrin avatar
    7 posts
    Member since:
    Jun 2018

    Posted 25 Jun 2018 Link to this post

    Sure.. Thank you for your support.
Back to Top