This is a migrated thread and some comments may be shown as answers.

Window only opens once

5 Answers 757 Views
Window
This is a migrated thread and some comments may be shown as answers.
Diego Alejandro
Top achievements
Rank 1
Diego Alejandro asked on 26 Jun 2012, 09:05 PM
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, 

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Jun 2012, 08:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Diego Alejandro
Top achievements
Rank 1
answered on 27 Jun 2012, 01:21 PM
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,
0
Dimo
Telerik team
answered on 28 Jun 2012, 08:43 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sajjad
Top achievements
Rank 1
answered on 24 Nov 2015, 11:31 AM

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

0
Dimo
Telerik team
answered on 25 Nov 2015, 02:49 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Window
Asked by
Diego Alejandro
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Diego Alejandro
Top achievements
Rank 1
Sajjad
Top achievements
Rank 1
Share this question
or