Popup window is not getting displayed though no errors

Question

I am trying to display a popup window with values from a kendo template and kendowindow. Though no errors, the following code is not showing the pop up window and the template content. Any idea what need to be changed to display this?

UPDATE

The popup came when I removed the msie browser check. But still it is not displaying the template content. Am I missing anything?

I referred following stack overflow posts and many other blogs to fix this.

CODE

 <head>
    <title>Kendo Template and Kendo Window</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>



 <!---- lijo   Kendo Templates-->
    <script id="row-template" type="text/x-kendo-template">
          <tr>
                <td data-bind="text: name"></td>
                <td data-bind="text: age"></td>
          </tr>
    </script>


<script type="text/javascript">

    //lijo
    $(document).ready(function () {


        var viewModel = kendo.observable({

            employees: [
                        { name: "Lijo", age: "28", IsSelected: true },
                        { name: "Binu", age: "33", IsSelected: false },
                        { name: "Kiran", age: "29", IsSelected: true }
                       ]
        });

        kendo.bind($("body"), viewModel);
    });



    //lijo
    function showMakeAndHold() {

        alert("HIIIIIII");

        var drilldownpopup = $('<div class="myClass">A</div>');



        if (!drilldownpopup.data('kendoWindow')) 
        {
            drilldownpopup.kendoWindow({
                    modal: true
                });       
        }

        drilldownpopup.data('kendoWindow').title(" ");
        $('.k-window-actions').html('<span class="titletext">' + "MAKE HOLD BALANCE ITEM" + '</span><a href="#" class="k-window-action k-link"><span class="k-icon k-i-close"></span></a>');

        var myString =
                       ['<html><body><table id="resultTable">',
                            '<tbody data-template="row-template" data-bind="source: employees">',
                            '</tbody>',
                        '</table>AAAA</body></html>'
                       ].join('\n');


        drilldownpopup.data('kendoWindow').content(myString);

        drilldownpopup.data('kendoWindow').open();
        drilldownpopup.data('kendoWindow').center();

    }



 </script>




</head>

<body>

A   B 

 <button id = "MakeHoldDetailLinkButton" class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View Make Hold</button> 

<div class="drilldownwindow">SS</div>

</body>

Is your browser's popup blocker blocking it? Try temporarily disabling it or using a different browser. — Nick McCurdy, Jun 07 '14 at 04:18
@NicolasMcCurdy I tried in Chrome and IE.. not working in both — LCJ, Jun 07 '14 at 04:20
$.browser was deprecated in version 1.3 and removed in 1.9 http://stackoverflow.com/questions/14892095/browser-msie-error-after-update-to-jquery-1-9-1 [1]: http://stackoverflow.com/questions/14892095/browser-msie-error-after-update-to-jquery-1-9-1 — Mani, Jun 07 '14 at 04:26
By the way, if you still need `$.browser`, back compatibility is available in [jQuery migrate](https://github.com/jquery/jquery-migrate). — Nick McCurdy, Jun 07 '14 at 04:30
@Mani . Thanks.. The popup came when I removed `browser` check. But still it is not displaying the template content. Am I missing anything? — LCJ, Jun 07 '14 at 04:34

Mani · Accepted Answer · 2014-06-07T05:09:10.007

try below code:

1) You mention employees in ready function, so its run first after only your myString html code will be run so it dosnt display employee data,so remove ready functioni put code on below..

 <head>
    <title>Kendo Template and Kendo Window</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>



 <!---- lijo   Kendo Templates-->
    <script id="row-template" type="text/x-kendo-template">
          <tr>
                <td data-bind="text: name"></td>
                <td data-bind="text: age"></td>
          </tr>
    </script>


<script type="text/javascript">

    //lijo








    //lijo
    function showMakeAndHold() {

       // alert("HIIIIIII");

        var drilldownpopup = $('<div class="myClass">A</div>');



        if (!drilldownpopup.data('kendoWindow')) {
           if (jQuery.support.leadingWhitespace) {
                drilldownpopup.kendoWindow({
                    animation: false,
                    modal: true
                });

            }
            else {
                drilldownpopup.kendoWindow({
                    modal: true
                });
            }
        }

        drilldownpopup.data('kendoWindow').title(" ");
        $('.k-window-actions').html('<span class="titletext">' + "MAKE HOLD BALANCE ITEM" + '</span><a href="#" class="k-window-action k-link"><span class="k-icon k-i-close"></span></a>');

        var myString =
                       ['<html><body><table id="resultTable">',
                            '<tbody data-template="row-template" data-bind="source: employees">',
                            '</tbody>',
                        '</table></body></html>'
                       ].join('\n');


        drilldownpopup.data('kendoWindow').content(myString);

        drilldownpopup.data('kendoWindow').open();
        drilldownpopup.data('kendoWindow').center();


    var viewModel = kendo.observable({

            employees: [
                        { name: "Lijo", age: "28", IsSelected: true },
                        { name: "Binu", age: "33", IsSelected: false },
                        { name: "Kiran", age: "29", IsSelected: true }
                       ]
        });

        kendo.bind($("body"), viewModel);



    }



 </script>




</head>

<body>

A   B 

 <button id = "MakeHoldDetailLinkButton" class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View Make Hold</button> 

<div class="drilldownwindow">SS</div>

</body>

I upvoted because it helped me to get the popup. But the template content data is not appeared here. [That is it is not showing the `employees` data] — LCJ, Jun 07 '14 at 04:44

Popup window is not getting displayed though no errors

1 Answers1