Home Search Member List Faq Register Login  
UltimateAjax
Re: LoadingDisplay

Thread Starter: Juunu   Started: 06-21-2010 2:35 AM   Replies: 12
 Karamasoft Support Forums » General Discussions » UltimateAjax » Re: LoadingDisplay
 Printable Version    « Previous Thread   Next Thread »
  21 Jun 2010, 2:35 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
LoadingDisplay

Is it possible and how, with LoadingDisplay property to..

  1. Keep the position on page after call back has been handled? It seems to always return to the top of the page after the loading display.
  2. Show the loading image as "pop up" in front of for example a datagrid that is causing the callback?

The code I have is now: <kswc:UltimateAjax id="UltimateAjax1" runat="server" LoadingDisplay='<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center"><img src="UltimateAjaxLoading.gif"></td></tr></table>'>

We are using framework 1.1


  
  21 Jun 2010, 3:07 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: LoadingDisplay
1) We tried it in our LoadingDisplay sample by adding extra breaking lines at the top of the page to show the vertical scrollbar but we couldn't reproduce the issue. If you let us know how to reproduce the issue, we can try it in our test environment.

2) What exactly do you mean by "pop up"? Are you trying to show a modal window that prevents the user clicking on the page until the callback handling process is completed? If that is the case, UltimateAjax doesn't have a built-in functionality to support this but you can create your own custom HTML fragment and set the LoadingDisplay property accordingly.

  
  22 Jun 2010, 4:07 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
Re: LoadingDisplay

1) Heres the example code. The datagrid is populated on PageLoad (not IsPostBack) from a datasource which has hundreds of rows. When ever I press for example the last row's chkRow, the loading image is shown on the page and after that it shows the datagrid and position is on top of the page and I have to scroll down to the selection I made (IE6). I have code on PageLoad IsPostBack that goes through the datagrid and checks some values.

<%@ Page language="c#" Debug="false" EnableViewState="true" ValidateRequest="false" Codebehind="cus_pricelist.pas" AutoEventWireup="false" Inherits="cus_pricelist.TCusPricelist" %>
<%@ Register TagPrefix="kswc" Namespace="Karamasoft.WebControls.UltimateAjax" Assembly="UltimateAjax" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
  function DoCallBack() {
   DoUltimateCallback('UltimateAjax1');
  }
</script>
<link rel="stylesheet" href="css/VisioUI.css" type="text/css" />
</head>
  <body ms_positioning="GridLayout">
 <form runat="server" name="products" method="post">
  <kswc:UltimateAjax id="UltimateAjax1" runat="server" LoadingDisplay='<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center"><img src="UltimateAjaxLoading.gif"></td></tr></table>'>
  <ASPBig SmileataGrid id="dgPricelist" runat="server">
    <Columns>
   <ASP:TemplateColumn>
     <ItemTemplate>
       <ASP:CheckBox id="chkRow" runat="server" onclick="DoCallBack()"></ASP:CheckBox>
     </ItemTemplate>
   </ASP:TemplateColumn>
   
     </Columns></ASPBig SmileataGrid>
     </kswc:UltimateAjax>
 </form>
  </body>
</html>

2) That is exactly what I want to do. Would you have an example how to set this kind of solution (custom HTML fragment) to LoadingDisplay property? Or can I achieve this with LoadingDisplay and DisableInitiator properties? I could live without this functionality as the loading image replaces the above datagrid until the handling process is completed, but I do must find a solution to the first problem.


  
  22 Jun 2010, 4:47 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: LoadingDisplay
1) We applied the code-snippet to our DataGrid sample under UltimateAjax sample app and when we click on the checkbox, it doesn't render anything. You will need to send us a self-contained web app having this issue so that we can try it in our test environment.

2) We don't have any samples to provide this functionality. You can achieve it by using the LoadingDisplay property by rendering your loading display on top of a transparent DIV element that covers the whole screen area so that the user cannot click on the background (the z-index style property of the loading display element should be higher than the z-index of the transparent DIV, which should be higher than any HTML elements in your page).

  
  28 Jun 2010, 7:09 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
Re: LoadingDisplay
Hi,

Here's the .aspx code:

<%@ Page language="c#" Debug="true" Codebehind="WebForm1.pas" AutoEventWireup="false" Inherits="WebForm1.TWebForm1" %>
<%@ Register TagPrefix="kswc" Namespace="Karamasoft.WebControls.UltimateAjax" Assembly="UltimateAjax" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">chemas-microsoft-comSurprisefficeSurpriseffice" />>>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
  function DoCallBack() {>>

   DoUltimateCallback('UltimateAjax1');
  }
</script>
</head>
  <body ms_positioning="GridLayout">
 <form runat="server" name="products" method="post">>>

  <kswc:UltimateAjax id="UltimateAjax1" runat="server" LoadingDisplay='&lt;table border="0" cellpadding="0" cellspacing="0" align="center" style="width:420px;height:90px;border:1px solid #666666;font-family:Verdana;font-size:8pt"><tr><td align="center"><img src="UltimateAjaxLoading.gif"><br><br>Loading...</td></tr></table>'>>>

<aspBig SmileataGrid AutoGenerateColumns="False" ID="DataGrid1" runat="server">
     <columns>
     <ASP:TemplateColumn>
  <ItemTemplate>
    <ASP:CheckBox id="chkRow" runat="server" onclick="DoCallBack()" ></ASP:CheckBox>
  </ItemTemplate>
   </ASP:TemplateColumn>
    <asp:BoundColumn DataField="Id">
    </asp:BoundColumn>
     </columns>
   </aspBig SmileataGrid>
   </kswc:UltimateAjax>
    </form>
  </body>
</html>

And here's the whole .pas code (Delphi 2006):

unit WebForm1;
interface
uses
  System.Collections, System.ComponentModel,
  System.Data, System.Drawing, System.Web, System.Web.SessionState,
  System.Web.UI, System.Web.UI.WebControls, System.Web.UI.HtmlControls,
  Karamasoft.WebControls.UltimateAjax;
type
  TWebForm1 = class(System.Web.UI.Page)
  {$REGION 'Designer Managed Code'}
  strict private
    procedure InitializeComponent;
  {$ENDREGION}
  strict private
    procedure Page_Load(sender: System.Object; e: System.EventArgs);
  strict protected
    UltimateAjax1: Karamasoft.WebControls.UltimateAjax.UltimateAjax;
    DataGrid1: System.Web.UI.WebControls.DataGrid;
    procedure OnInit(e: EventArgs); override;
  private
    function MakeDataSet()Big SmileataSet;
  public
    procedure UA_Callback(sender: System.Object; e: Karamasoft.WebControls.UltimateAjax.CallbackEventArgs);
  end;
implementation

{$REGION 'Designer Managed Code'}
/// <summary>
/// Required method for Designer support -- do not modify
/// the contents of this method with the code editor.
/// </summary>
procedure TWebForm1.InitializeComponent;
begin
  Include(Self.UltimateAjax1.Callback, Self.UA_Callback);
  Include(Self.Load, Self.Page_Load);
end;
{$ENDREGION}

procedure TWebForm1.Page_Load(sender: System.Object; e: System.EventArgs);
var
  ds: DataSet;
begin
  if not isPostBack then
  begin      
    ds := MakeDataSet();
    DataGrid1.DataSource := ds;
    DataGrid1.DataKeyField := 'Id';
    DataGrid1.DataBind;
  end;
end;

function TWebForm1.MakeDataSet: DataSet;
var
  ds: DataSet;
  dt: DataTable;
  dc: DataColumn;
  i: integer;
  dr: DataRow;
begin
  ds := DataSet.Create;
  dt := ds.Tables.Add;
  dc := dt.Columns.Add('Id');
  for i := 0 to 50 do
  begin
    dr := dt.NewRow();
    dr.Item['Id'] := i.ToString;
    dt.Rows.Add(dr);
  end;
  result := ds;
end;

procedure TWebForm1.UA_Callback(sender: System.Object; e: Karamasoft.WebControls.UltimateAjax.CallbackEventArgs);
begin
end;
procedure TWebForm1.OnInit(e: EventArgs);
begin
  InitializeComponent;
  inherited OnInit(e);
end;

end.


  
  29 Jun 2010, 1:09 AM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: LoadingDisplay
Unfortunately we don't have any experience with Delphi and we don't have it installed in our test environment. If you send us a Visual Studio web app for testing, we can try it in our test environment. Thanks.
  
  29 Jun 2010, 5:22 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
Re: LoadingDisplay
Here's the code from Visual Studio (framework 3.5). The problem remains the same.

.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datapris.WebForm11" %>

<%@ Register assembly="UltimateAjax" namespace="Karamasoft.WebControls.UltimateAjax" tagprefix="kswc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
   
</head>

    <script type="text/javascript">
  function DoCallBack() {
   DoUltimateCallback('UltimateAjax1');
  }
</script>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    <kswc:UltimateAjax ID="UltimateAjax1" runat="server" LoadingDisplay='<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:420px;height:90px;border:1px solid #666666;font-family:Verdana;font-size:8pt"><tr><td align="center"><img src="UltimateAjaxLoading.gif"><br><br>Loading...</td></tr></table>' >
            <asp:GridView ID="gId" runat="server"
            AutoGenerateColumns="False" >
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkRow" runat="server" onclick="DoCallBack()"/>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="ID"/>
                </Columns>
            </asp:GridView>
        </kswc:UltimateAjax>
        </div>   
</form>
</body>
</html>

.cs:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace datapris
{
    public partial class WebForm11 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataSet ds = new DataSet();
            if (!IsPostBack)
            {
                ds = MakeDataSet();
                gId.DataSource = ds;
                gId.DataBind();
            }
        }

        override protected void OnInit(EventArgs e)
        {
            InitializeComponent();
            base.OnInit(e);
        }

        private void InitializeComponent()
        {   
            this.UltimateAjax1.Callback += new Karamasoft.WebControls.UltimateAjax.UltimateAjax.CallbackEventHandler(this.UltimateAjax1_Callback);

        }

        private void UltimateAjax1_Callback(object sender, Karamasoft.WebControls.UltimateAjax.CallbackEventArgs e)
        {
            System.Threading.Thread.Sleep(2000);
        }

        private DataSet MakeDataSet()
        {
            DataSet ds = new DataSet();
            DataTable dt = ds.Tables.Add();
            int i = 0;
            dt.Columns.Add("ID", typeof(int));

            for (i = 0; i <= 50; i++)
            {
                dt.Rows.Add(i);
            }
            return ds;
        }
    }
}



  
  29 Jun 2010, 2:26 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: LoadingDisplay
Change your client-side JavaScript methods as follows:

<script type="text/javascript">
var
posLeft = 0;
var posTop = 0;
var posLeftContainer = 0;
var posTopContainer = 0;

function
DoCallBack() {
   GetScrollPos();
   DoUltimateCallback(
'UltimateAjax1', '', ClientResultCallback, ClientErrorCallback);
}

function
GetScrollPos() {
   if (typeof(window.pageYOffset) == 'number') {
      posLeft = window.pageXOffset;
      posTop = window.pageYOffset;
   }
   else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
      posLeft = document.body.scrollLeft;
      posTop = document.body.scrollTop;
   }
   else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
      posLeft = document.documentElement.scrollLeft;
      posTop = document.documentElement.scrollTop;
   }

   var containerElem = document.getElementById('UltimateAjax1').parentNode;
   posLeftContainer = containerElem.scrollLeft;
   posTopContainer = containerElem.scrollTop;
}

function
SetScrollPos() {
   window.scrollTo(posLeft, posTop);

   var containerElem = document.getElementById('UltimateAjax1').parentNode;
   containerElem.scrollLeft = posLeftContainer;
   containerElem.scrollTop = posTopContainer;
}

function
ClientResultCallback(argument) {
   RenderResult(argument);
}

function
ClientErrorCallback(argument) {
   RenderResult(argument);
}

function
RenderResult(argument) {
   GetCallbackClientElem(
'UltimateAjax1').innerHTML = argument;
   SetScrollPos();
}

// Return callback client element
function GetCallbackClientElem(UltimateAjaxClientID) {
   // IE renders ASP.NET Panel control as DIV while Mozilla renders as TABLE, therefore, return first table cell for Mozilla
   var UltimateAjaxClientElem = document.getElementById(UltimateAjaxClientID);
   return (UltimateAjaxClientElem && UltimateAjaxClientElem.tagName.toLowerCase() == 'table') ? UltimateAjaxClientElem.rows[0].cells[0] : UltimateAjaxClientElem;
}
</script>


  
  30 Jun 2010, 1:19 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
Re: LoadingDisplay

This solves the problem when using IE (version 7). In Firefox (version 3.6.6) and Opera (version 10.10) it keeps position correctly (therefore resolves the problem with going to the top of the page all the time), but results in another problem. Now it is not possible to check any of the checkboxes, because the one that was checked before the UltimateAjax callback is after the callback unchecked.


This behavior is same in frameworks 1.1 and 3.5.


  
  01 Jul 2010, 12:21 AM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: LoadingDisplay
You are right. We changed the client-side methods in our previous post and tested in IE, FF and Opera and it worked properly. Please use the new code.
  
  06 Jul 2010, 2:17 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
Re: LoadingDisplay
The latest works with the example I posted earlier. We still have a problem with loosing the position when the grid is inside a scrollable div. How could we get this working also?

Code behind is same as earlier. Here's the aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datapris.WebForm11" %>
<%@ Register assembly="UltimateAjax" namespace="Karamasoft.WebControls.UltimateAjax" tagprefix="kswc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
</head>
<script type="text/javascript">
var posLeft = 0;
var posTop = 0;
function DoCallBack() {
GetScrollPos();
DoUltimateCallback('UltimateAjax1', '', ClientResultCallback, ClientErrorCallback);
}
function GetScrollPos() {
if (typeof(window.pageYOffset) == 'number') {
posLeft = window.pageXOffset;
posTop = window.pageYOffset;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
posLeft = document.body.scrollLeft;
posTop = document.body.scrollTop;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
posLeft = document.documentElement.scrollLeft;
posTop = document.documentElement.scrollTop;
}
}
function SetScrollPos() {
window.scrollTo(posLeft, posTop);
}
function ClientResultCallback(argument) {
RenderResult(argument);
}
function ClientErrorCallback(argument) {
RenderResult(argument);
}
function RenderResult(argument) {
GetCallbackClientElem('UltimateAjax1').innerHTML = argument;
SetScrollPos();
}
// Return callback client element
function GetCallbackClientElem(UltimateAjaxClientID) {
// IE renders Panel element as DIV while Mozilla renders as TABLE, therefore, return first table cell for Mozilla
var UltimateAjaxClientElem = document.getElementById(UltimateAjaxClientID);
return (UltimateAjaxClientElem && UltimateAjaxClientElem.tagName.toLowerCase() == 'table') ? UltimateAjaxClientElem.rows[0].cells[0] : UltimateAjaxClientElem;
}
</script>
<body>
<form id="form1" runat="server">
<div style="height: 250px;overflow: scroll;">
<kswc:UltimateAjax ID="UltimateAjax1" runat="server" LoadingDisplay='<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:420px;height:90px;border:1px solid #666666;font-family:Verdana;font-size:8pt"><tr><td align="center"><img src="UltimateAjaxLoading.gif"><br><br>Loading...</td></tr></table>' >
<asp:GridView ID="gId" runat="server"
AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" onclick="DoCallBack()"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID"/>
</Columns>
</asp:GridView>
</kswc:UltimateAjax>
</div>
</form>
</body>
</html>

  
  06 Jul 2010, 5:54 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: LoadingDisplay
We changed the client-side methods in our previous post once again. Please use the new code.
  
  07 Jul 2010, 3:59 AM
Juunu is not online. Last active: 2/3/2011 12:54:26 AM Juunu

Top 10 Posts
Joined on 06-17-2010
Posts 8
Re: LoadingDisplay
Thank you, this fixed the problem.

  
 Page 1 of 1 (13 items)
Karamasoft Support Forums » General Discussions » UltimateAjax » Re: LoadingDisplay

You can add attachments
You can post new topics
You can reply to topics
You can delete your posts
You can edit your posts
You can create polls
You can vote in polls
Forum statistics are enabled
Forum is unmoderated

© 2002-2018 Karamasoft LLC. All rights reserved.