Localization: display

Showing posts with label display. Show all posts

Wednesday, March 28, 2012

LinkButton inside a repeater as a trigger

 I have been searching all over for an answer but have yet to find anything.  I have a repeater that I use to display a letter paging system.  It looks something like this   
 
<asp:Repeater ID="rpt_Letters" runat="server"> <ItemTemplate> <asp:LinkButton ID="lbtn_Letter" CausesValidation="false" CommandName="Filter" CommandArgument='<%# Eval("Letter") %>' runat="server" style="padding-left:7px; padding-top: 10px;" ToolTip='<%# Eval("Letter") %>'><%# Eval("Letter") %></asp:LinkButton> </ItemTemplate> </asp:Repeater>
 
Once a letter is clicked I want to update the information in a GridView.
I have the GridView in an update panel, but I can't find away to set my Letter Paging as a trigger.
 
Thank You!

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: Consolas, "Courier New", Courier, Monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

Add your repeater control to an UpdatePanel as follows:<asp:UpdatePanelID="PagingPanel"UpdateMode="Conditional"runat="server"><ContentTemplate><asp:RepeaterId="">...</asp:Repeater>and put your gridview control in another UpdatePanel like this:<asp:UpdatePanelID="OrderDetailsPanel"UpdateMode="Always"runat="server"><ContentTemplate><asp:gridview/>And then add handler for OnCommand event of the linkbutton (lbtn_Letter) where you can filter rows like this:protected void Letter_OnCommand(object sender, CommandEventArguments e) { SqlDataSource2.SelectParameters["OrderID"].DefaultValue = e.CommandArgument ;SqlDataSource2.DataBind();}where SqlDataSource2 is bound to your GridView control.That's it.

Thanks!

LinkButton Trigger inside a repeater

 I have been searching all over for an answer but have yet to find anything.  I have a repeater that I use to display a letter paging system.  It looks something like this   
 
<asp:Repeater ID="rpt_Letters" runat="server"> <ItemTemplate> <asp:LinkButton ID="lbtn_Letter" CausesValidation="false" CommandName="Filter" CommandArgument='<%# Eval("Letter") %>' runat="server" style="padding-left:7px; padding-top: 10px;" ToolTip='<%# Eval("Letter") %>'><%# Eval("Letter") %></asp:LinkButton> </ItemTemplate> </asp:Repeater>
 
Once a letter is clicked I want to update the information in a GridView.
I have the GridView in an update panel, but I can't find away to set my Letter Paging as a trigger.

Hi,

an approach could be wrapping the repeater with an UpdatePanel with UpdateMode="Conditional" and ChildrenAsTriggers="false". This won't make the panel update when a LinkButton is clicked, but will trigger an asynchronous postback where you can update the panel that contains the GridView. Check this basic example:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { repTriggers.DataSource = new int[3] { 0, 1, 2 }; repTriggers.DataBind(); } } protected void repTriggers_ItemCommand(object sender, RepeaterCommandEventArgs e) { if (e.CommandName == "trigger") { LinkButton btn = e.CommandSource as LinkButton; if (btn != null) { lblUpdate.Text = "Update triggered by " + btn.ID + e.Item.ItemIndex.ToString(); } UpdatePanel2.Update(); } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="TheScriptManager" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="conditional"> <ContentTemplate> <asp:Repeater ID="repTriggers" runat="server" OnItemCommand="repTriggers_ItemCommand"> <ItemTemplate> <asp:LinkButton ID="lnkTrigger" runat="server" Text="Trigger" CommandName="trigger"></asp:LinkButton> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="conditional"> <ContentTemplate> <asp:Label ID="lblUpdate" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Good suggestion, Garbin, but I think I have an even easier way. You can simply add your Repeater as a trigger for your UpdatePanel. Here's my version, with comments indicating where it differs from Garbin's:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { repTriggers.DataSource = new int[3] { 0, 1, 2 }; repTriggers.DataBind(); } } protected void repTriggers_ItemCommand(object sender, RepeaterCommandEventArgs e) { if (e.CommandName == "trigger") { LinkButton btn = e.CommandSource as LinkButton; if (btn != null) { lblUpdate.Text = "Update triggered by " + btn.ID + e.Item.ItemIndex.ToString(); } // [Steve] removed UpdatePanel2.Update() } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="TheScriptManager" runat="server"></asp:ScriptManager><%-- [Steve] removed UpdatePanel1 --%> <asp:Repeater ID="repTriggers" runat="server" OnItemCommand="repTriggers_ItemCommand"> <ItemTemplate> <asp:LinkButton ID="lnkTrigger" runat="server" Text="Trigger" CommandName="trigger"></asp:LinkButton> </ItemTemplate> </asp:Repeater> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="conditional"><%-- [Steve] added repTriggers as an AsyncPostBackTrigger --%> <Triggers> <asp:AsyncPostBackTrigger ControlID="repTriggers" /> </Triggers> <ContentTemplate> <asp:Label ID="lblUpdate" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Hi,

yes, definitely :)

Thank you!

That was too easy! I can't believe I never tried that. Embarrassed

Saturday, March 24, 2012

listView item styling

I'm trying to get a listView control to display a certain style from a cssClass on the clicked item (which I have working) and then when a different item is clicked, the style is added to the new item and removed from the old item. Only one item in the listView can be selected (styled) at one time.

<listView targetElement="names" itemTemplateParentElementId="itemTemplateParent">
   <bindings>
       <binding dataContext="dataSource" dataPath="data" property="data" />
       <binding dataContext="dataSource" dataPath="isReady" property="enabled" />
   </bindings>
   <layoutTemplate>
       <template layoutElement="template" />
   </layoutTemplate>
   <itemTemplate>
     <template layoutElement="itemTemplate">
        <control targetElement="itemTemplate">
           <behaviors>
              <hoverBehavior>
                 <hover>
                    <invokeMethod target="itemTemplate" method="addCssClass">
                       <parameters className="rowHover" />
                    </invokeMethod>
                 </hover>
                 <unhover>
                    <invokeMethod target="itemTemplate" method="removeCssClass">
                       <parameters className="rowHover" />
                    </invokeMethod>
                 </unhover>
             </hoverBehavior>
               <clickBehavior>
                   <click>
                       <invokeMethod target="itemTemplate" method="addCssClass">
                           <parameters className="rowClick" />
                       </invokeMethod>
                   </click>
               </clickBehavior>
           </behaviors>
        </control>
        <label targetElement="nameLabel">
           <bindings>
               <binding dataPath="Name" property="text" />
            </bindings>
         </label>
      </template>
   </itemTemplate>
   <emptyTemplate>
      <template layoutElement="emptyTemplate" />
   </emptyTemplate>
</listView>

I don't believe you can do this declaratively in a clean way. Toachieve this, you should probably extend the ListView control andimplement the concept of selections inside the listview itself. Thatway the listview can keep track of a selected item, so the user of thatlistview doesn't have to. If you want to give this a try yourself,you'll probably want to handle the click event of each item instance,and add a few properties/events like "selectedCssClass", "selectedItem"and "selectedIndexChanged".

We've already implemented selection for listView, it should be available in one of the next builds. We don't have selectedCssClass yet, but it looks like a good idea. I'll open a bug to track it.

Wednesday, March 21, 2012

Loading UserControls in Tabs

Hello folks,

In my project I am using the AjaxToolKit to display Tabs on my page which is inherieted from a master page Script manager and UpdatePanel is on master page. The aspx page has TabContainer:

<ajaxToolkit:TabContainerID="tcMain"runat="server"OnClientActiveTabChanged="ActiveTabChanged"OnActiveTabChanged="ActiveTabChangedServer">

Also on the aspx page I have this to wireup the client side Tab change event:

<scripttype="text/javascript"language="javascript">
function ActiveTabChanged(sender, e) {
__doPostBack('<%= tcMain.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>

On the code behind of the aspx page I have a method that does the work when the active Tab is changed:

protectedvoid ActiveTabChangedServer(object sender,EventArgs e){
// Do something
}

My Tab container has two tabs each of which loads a User control. What I am noticing is that whenever I switch tabs the previously loaded control has to load again, a postback is occuring. The Tab Panel in the container has ViewState enabled.

Should I have to load the UserConrol again when I switch to a different Tab?

Is there a more efficient way of doing this?

Should I unload the UserControl for better performance and making page lighter when switching tabs? Is this the correct way of doing things?

Appreciate your help.

You could put the tab panel inside of an updatepanel.
You could also set up an handler to check each time the tab is changed and load the last control from viewstate (I like to set up a property that saves any control that I load dynamically into viewstate so I can always refer to it when I need it)...

Take the update panel out of the masterpage and put on the page with the tab container.

Update panels are not intended for masterpages.

Hope this helps

Hi,

You have to load the UserControl again. This is a FAQ about dynamic control in asp.net. Please refer to the following explanation.

1. Why do I have to recreate dynamic controls every time? /Why dynamic controls are disappeared on PostBack?

Whenever a request comes, a new instance of the page that isbeing requested is created to serve the request even it's a PostBack. Allcontrols on the page are reinitialized, and there state can be restored fromthe ViewState in a later phase.
The dynamic controls have to be recreated again and added tothe control hierarchy. Otherwise, they won't exist in the page.
Please be careful with when to create dynamic controls. Inorder to keep their state, they have to be created before the LoadViewStatephase. Page_Init as well as Page_Load methods are options available.
For more information about this topic, please refer to thisarticle:
Creating Dynamic Data Entry User Interfaces[http://msdn2.microsoft.com/en-us/library/aa479330.aspx ]

Hope this helps.