Window only opens once

[Diego Alejandro]

Hello, I'm really new using Kendo. I'm trying to open a window from a custom column in kendo grid. What am I doing wrong? Because the window opens just the first time.

<div id="window"></div>
<div id="grid"></div>

 

    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

            var isShareholder = "True"; //comes from code-behind

 

            if (isShareholder == "True") {

 

                var serviceUrl = '/mif/apps/Services/ControlServices.svc' + '/GetShareholdersByType';

 

                var serviceData = '{ "appKey" : "E4AC543E-9D95-C360-EAF1EFC5A4CA716F", "operationNum" : "EQU/MS-11838-BO", "type" : "FUND_INVESTOR" }';

 

                 $.ajax({

                     url: serviceUrl,

                     data: serviceData,

                     type: "POST",

                     processData: true,

                     contentType: "application/json",

                     timeout: 10000,

                     success: function (response, status) {

                         if (status == "success") {

                             BindGrid(response);                           

                         }

                     },

                     error: function (message) {

                         alert(message.responseText);                       

                     }

                 });

             }           

         });

 

        function BindGrid(data) {

            var dataSource = new kendo.data.DataSource({

                data: data,

                schema: {

                    model: {

                        fields: {

                            Code: { type: "string" },

                            OperationNum: { type: "string" },

                            ShareholderId: { type: "number" },

                            ShareholderName: { type: "string" },

                            AcronymIdb: { type: "string" },

                            InvestmentAmount: { type: "number" },

                            InvestmentExchangeRate: { type: "number" },

                            InvestmentDate: { type: "date" },

                            InvestmentCurrencyId: { type: "string" },

                            CurrencyName: { type: "string" },

                            InvestmentUsEqu: { type: "number" },

                            SharePercentage: { type: "number" },

                            Keyword: { type: "string" }

                        }

                    }

                },

                aggregate: [

                        { field: "ShareholderName", aggregate: "count" },

                        { field: "InvestmentAmount", aggregate: "sum" },

                        { field: "SharePercentage", aggregate: "sum" }

                    ]

                //,pageSize: 3

            });

 

            $("#grid").kendoGrid({

                dataSource: dataSource,

                //change: onChange,

                selectable: "multiple",

                //height: 400,

                filterable: true,

                sortable: true,

                pageable: false,

                scrollable: false,

                resizable: true,

                animation: {

                    open: { effects: "fadeIn" }

                },

                //dataBound: function (e) {

                //  alert('databound');

                //},

                columns: [

                            {

                                field: "ShareholderName"

                                , title: 'Shareholder'

                                //, footerTemplate: '<div style="font-color: Red;">Totals' + ": #=count#" + "</div>"

                            }

                            , {

                                field: "SharePercentage"

                                , title: 'SharePercentageAbbr'

                                , format: "{0}%"

                                , width: "15%"

                                , filterable: false

                                , template: '<div style="text-align:center;">#=SharePercentage#%</div>'

                                //, footerTemplate: '<div style="text-align:center;">#=sum#%</div>'

                            }

                            , {

                                field: "InvestmentAmount"

                                , title: 'InvestmentAmountAbbr'

                                , format: "{0:C}"

                                , width: "15%"

                                , filterable: false

                                , template: "<div style='text-align:right;'>#=kendo.toString(InvestmentAmount, 'C')#</div>"

                                , footerTemplate: "<div style='text-align:right; background-color: \\#8EBC00; color: \\#FFFFFF; font-weight: bold;'>#=kendo.toString(sum, 'C')#</div>"

                            }

                            , {

                                field: "InvestmentDate"

                                , title: 'InvestementDateAbbr'

                                , format: "{0:dd/MMM/yy}"

                                , filterable: false

                                , template: "<div style='text-align:center;'>#=kendo.toString(InvestmentDate, 'dd/MMM/yy')#</div>"

                                , width: "10%"

                            }

                            , {

                                field: "CurrencyName"

                                , title: 'InvestmentCurrencyAbbr'

                                , filterable: false

                                , width: "20%"

                            }

                            , { field: "Code", title: " ", filterable: false, template: "<input type='button' class='k-button k-button-send' value='Details' onclick='showDetails(\"#=Code#\")'/>" }

                        ]               

            }).data("kendoGrid");           

         }

 

         function showDetails(code) {

             var windowElement = $("#window");

             if (!windowElement.data("kendoWindow")) {               

                 windowElement.kendoWindow({

                     width: "600px",

                     height: "400px",

                     title: "TESTING",

                     modal: true,

                     resizable: false,

                     //close: onClose,

                     close: function (e) {

                         // destroy window                       

                         this.destroy();

                     },

                     actions: ["Close"],

                     content: {

                         url: 'shareDetail.html',

                         data: {

                             op: code

                         }

                     }

                 });

             }

          }

    </script>

If someone can help me, I would be really grateful.

Thanks, 

[Dimo]

Hello Diego Alejandro,

When you destroy a Window, its client object and DOM elements no longer exist on the page. You need to create (initialize) another one, from a new DOM element.

Generally, it is not necessary to destroy a Window after closing, especially if you intend to use it again.

Greetings,
Dimo
the Telerik team

[Diego Alejandro]

Hello Dimo,

Even if I remove the destroy sentence when closing the window, this one is shown only once. showDetails method is fired every time.

Are you guys at Telerik planning to have a better documentation as the one for RadControls?

Thanks,

[Dimo]

Hi Diego Alejandro,

There is no open() statement in the showDetails function, that's why the Window is not displayed the second time.

Working on improving our documentation is an ongoing process. If you have any specific remarks, please let us know.

Kind regards,
Dimo
the Telerik team

[Sajjad]

I am facing same problem , I have called open method in clickEvent and not using destroy method. code is here 



<div id="window2"></div>

<kendo:grid name="grid" pageable="true" height="450px"  sortable="true" filterable="true" paging="true">
                        <kendo:grid-scrollable/>


                        <kendo:grid-columns>
                            <kendo:grid-column title="Form No" field="FormNo" width="100px"   />

                            <kendo:grid-column title="Client ID" field="ClientId" width="150px" />
                            <kendo:grid-column title="Client Name" field="ClientName" width="80px"/>
                            <kendo:grid-column title="Personal Email" field="PersonalEmail" width="100px" />
                            <kendo:grid-column title="&nbsp;" width="160px" >
                                <kendo:grid-column-command>
                                    <kendo:grid-column-commandItem name="edit" click="handle_click" />

                                </kendo:grid-column-command>
                            </kendo:grid-column>
                        </kendo:grid-columns>
                        <kendo:dataSource pageSize="20"  >
                            <kendo:dataSource-transport>
                                <kendo:dataSource-transport-read url="${readUrl}" type="POST" contentType="application/json"/>

                                <kendo:dataSource-transport-parameterMap>
                function(options,type){

                                    return JSON.stringify(options);}
                                </kendo:dataSource-transport-parameterMap>
                            </kendo:dataSource-transport>
                        </kendo:dataSource>

                    </kendo:grid>

 

 $(document).ready(function() {
                var clientId ='<%=request.getParameter("ClientId")%>';
                var window = $("#window2");
            
                window.kendoWindow({
                    width: "615px",
                    title: "Edit Client",
                  
                    visible:false,
                    modal: true
                }).data("kendoWindow");
            });



     function handle_click(e) {
                //Logic to be executed on Edit event
             
                var row = $(e.originalEvent.target).closest("tr");
                var grid = row.closest("[data-role=grid]").data("kendoGrid");
                var item = grid.dataItem(row);               
                
                var clientId=item.ClientId.toString();
               
                var wnd = $("#window2").data("kendoWindow");
                var path="clients_edit_edit.jsp?clientId="+clientId;
               
                    // next opening - load new direccion
                    wnd.refresh(path);
                
               
                wnd.open();
            }

        </script>
It gives following error

uncaught TypeError: Cannot call method 'dataItem' of undefined

 If I remove dataItem parts and only tried to open  window it gives error undefined object..

Hope I have used correct forum  thread to ask my query

[Dimo]

Hello Sajjad,

Please make sure that the Window does NOT load a duplicate jQuery instance on the page.

http://docs.telerik.com/kendo-ui/web/window/overview#loading-window-content-via-ajax

http://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widgets-are-unavailable-or-undefined

If the problem seems different, please provide a runnable example for investigation.

Regards,
Dimo
Telerik