Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Window > View not showing data on window 2nd opening

• AP Intermediate

  Posted on Jan 16, 2012 (permalink)

  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
  

  Reply

• Dimo Dimo

  Posted on Jan 17, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

  Reply

• AP Intermediate

  Posted on Jan 17, 2012 (permalink)

  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>

  
  
  
  

  Reply

• Dimo Dimo

  Posted on Jan 17, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

  Reply

• AP Intermediate

  Posted on Jan 17, 2012 (permalink)

  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.
  

  Reply

• Dimo Dimo

  Posted on Jan 19, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

  Reply

• AP Intermediate

  Posted on Jan 19, 2012 (permalink)

  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.
  
  

  Attached files

  • WindowTest.zip

  Reply

• Answer Dimo Dimo

  Posted on Jan 19, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

  Reply

• AP Intermediate

  Posted on Jan 19, 2012 (permalink)

  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.).
  
  
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Window > View not showing data on window 2nd opening