Intersoft Community - WebGrid Enterprise - WebGrid Showing Hiding Causes JavaScript Errors

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Fri, 01 Oct 2010 08:37:08 GMT

Did you reenable the UpdatePanel objects and triggers? That will probably take care of it since it'll more accurately duplicate our environment. I'll update the sample here and see if I can get the error to occur and if I do, I'll post back with the attachment.

WebGrid Showing Hiding Causes JavaScript Errors

Glayaar — Fri, 01 Oct 2010 03:32:07 GMT

Using the previous attached sample, I failed to replicate the issue. I tried invoking postback in the WebMenubar by clicking a command or reposting the page using ASP button, however there is no JS error in my environment.

Have you modify the sample to use the first post technique?

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Thu, 30 Sep 2010 14:59:45 GMT

Hi Glenn,

The new build did fix the error when resizing the browser, however, now another crash occurs when posting the page. It's another WebMenuBar client-side crash on this line:

var vcf51 =v9d256.XmlDt.documentElement;

The XmlDt object is null which is why it crashes. It also keeps the page from continuing with the post.

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Thu, 30 Sep 2010 08:39:51 GMT

Thanks Glenn. I'll try the build you provided and let you know the results.

The code is available in the first post for both the grid and menu hide/show functions. As I mentioned earlier, all our client-side functions are queued up and then executed after the page loads. On post backs, the queue of client-side functions is run in the AJAX pageLoaded method which is our override as I mentioned before.

But let me try the new build and go from there. I'll post back with my results.

WebGrid Showing Hiding Causes JavaScript Errors

Glayaar — Thu, 30 Sep 2010 04:45:23 GMT

As I mentined the JS error still occured and has been reported as a bug. A fix for the issue is available in the WebDesktop latest nightly build, which could be downloaded here.

In the previous sample, the showing and hiding is done using WebFlyPostBackManager by invoking javascript function. However, during checked change the flypostbackmanager will not invoke the javascript function. The proposed resolution is a workaround for the checked change event, by setting a variable value and based on the value invoke the corresponding function after the AJAX request.

Perhaps you could share the function to show / hide the control you will be using in the project so we could analyse the issue further.

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Tue, 28 Sep 2010 10:35:20 GMT

Hi Glenn. Well I tried your sample and it blows up too. See attached video. I commented out the "alert" command only.

Also, in the sample, you've basically nullified the UpdatePanel objects which we can't do in our application. We must use UPs to update specific other sections of the page and we use a mix of controls with WebCombo, WebMenuBar and WebGrid from InterSoft. Our grid/menus work in pairs so they go together.

Do you know if this error is "benign," i.e., won't impact the usability of the menu/grid controls? I'll have to test it to see too.

How soon will a fix/patch be available for the WebMenuBar?

WebGrid Showing Hiding Causes JavaScript Errors

Glayaar — Mon, 27 Sep 2010 21:57:42 GMT

I am very sorry that the attachment is corrupted, I have re-attached the sample. Thank you for the feedback, I will consult your suggestion to my supervisor.

In the sample, in the JS function executed after the ajax request, the function to show / hide the grid and menubar is executed. I also refresh the grid to resolve the maximize issue.

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Mon, 27 Sep 2010 10:04:21 GMT

Okay, thanks Yudi. Would you please create a shared location internally for stuff like this so you can help each other out and we don't have to wait.

Also, it would be helpful if you guys can verify the attachments by downloading and unzipping it after you've attached it to ensure it's fine. Thanks much.

WebGrid Showing Hiding Causes JavaScript Errors

yudi — Fri, 24 Sep 2010 03:45:33 GMT

Glenn is currently not available until Tuesday, September 28^th, 2010.

I can’t help you to re-attach the sample at this moment, since the sample is located inside Glenn’s tester PC. It would require Glenn’s credential in order to login to that PC.

I have left a note to Glenn regarding your request. I’m sure that he’ll contact and respond to you.

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Thu, 23 Sep 2010 08:00:09 GMT

Thanks Glenn. I'll give this a try. Yes, most of our grids are accompanied by our custom menu bar which is derived from WebMenuBar. We have the pair that interact with each other. I the menu crash can be fixed very soon. I'll post back when I've had a chance to look this over and try to implement your workaround in our code.

[EDIT] Glenn, the attached file is corrupted and cannot be unzipped. I tried to unzip it with both WinRAR and WinZip. Can you please reattach? After you reattach, would you ensure the file is fine, by downloading it yourself and making sure you can unzip it? Thanks.

[EDIT2] Glenn, in regards to the Ajax article you reference, we already use this methodology. All our client-side script calls are registered and executed after the load has loaded. We execute all our registered calls in our custom page request manager in the page load override, i.e., the PageRequestManager's instance add_pageLoaded.

WebGrid Showing Hiding Causes JavaScript Errors

PRISMAY — Fri, 16 Jul 2010 10:41:48 GMT

We have some pages where we need to show or hide an editable grid based on a combo box selection of some type. The show/hide seems to work fine, on my test page, the first time, but after that it causes a javascript error to come up per the attached flash video.

Note the value of v6ba86 is:

<TD style="WIDTH: 138px" class="GridHeader ctl00ContentPrismGridViewTest-Header" type="Column" sortOrder="Ascending" isSorted="True" isGrouped="False" dataBound="True" colName="percentFulfillment"></TD>

We use update panels to do the updates. Our markup code is as follows:

    <asp:UpdatePanel ID="upButtons" runat="server" RenderMode="Inline" ChildrenAsTriggers="true" UpdateMode="Always">
        <ContentTemplate>
            <PRISM:PrismButton ID="btnShow" runat="server" Text="Show" OnClick="btn_Click" />
            <PRISM:PrismButton ID="btnHide" runat="server" Text="Hide" OnClick="btn_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdatePanel ID="upContracStepsMain" runat="server" RenderMode="Inline" ChildrenAsTriggers="false" UpdateMode="Conditional">
        <ContentTemplate>
            <PRISM:PrismPanel ID="PrismPanelMenu" runat="server" Width="400px">
                <PRISM:PrismMenuControl ID="MenuTest" runat="server" 
                    MenuArea="Contract_Edit_Steps" 
                    OnMenuItemClicked="MenuItemClicked" 
                    LoadMenuInSession="true" 
                    LinkedGridId="PrismGridViewTest" />
            </PRISM:PrismPanel>
            <asp:UpdatePanel ID="upTestGrid" runat="server" RenderMode="Inline" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <PRISM:PrismPanel ID="PrismPanelContainer" runat="server" Width="400px">
                        <PRISM:PrismGridViewEdit ID="PrismGridViewTest" runat="server"
                            DisableForcedPageRedirect="true" 
                            Width="100%"
                            MenuArea="Contract_Edit_Steps"
                            OnAddRow="AddRow" 
                            OnUpdateRow="UpdateRow"
                            LinkedMenuControlId="MenuTest"
                            EnableRowContextMenu="false"
                            Height="230px">
                        </PRISM:PrismGridViewEdit>
                    </PRISM:PrismPanel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger EventName="MenuItemClicked" ControlID="MenuTest" />
                    <asp:AsyncPostBackTrigger EventName="Click" ControlID="btnHide" />
                    <asp:AsyncPostBackTrigger EventName="Click" ControlID="btnShow" />
                </Triggers>
            </asp:UpdatePanel>
        </ContentTemplate>
    </asp:UpdatePanel>

Note that PrismGridViewEdit is our custom control deriving from WebGrid and PrismMenuControl derives from WebMenuBar.

How we hide/show is, after the partial-page post back is done, we register our client-side calls that show/hide with the ajax script manager which executes the grid's and menu's respective Show() and Hide() functions.

The grid client side function is simple:

    function ShowOrHideGrid(gridId, bShow)
    {
        // get the grid object and make sure it's valid
        oGrid = HaveGrid(gridId);
        if (!jsg_PrismUtility.IsVo(oGrid))
        {
            return false;
        }

        if (bShow)
        {
            oGrid.Show();
        }
        else
        {
            oGrid.Hide();
        }

        return true;
    }

The menu bar client-side is simple too:

    function ShowOrHideMenu(menuId, bShow)
    {
        var oMenuBar = ISGetObject(menuId + menuBarIdSuffix);

        if (!jsg_PrismUtility.IsVo(oMenuBar))
        {
            return false;
        }

        if (bShow)
        {
            oMenuBar.Show();
        }
        else
        {
            oMenuBar.Hide();
        }

        return true;
    }