Grid on Window - problem with reopening in IE9

2 posts, 0 answers
  1. Igor
    Igor avatar
    1 posts
    Member since:
    Jun 2012

    Posted 02 Jan 2013 Link to this post

    Hi,
    I'm trying to open Grid on Window. It works fine for the first time, but when i close the window and try to reopen it i get DOM Exception: NOT_FOUND_ERR(8). This problem occurs only in IE (It works fine in Chrome and Firefox).

    I have grid "reservationGrid" with custom command on last column, which opens window with details. In pop-up window i'm trying to show grid "membersGrid". As i said before it works fine for the first time, but when i close the window and try to reopen it, it shows the Grid but it fails to load the content from "members".

    Javascript:
    var members = [{ Ime: "John", Priimek: "Novak", KrajRojstva: "London", DatumRojstva: new Date(1987, 4, 19) }];
     
                        var memberDataSource = new kendo.data.DataSource({
                            pageSize: 30,
                            data: members,
                            autoSync: true,
                            schema: {
                                model: {
     
                                    fields: {
                                        Ime: { editable: true },
                                        Priimek: { editable: true },
                                        KrajRojstva: { editable: true },
                                        DatumRojstva: { editable: true, type: "date" }
                                    }
                                }
                            }
                        });
     
                        $("#reservationGrid").kendoGrid({
                            dataSource: dataSource,
                            groupable: true,
                            sortable: true,
                            pageable: {
                                refresh: true,
                                pageSizes: true
                            },
                            columns: [
                                { field: "Location",    width: 70,      title: "Lokacija"   },
                                { field: "Unit",        width: 70,      title: "Enota"      },
                                { field: "Capacity",    width: 40,      title: "Osebe"      },
                                { field: "From",        width: 60,      title: "Od"   , type:"date" , template: "#=kendo.toString(From, 'd.M.yyyy') #" ,format:"d.M.yyyy" },
                                { field: "To",          width: 60,      title: "Do"   , type:"date" , template: "#=kendo.toString(To, 'd.M.yyyy') #" ,format:"d.M.yyyy" },
     
                                { command: { text: "Rezerviraj", click: showDetails }, title: " ", width: "50px" }
                            ],
                            editable:true
                             
                        });
     
                        wnd = $("#detail-container")
                           .kendoWindow({
                               title: "Podrobnosti o rezervaciji",
                               modal: true,
                               visible: false,
                               resizable: false,
                               actions: ["close"],
                               width: 750,
                               height: 500
                           }).data("kendoWindow");
     
                         
                         
                        function showDetails(e) {
                             
                            e.preventDefault();
                            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
     
                            detailsTemplate = kendo.template($("#reservationDetail").html());
     
                            wnd.content(detailsTemplate(dataItem));
                            wnd.center().open();
     
                            $("#membersGrid").kendoGrid({
                                dataSource: memberDataSource,
                                sortable: true,
       
                                toolbar: ["create"],
                                columns: [
                                    { field: "Ime", width: 50, title: "Ime" },
                                    { field: "Priimek", width: 50, title: "Priimek" },
                                    { field: "KrajRojstva", width: 50, title: "Kraj Rojstva" },
                                    { field: "DatumRojstva", width: 60, title: "Datum Rojstva", type: "date", template: "#=kendo.toString(DatumRojstva, 'd.M.yyyy') #", format: "d.M.yyyy" },
     
                                    { command: {name: "destroy", text:"zbrisi"} , width: "50px" }
                                ],
                                editable: true
     
                            });
     
                            wnd.center();
     
                        }
    HTML:
    <div id="reservationGrid" class="kendo-grid"></div>
                 
    <div id="detail-container" ></div>
     
    <script type="text/x-kendo-tmpl" id="reservationDetail">
       <div id="top-wrapper">
    <div id="table" class="reservationDetail-table">
      <table width:"300px">
         <tr>
           <td>Location: <div class="reservationDetail-property">#= Location #</div></td>
           <td>Unit: <div class="reservationDetail-property">#= Unit #</div></td>
         </tr>
         <tr>
           <td>Od: <div class="reservationDetail-property">#= kendo.toString(From, "d.M.yyyy") #</div>
                       </
    td>
           <td>Do: <div class="reservationDetail-property">#= kendo.toString(To, "d.M.yyyy") #</div>
                      </
    td>
                   </tr>
        </table>
      </div>
                        
    <div id="button-confirmReservation">
        <a class="k-button k-button-icontext " href="\\#"><span class="k-icon k-update">             </span>Confirm</a>
     </div>
          </div>

          <div id="membersGrid" class="kendo-gridMembers"></div>
                 
    </script>
    Thanks in advance!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Jan 2013 Link to this post

    Hi Igor,

    In order to avoid the observed behavior you shouldn't recreate the membersGrid every time the "Rezerviraj" button is clicked. For your convenience I prepared a simple jsFiddle example which demonstrates a possible implementation. 
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top