Grid on Window - problem with reopening in IE9

[Igor]

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!

[Iliana Dyankova]

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