[Solved] IE Window Reuse Issue

[Rion]

Hi again everyone,

I recently have been working on a project that utilizes the Telerik Grid along with the Telerik Window in order to function as a basic modal pop-up editor / viewer. I will be first to say that I love both of these components and they are outshine their competitors.

The issue I have encountered is as follows : I have a single Window that I am reusing to populate with a single partial view which is based on the id of the item selected from the grid. Upon clicking on the username / item id in the grid, it will call a javascript function that performs a post to a div that is located within the window and it will display the partial view, complete with all of the information pertaining to the id that it was passed.

The Grid itself: (Html.JavascriptLink is a custom extension that basically passes parameters to a Javascript function)

<%= Html.Telerik().Grid<UserAccount>()
        .Name("UserAccount")
        .Pageable()
        .Sortable()
        .Columns(columns =>
            {
                columns.Bound(o => o.UserName).ClientTemplate(Html.JavascriptLink("<#=UserName#>", "EditUserAccount", "<#=UserName#>")).Title("Username");
            })
         .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("_AjaxBinding", "AccountAdministration")
         )
    %>

The Window :

   <% Html.Telerik().Window()
            .Name("Window")
            .Title("Edit User")
            .Visible(false)
            .Modal(true)
            .Content("<div id=\"WindowContent\" style=\"width: 500px; height: 400px; \"></div>")
            .Width(520)
            .Height(440)
            .Render();
        %>

The Javascript function :

function EditUserAccount(username) {
        var window = $("#Window").data("tWindow");
        $.post("/AccountAdministration/EditUserAccount/", { userName: username }, function (data)
        {
            $("#WindowContent").html(data);
            window.center();
            window.open();
        });
    }

This works great, and just as intended ... in Mozilla. As I am able to open the Window / perform editing functions / etc. and Close the window with no issues, and then I could click on another id to populate the same instance of the window with different data, as intended. However, the issue that I am encountering deals with the Window in IE.

Upon first opening the window, it will populate the data inside without issue. However, after closing the window and attempting to reopen it, it opens and populates with all the correct data, but seems to add an additional margin to the top and left sides, pushing the content over. This eventually causes scroll-bars to appear, which makes someone a picky UI person like myself cringe.

I have created a sample solution to demonstrate this issue, and I have also included code examples of the actual implementation of the working project itself.

I look forward to any helpful reponses to resolve this issue and thank you greatly!

Rion Williams

[Alex Gyoshev]

Hello Rion,

I guess the issue is caused by the multiple width/height values of the window content -- after the AJAX the width/height of the window are less than the ones from the returned content. This can easily be fixed if you specify the width/height on one place only (i.e. the window) and let everything flow around it. I am attaching a modified project that works as expected.

A few more notes:

• You can set the window content through its content() client-side method. The div#WindowContent is therefore redundant.
• The window client-side methods are chainable, not unlike jQuery. This allows you to have the following client-side script (combined with the above suggestion):
  

  function EditUserAccount(username) {
      $.post("/AccountAdministration/EditUserAccount/",
          { userName: username },
          function (data)
          {
              $("#Window").data("tWindow")
                  .content(data)
                  .center()
                  .open();
          });
  }

Best wishes,
Alex Gyoshev
the Telerik team

[Rion]

Hi Alex,

Thank you for your reply - I was unaware of the Window.Content() rather than using the div - this will help me immensely. I tried several methods to resolve the issue and the one that you recommended was very helpful. However, I found that another issue seemed to creep in during this process.

If you notice, in the solution that you replied to me with, after multiple opening / closings of the Window, the size of the Window itself will begin to diminish. I am unsure what could be causing this, but I believe this could be another part of the issue that I was having at first (This actually could have been the cause, as the Window was "shrinking" the size of the content was static so eventually it would no longer fit inside of the Window.)

The implementation of the Window is for a user editor - so the layout is rather important, and when it gets cluttered, well things tend to get messy unreadable. I am attaching a small screen shot of the interface itself, and I should mention that there are Tabs involved, however I don't believe they are playing a role in this, as the issue appears with or without them.

The tabs are actually from here (http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/) - I would love to use the Telerik Tabstrip, however I seemed to encounter far too many issues working with it and the Window component. If you have any ideas on how to resolve the shrinking Window issue, or what could be causing it, I will be more than willing to send as much code / css/ etc. to help.

I may just scrap the Window reuse and see if it might be easier to create one dynamically each time that the method is called, now that I am able to use Window.Content().

Thank you Alex for you help, it has been much appreciated so far,

Rion

[Rion]

Just another update :

I added an alert to display the height and width of the window each time that it is called. Apparently - in IE, each call reduces the size (both height and width) of the $("#Window") element by 6px each time it is called.

I have no idea what could be causing this issue - as the Window retains it's size in Mozilla, so this issue is limited only to IE. I have made a few attempts to try to create a Window client-side inside of the "MakeWindowAppear" JavaScript function, but I have had no results in even getting that to work or the Window to appear.

According to Firebug, I receive a "telerik is undefined" when I attempt to create the Window, which I assumed was a missing JavaScript file, however I included the "telerik.common.min.js", "telerik.window.min.js" and the required jQuery files and I still was unable to create / use the client-size Window.

I am trying to find another solution to this problem (perhaps by incrementing the size of the Window to compensate for the "shrinkage" but this has not worked very well. So - if anyone has any suggestions / solutions I am open to them.

Thanks much,

Rion

[Alex Gyoshev]

Hello Rion,

Thank you for reporting this. The issue was caused by the padding of the content area of the window; combined with the IE-specific styling, it introduced a few more pixels on each open. We managed to fix it right away -- I'm attaching the updated sample project that we're passing around (significant changes are in telerik.common.css and telerik.sitefinity.css). I also took the liberty of adding a Telerik TabStrip in the partial view -- does it fit your needs?

Your Telerik points have been updated because of the bug report.

All the best,
Alex Gyoshev
the Telerik team

[Rion]

Thanks Alex!

This helps tremendously! It fixed the problem with ease - was it an issue with just the Sitefinity theme or was it prevalent in the other themes as well? I hadn't thought to try it out - but it might be something to look into!

Thanks again for a prompt resolution to the issue!

Rion