Window only opens once

6 posts, 0 answers
  1. Diego Alejandro
    Diego Alejandro avatar
    3 posts
    Member since:
    Mar 2009

    Posted 26 Jun 2012 Link to this post

    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, 
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Jun 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Diego Alejandro
    Diego Alejandro avatar
    3 posts
    Member since:
    Mar 2009

    Posted 27 Jun 2012 Link to this post

    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,
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Jun 2012 Link to this post

    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!
  6. Sajjad
    Sajjad avatar
    4 posts
    Member since:
    Jul 2013

    Posted 24 Nov 2015 Link to this post

    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

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Nov 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready