View not showing data on window 2nd opening

[AP]

I'm showing the contents of a view (along with a parameter, in an MVC window.  However, when the window is opened for the second time, the grid is empty, and clicking the refresh icon replaces the contents of the main page with that of the view.

@(Html.Telerik().Window()
       .Name("Window")
       .Title("Update Log")
       .Width(750)
       .Height(500)
       .Buttons(buttons => buttons.Close())
       .Draggable(true)
       .Visible(false)
)


<script type="text/javascript">


    var windowOpened=false;


    function showPopUp()
    {
     if(windowOpened==false)
        {

        var window = $('#Window').data('tWindow');
        //window.center();
        window.ajaxRequest("UpdateLog/Index", { LogID: logID });
        window.center().open();
        windowOpened=true;
        }
        else
        {
            var window = $.telerik.window.create({
                name: "Window2",
                id:"Window2",
                title: "Update Log",
                resizable: false,
                draggable: true,
                width: 750,

                height: 500,
                visible: false,
               //content:'750',
                onClose: function() {
                    window.destroy();
                }

        }).data('tWindow');


         window.ajaxRequest("UpdateLog/Index", { LogID: logID });

        window.center().open();
        }

   }

How can I get a window to open and close, passing a different parameter to the view each time (logID is a global variable, updated by a jQuery ajax call)?  This page allows a user to run a process multiple times, and I want to show the results log via a window. The page also uses a jQuery UI progress bar. This is hidden and shown multiple times OK, until the window is shown, and then the next time the progress bar is shown, it seems to be duplicated. Any ideas?

Thanks

[Dimo]

Hello Andrew,

Generally, there is no use in destroying the component's client object if you intend to display / open the Window again. You can simply reload the Window content with the ajaxRequest() method.

The fact that clicking on the Grid's refresh icon loads the partal view as a main page suggests that you have a Javascript error.

I did not understand the progress bar part, can you provide a full demo?

Kind regards,
Dimo
the Telerik team

[AP]

I had expected to be able to do this, but the window close icon seems to destroy the window (as defined in the server-side code) - not the default behaviour I would expect. Is there any way to stop this?

The refresh problem only happens when the window is created client-side, it's fine the first time the window is shown. 

The full page code is:-

@{
    ViewBag.Title = "CMS Code Assignments";
}
@using Telerik.Web.Mvc.UI;
<script src="@Url.Content("~/Scripts/Kendo/js/kendo.all.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Scripts/Kendo/styles/kendo.metro.min.css")"rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Scripts/Kendo/styles/kendo.common.min.css")" rel="stylesheet" type="text/css" />


<div class="blueBox" id="bbox">

<div class="boxHeading">

Code Assignments

</div>
<div class="innerBox">
<div style="float:left;  width:310px">
           Select Target Table:
           @Html.DropDownList("TableList", (IEnumerable<SelectListItem>)ViewData["Tables"], new { style = "margin-bottom:10px;" })


<br />

<button id="butRun"  style="font-size:x-small;margin-bottom:10px;" onclick="runAssignments();">Run Assignments</button>






<br />
<img src="@Url.Content("~/Content/Images/PleaseWait.gif")" alt="Please Wait Animation" style="padding-left:40px;display:none;margin-bottom:10px;" id="runSpinner"/>
<br />
<span id="updateText" style="display:none;">Starting data processing...</span><br />
<span id="updateSubText" style="display:none;margin-bottom:10px;"> </span>
<br />
<div id="runBar" style="width:250px;height:15px;display:none;margin-bottom:10px; "></div>
</div>
<div style="float:left;padding-left:10px">
<div id="tab" style="width:340px;font-size:x-small;margin-top:5px;"></div>
<br />
<button id="showLog" onclick="showPopUp();" style="font-size:x-small;margin-bottom:10px;display:none">Show Update Log</button>
</div>
</div>


</div>
@(Html.Telerik().Window()
       .Name("Window")
       .Title("Update Log")
       .Width(750)
       .Height(500)
       .Buttons(buttons => buttons.Close())
       .Draggable(true)
       .Visible(false)
)


<script type="text/javascript">
    $('#butRun').button();
    $('#showLog').button();


    var windowOpened=false;
    var totalUpdates;
    var updateList=new Array();
    var currentUpdate;
    var resultsArray = new Array();
    var tableCreated=false;
    var gridDataSource = new kendo.data.DataSource({data: resultsArray});
    var logID;

    function showPopUp()
    {
     if(windowOpened==false)
        {

        var window = $('#Window').data('tWindow');
        //window.center();
        window.ajaxRequest("UpdateLog/Index", { LogID: logID });
        window.center().open();
        windowOpened=true;
        }
        else
        {
            var window = $.telerik.window.create({
                name: "Window2",
                id:"Window2",
                title: "Update Log",
                resizable: false,
                draggable: true,
                width: 750,

                height: 500,
                visible: false,
               //content:'750',
                onClose: function() {
                    window.destroy();
                }

        }).data('tWindow');


         window.ajaxRequest("UpdateLog/Index", { LogID: logID });

        window.center().open();
        }

   }




    function InitiateUpdates(tabName)
    {


          $.ajax({
            type: "POST",
            async: true,
            contentType: "application/json;charset=utf-8",
            url: "@Url.Content("~/CodeAssignment/createUpdateLog")",
            data: '{"tableName":"' + tabName + '" }',
            dataType: "json",
            success: function(data){



              logID=data.ID;

              getAssignmentList(tabName,1);

                }
            });
    }



    function createResultsTable()
    {

         $("#tab").kendoGrid({
        columns: [
        {field: "ID", title: "Update",width: 40},
        {field: "Name", title: "Update",width: 170},
        {field:"rowsUpdated",title:"Rows",width:60},
        {field: "Success",title: "Result",width: 50, template: '#if (Success) {# OK #} else {# <span style="color:Red"> ERROR </span> #}#'  }
        ],
        dataSource: gridDataSource,
         sortable: true,
        height: 220
        });
        tableCreated=true;

    }


    function runAssignments() {
        //Check selected table
        var selectedOrder = $('#TableList').val();
        var selectedTable = $("#TableList option:selected").text();

        if (selectedTable == " -- Select A Table -- ") {
            //No selection made
            alert('Please select a table!');
            return;

        }
        var r = confirm('Are you sure you want to run code assignments on ' + selectedTable + '?');
        if (r == false) {
            alert("Assignments have not been run.");
            return;
        }
        resultsArray.length=0;
        //gridDataSource = new kendo.data.DataSource({data: resultsArray});
        gridDataSource.read();
        if(tableCreated==false)
        {
        createResultsTable();
        }
        //clear array if not 1st time run


        //get Log ID
        InitiateUpdates(selectedTable);



        //getAssignmentList(selectedTable,selectedOrder);
    }


    function getAssignmentList(tabName,tabType){
        $.ajax({
            type: "POST",
            async: true,
            contentType: "application/json;charset=utf-8",
            url: "@Url.Content("~/CodeAssignment/GetUpdateList")",
            data: '{"tableName":"' + tabName + '","tableType":' + tabType + ' }',
            dataType: "json",
            success: function(data){

               $('#butRun').attr("disabled", true);
                $("#runBar").progressbar({ value: 0 });
                $('#runBar').show();
                $('#runSpinner').show();
                $('#updateText').show();
                $('#updateSubText').show();

              //call loop controller function
              updateList=data;
              totalUpdates=updateList[0].TotalCount;
              processUpdate(0,tabName);
                }
            });
}

function processUpdate(id, TName)
{
    currentUpdate=id+1;


      //Call first update if not the last
      if(currentUpdate<=totalUpdates)
      {

             var descTxt=updateList[id].description;

     $('#updateText').replaceWith('<span id="updateText" style="font-style:italic;font-size:small;"> ' +  'Step ' +   currentUpdate + ' of ' +  totalUpdates + '</span>');
     $('#updateSubText').replaceWith('<span id="updateSubText" style="font-style:italic;font-size:x-small;"> ' +  descTxt  + '</span>');

     var percent =  Math.round(((currentUpdate)/(totalUpdates))*100);

      $("#runBar").progressbar({ value: percent });

         setTimeout(function () {runUpdate(id, TName),250});//call update routine
      }
      else
      {

        $("#runBar").hide();
        $('#runSpinner').hide();
        $('#updateText').hide();
        $('#updateSubText').hide();
         $('#butRun').attr("disabled", false);
         $('#showLog').show();
        alert('Updates have finished');

      }
}

function runUpdate(id, TName)
{
     var updateID=updateList[id].ID;
     $.ajax({
            type: "POST",
            async: true,
            contentType: "application/json;charset=utf-8",
            url: "@Url.Content("~/CodeAssignment/runCodeAssignment")",
            data: '{"updateID":' + updateID + ',"TableName":"' + TName + '","LogID":' + logID + ' }',
            dataType: "json",
            success: function(data){
                    //if ok, call processor again
                    id++;
                    //Update table here
                    resultsArray.push(data);
                    gridDataSource.read();
                    processUpdate(id, TName);
                }
                ,
            error: function () {

                alert("An error has occurred.");
            }
            });
}

</script>

[Dimo]

Hello Andrew,

Closing a Window leaves it in the DOM and only hides the component with a display:none style. The client object is not destroyed, unless you explicitly use a destroy() statement, as in the Window2 case.

The progressbar is outside any Telerik MVC or Kendo components, so I am afraid I don't see a connection between its duplication and the Window. Since the provided code snippet is not functional, if you need further assistance, please provide a standalone runnable project.

Greetings,
Dimo
the Telerik team

[AP]

If using the close button on the window doesn't remove it from the DOM, how do I re-open it, because calling the original javascript function that shows the window in the first instance doesn't work.

I've tried it again (after initial attempts led to re-creating the window client-side), and after the window closes, the function that opened it just causes a javascript error.

@(Html.Telerik().Window()
       .Name("Window")
       .Title("Update Log")
       .Width(750)
       .Height(500)
       .Buttons(buttons => buttons.Close())
       .Draggable(true)
       .Visible(false)
)


<script type="text/javascript">

 function showPopUp()
    {

        var window = $('#Window').data('tWindow');

        window.ajaxRequest("/UpdateLog/Index", { LogID: logID });
        window.center().open();


   }

</script>

Once an initial windows has been closed, running the function again gives the error:-

Unable to get value of the property 'ajaxRequest': object is null or undefined

A working example of opening and closing a window to a view, with new parameters would be appreciated.

[Dimo]

Hi Andrew,

I used the following demo as a base and made some changes to it.

http://demos.telerik.com/aspnet-mvc/window/clientsideapi

Window declaration

Html.Telerik().Window()
    .Name("Window")
    .Buttons(buttons => buttons.Refresh().Maximize().Close())
    .Width(450)
    .Height(300)
    .Draggable(true)
    .Visible(false)

Open script

function openWindow() {
    var window = $("#Window").data("tWindow");
    window.ajaxRequest("AjaxView/", { LogID: new Date().getSeconds() })
    window.open();
}

Controller

    public ActionResult AjaxView(string LogID)
    {
        if (string.IsNullOrEmpty(LogID))
        {
            LogID = "null";
        }
        ViewBag.LogID = LogID;
        return PartialView();
    }
}

Note that in this case the "Refresh" button does not work, because a partial view is not defined server-side, as in the initial version of the demo.

Please double-check that the Window is not destroyed after closing in your application.

Regards,
Dimo
the Telerik team

[AP]

Thanks for the response, but I'm still getting an error. Your code echoes how I thought things should work.

The problem seems to be the ajaxRequest line, as removing it enables the window (now empty!) to be opened and closes and reopened at will. 

I have attached a sample project which replicates the issue, based upon the Telerik MVC 3 Web Application (Razor) template. I've just replaced the Linq to SQL layer with a simple class - but the view code is identical to my real application.

Let me know if it's better to raise a support ticket - as I have a commercial license for the Premium Collection.

[Dimo]

Hi Andrew,

Serving a whole web page to the Window instead of a partial view breaks the HTML validation, rewrites the jQuery object and deletes the Window client object. Hence, the Javascript error.

Loading complete external pages should be done with iframes, as in this demo:

http://demos.telerik.com/aspnet-mvc/window/loadingexternalpage

Regards,
Dimo
the Telerik team

[AP]

Thanks,

I've changed it to a partial view , and it's now working, and opening the window is no longer causing issues with the progress bar.

The controller now is :-

public ActionResult Index(int LogID)
       {
           ViewBag.LogID = LogID;

           return PartialView();
       }

NB: I did try opeing it in an iFrame, but as it's the same site, that didn't work, even scripting the content to be an iFrame still didn't work (the scripts still seemd to conflict.).