Advice on Show/Hide Table Row using Ajax (limitation as no javascript to be used)

[Bryan Tan]

Currently is doing full postback to server which is slow in reponse. A snippet of the code below:

%

@ Register Src="~/UserControls/ExecutionMktSeg.ascx" TagName="ExecutionMktSeg"

 

 

TagPrefix="ucKpi" %>

 

<%

--<%@ Register Src="~/UserControls/ExecutionMktSegMobile.ascx" TagName="ExecutionMktSegMobile"

 

TagPrefix="ucMktSeg" %>--

 

%>

 

<

 

asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"

 

 

MultiPageID="RadMultiPage1" SelectedIndex="0">

 

 

<tabs>

 

 

<telerik:RadTab runat="server" Text="Desktop" PageViewID="DesktopPageView"></telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Mobile" PageViewID="MobilePageView" ></telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Server" PageViewID="ServerPageView"

 

 

Selected="True" ></telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="GPG" PageViewID="GPGPageView" ></telerik:RadTab>

 

<%

-- <telerik:RadTab runat="server" Text="Misc" PageViewID="MiscPageView" ></telerik:RadTab>--%>

 

 

</tabs>

 

 

</telerik:RadTabStrip>

 

 

<telerik:RadMultiPage ID="RadMultiPage1" runat="server"

 

 

RenderSelectedPageOnly="false" SelectedIndex="0">

 

 

<telerik:RadPageView ID="DesktopPageView" runat="server">

 

 

<asp:Table ID="Table1" runat="server" Width="100%">

 

<%

-- <tr>

 

<td>

<label ID="commitpackowner" runat="server" text="PC (Tjone Irene)"></label>

</td>

</tr>--

 

%>

 

 

<asp:TableRow ID="TableRow1" runat="server">

 

 

<asp:TableCell ID="TableCell1" runat="server">

 

 

<asp:Button ID="btn_DesktopCommitPackTr" runat="server" CssClass="GridButton" Text="Commit & Pack (Hide)" OnClick="GridDisplayControl"></asp:Button>

 

 

</asp:TableCell>

 

 

</asp:TableRow>

 

 

<asp:TableRow ID="TableRow9" runat="server">

 

 

<asp:TableCell ID="DesktopCommitPackTr" runat="server">

 

 

<ucKpi:ExecutionMktSeg ID="DesktopCommitPack" runat="server" />

 

 

</asp:TableCell>

 

 

</asp:TableRow>

 

 

<asp:TableRow ID="TableRow2" runat="server">

 

 

<asp:TableCell ID="TableCell2" runat="server">

 

 

<asp:Button ID="btn_DesktopUTSTr" runat="server" CssClass="GridButton" Text="UTS Inventory (Hide)" OnClick="GridDisplayControl"></asp:Button>

 

 

</asp:TableCell>

 

 

</asp:TableRow>

 

 

</asp:Table>

 

 

 

 

 

</telerik:RadPageView>

 

 

 

 

<%

-- <telerik:RadPageView ID="MiscPageView" runat="server">

 

<ucKpi:ExecutionKpi ID="MiscMktSeg" runat="server" />

</telerik:RadPageView>--

 

%>

 

 

</telerik:RadMultiPage>

 

</

 

asp:Content>

 

 

protected void GridDisplayControl(object sender, EventArgs e)

 

{

 

string gridID = this.ToggleGridDisplay(sender, e);

 

 

Control executionGrid = (Control)DeepFindControl(this.Page, gridID);

 

 

if (executionGrid != null)

 

{

 

if (executionGrid.Visible == true)

 

{

executionGrid.Visible =

false;

 

((

Button)sender).Text = ((Button)sender).Text.Replace("Hide", "Show");

 

}

 

else

 

{

executionGrid.Visible =

true;

 

((

Button)sender).Text = ((Button)sender).Text.Replace("Show", "Hide");

 

}

}

}

 

private string ToggleGridDisplay(object sender, EventArgs e)

 

{

 

string buttonId = ((Button)sender).ID;

 

 

string gridID = buttonId.Split('_')[1];

 

 

return gridID;

 

}

 

private Control DeepFindControl(Control control, string id)

 

{

 

Control foundControl = null;

 

 

if (control.ID == id)

 

{

foundControl = control;

}

 

if (control.HasControls())

 

{

 

Control tempControl;

 

 

foreach (Control subcontrol in control.Controls)

 

{

tempControl = DeepFindControl(subcontrol, id);

 

if (tempControl != null)

 

{

foundControl = tempControl;

}

}

}

 

return foundControl;

 

}

[Albert Shenker]

If you mean the limitation is that javascript is disabled, then AJAX won't work, as javascript is the primary technology used in AJAX communications between the client and server. So, you're stuck with doing this server-side.

[Bryan Tan]

ic.. Do you have a sample code using Ajax which we can use to discuss with my team here on the changes we need to implement to make it work?

[Albert Shenker]

The people using your web app would need to have javascript enabled in their browsers to use AJAX. If this is a public web app, then you might be able to assume or require that they do as most people won't turn this off. I don't usually do this myself, but if you wanted to, you can go the extra step of providing a messge to them if their javascript is disabled informing them that the site won't work. You can do a google search for methods of determining in your code if javascritp is enambled in the browser. If the web app is an internal one (ie if you have control over the browser settings for its users), then you just have to make sure javascript is enabled, and again, this isn't something that usually has to be done unless it has been specifically turned off.

As for implementing AJAX in your example, it really depends on what you are trying to do. I, for one, don't do much, if any AJAX, apart from using the Telerik AJAX controls, and I'm sure they would satisfy whatever scenrio you have. You can find lots of example code and demos at:

http://demos.telerik.com/aspnet-ajax/controls/examples/default/defaultcs.aspx

If you need help, there online support system is usually very good as well.

One thing I would note, it doesn't look like you have a heck of a lot of content, though of course, perhaps you are generating a lot of content through the custom controls (like ExecutionMktSeg ).If the postback is slow, it could be caused by a number of things, including time to retrieve data from a database, time to process it, and time to generate and render the content on screen. All of these things could be the bottle neck causing your performance issues. I'm sure using AJAX would help, but if the real reason for the slow performance is database-related, then AJAX won't make a huge difference. What JAX allows you to do is update only the content that changes in response to a user action (such as clicking a button), rather than posting back and going through the entire page life-cycle. If, in your scenario, all of the content is rendered the first time the page loads, and after that its only a matter of show/hiding portions of it in response to certain user clicks, then AJAX can help (in fact, you could really do this solely using javascript DHTML, and leave the server out of it completely). Where AJAX is most useful, IMO, is if you need to retrieve specific data/content in response to a user action (such as a button click). In that case, you retrieve only the small subset of data and only update a small segment of the content on the page. That is how AJAX really imporves the performance of web apps.

[Bryan Tan]

So as based on your recommendation, had created the javascript below to show/hide the table cell. However, the javascript is unable to get the ID of the Table Cell and hence unable to perform as desired. Need your advice as I am using sitemaps in this case also.

 

<

 

script language="javascript" type="text/javascript">

 

 

 

 

 

 

function $() {

 

 

var elements = new Array();

 

 

for (var i = 0; i < arguments.length; i++) {

 

 

var element = arguments[i];

 

 

if (typeof element == 'string')

 

element = document.getElementById(element);

 

if (arguments.length == 1)

 

 

return element;

 

elements.push(element);

}

 

return elements;

 

}

 

function ToggleTargetTableCell(id) {

 

alert(

"Inside the ToggleTargetTableCell " + id);

 

 

var obj = $(id);

 

 

if (DesktopCommitPackTr.style.display != '') {

 

DesktopCommitPackTr.style.display =

'';

 

}

 

else {

 

DesktopCommitPackTr.style.display =

'none';

 

}

}

 

 

function ToggleTargetImage(id, sMinus, sPlus) {

 

 

var img = $(id);

 

alert(

"id, sMinus, sPlus " + id + " " + sMinus + " " + sPlus);

 

alert(

"Found Image Button");

 

 

var bExpand = img.ImageUrl.value;

 

 

if (bExpand == sMinus) {

 

img.ImageUrl.value = sPlus;

alert(

"Assign Image Button sPlus " + sPlus);

 

}

 

else {

 

img.ImageUrl.value = sMinus;

alert(

"Assign Image Button sMinus " + sMinus);

 

}

 

return;

 

}

 

 

 

function ToggleTableCell(btnID) {

 

alert(btnID);

 

var tempPlaceHolder = btnID.split("_");

 

 

var targetTableCell = tempPlaceHolder[1];

 

alert(targetTableCell);

ToggleTargetTableCell(targetTableCell);

ToggleTargetImage(btnID,

'~/Content/Images/qsfConfigUpArrow.PNG', '~/Content/Images/qsfConfigDownArrow.PNG');

 

}

 

 

 

 

</

 

script>

 

 

 

 

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

 

 

 

<%

--<AjaxSettings>

 

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>--

 

%>

 

 

</telerik:RadAjaxManager>

 

 

 

 

 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25" />

 

 

 

 

 

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"

 

 

 

 

 

 

SelectedIndex="0" Skin="Forest">

 

 

 

 

 

 

<Tabs>

 

 

 

 

 

 

<telerik:RadTab runat="server" Text="Desktop" PageViewID="DesktopPageView">

 

 

 

 

 

 

</telerik:RadTab>

 

 

 

 

 

 

<telerik:RadTab runat="server" Text="Mobile" PageViewID="MobilePageView">

 

 

 

 

 

 

</telerik:RadTab>

 

 

 

 

 

 

<telerik:RadTab runat="server" Text="Server" PageViewID="ServerPageView" Selected="True">

 

 

 

 

 

 

</telerik:RadTab>

 

 

 

 

 

 

<telerik:RadTab runat="server" Text="GPG" PageViewID="GPGPageView">

 

 

 

 

 

 

</telerik:RadTab>

 

 

 

 

 

<%

-- <telerik:RadTab runat="server" Text="Misc" PageViewID="MiscPageView" ></telerik:RadTab>--%>

 

 

</Tabs>

 

 

 

 

 

 

</telerik:RadTabStrip>

 

 

 

 

 

 

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" RenderSelectedPageOnly="false"

 

 

 

 

 

 

SelectedIndex="0">

 

 

 

 

 

 

<telerik:RadPageView ID="DesktopPageView" runat="server">

 

 

 

 

 

 

<asp:Table ID="Table1" runat="server" Width="100%" CellSpacing="5">

 

 

 

 

 

<%

-- <tr>

 

<td>

<label ID="commitpackowner" runat="server" text="PC (Tjone Irene)"></label>

</td>

</tr>--

 

%>

 

 

<asp:TableRow ID="TableRow1" runat="server">

 

 

 

 

 

 

<asp:TableCell ID="TableCell1" runat="server">

 

 

 

 

 

 

<asp:ImageButton ID="btn_DesktopCommitPackTr" runat="server" CssClass="GridButton" ImageUrl="~/Content/Images/qsfConfigUpArrow.PNG" OnClientClick="ToggleTableCell('btn_DesktopCommitPackTr')"></asp:ImageButton>

 

 

 

 

 

 

&nbsp

 

 

 

 

 

 

<asp:Label ID="lblDestopCommitPack" runat="server" CssClass="GridLabel" Text="Commit & Pack"></asp:Label>

 

 

 

 

 

 

</asp:TableCell>

 

 

 

 

 

 

</asp:TableRow>

 

 

 

 

 

 

<asp:TableRow ID="TableRow9" runat="server">

 

 

 

 

 

 

<asp:TableCell ID="DesktopCommitPackTr" runat="server">

 

 

 

 

 

 

<ucKpi:ExecutionMktSeg ID="DesktopCommitPack" runat="server" />

 

 

 

 

 

 

</asp:TableCell>

 

 

 

 

 

 

</asp:TableRow>

 

[Albert Shenker]

Unfortunately, javascript is not my forte. However, if you Google "javascript toggle table row", I think you'll find what you're looking for using jQuery, or some other simple scripts.