Fixing the gridview column width for long string values without spaces

If your grid column contains data string values that does not have any spaces, just setting the grid and column width wont work. When the data is loaded , the width of the grid as well the column exceeds the set value. To make sure it works.

1. Set the desired width for each column and the grid.
2. Add below line in the page load event of your page

    gridview.Attributes.Add("style", "word-break:break-all;word-wrap:break-word");

Using reportviewer with modal popupextender in Asp.Net

To show a RDLC report inside a modal popupextender follow these steps.

1. Instead of attaching the modal popup to the button to show report., attach it to a hidden/dummy button.
2. On the click of Show Report button,load the data in the reportviewer and call modalpopup.show()
3. Set the AsyncRendering as false in the reportviewer Designer View.

To make sure that the modal popup does not close when a postback occurs on the reportviewer, e.g. On using functionalities of reportiviewer-next page, search etc. follow these steps.

1.     1.In the 2nd steps above add the following line of code. This will let us know that the modal pop up is   currently being displayed in the next page load
           ViewState["ModalShow"] = "Show";

 2. In the page load event add the following code. This will check that the modal pop up was shown before the post back using the viewstate property we have added. If it exists then show the modalpopup

      if (ViewState["ModalShow"]!= null && ViewState["ModalShow"].ToString().Equals("Show"))

      {
          ModalPopupExtender.Show();   
      }   

  3. In the close event of the button , add the following line of code . This will make the modal pop up to remain hidden on next post back, as the modal popup has been closed by the user.  
       ViewState["ModalShow"] = "Hide";

Thats it.     

Resizing a panel using animation extender in asp.net

This one is quite similar to what we learned in my last post about moving a panel using animation extender. Just don’t forget to set the coordinates for this panel as the animation extender uses them to assign the new location.

Now just add this to your code, just like we did before.

<Resize Duration=".5" FPS ="30" Height = "300" Width = "300" unit ="px"/>

Duration : Duration of the animation
FPS : Frames per second
Height : Desired final height of the panel
Width : Desired final width of the panel
Unit : Unit of height and Width mentioned

Simple right?

Creating parallel animation in asp.net using animation extender

We learned moving a panel on a button click and sequencing animation in the last post. In this post we’ll learn implementing the parallel animation. Suppose you want to move a panel and at the same time fade it out too. In such a case we use parallel Animation. For this, we need to just make small addition to code we wrote previously.

Step 3: Modify the code to add parallel animation.

<OnClick>
<Sequence AnimationTarget = "Panel1">
<EnableAction AnimationTarget = "btnAnimate" Enabled = "false"/>
<Parallel Duration = ".5" FPS = "30">
<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal = "100" unit ="px"/>
<FadeOut Duration=".5" FPS = "30" ></FadeOut>
</Parallel>
</Sequence>
</OnClick>

Build and play with it.

Moving a panel on a button click using Ajax animation extender in asp.net

This is in continuation to my previous post “Moving a panel using ajax animation extender”. In this post, I have explained animating a panel on a button click.

For this we just need to make a few modifications to the earlier code.

Step 1: Add a button which will used to initiate the animation.

<asp:Button ID = "btnAnimate" runat ="server" Text="Click to Animate" OnClientClick="return false;"/>

Step 2: Change the TargetControlID to the button instead of panel.

<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID ="btnAnimate" >

Step 3: Add the Sequence and EnableAction tags as following. Sequence for the panel to be animated and EnableAction for the Button to initiate the animation.

<Sequence AnimationTarget = "Panel1">

<EnableAction AnimationTarget = "btnAnimate" Enabled = "false"/>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal = "100" unit ="px"/>

</Sequence>

Build the code and click on the button to view the animation.

You can add further sequences to this code. Suppose you want to Fadeout the panel after it is moved to the location, you can modify the above code to this.

<Sequence AnimationTarget = "Panel1">

<EnableAction AnimationTarget = "btnAnimate" Enabled = "false"/>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal = "100" unit ="px"/>

<FadeOut Duration=".5" FPS = "30" ></FadeOut>

</Sequence>

I hope this helps.

Moving a panel using ajax animation extender in asp.net

I was looking for this over the net but couldn’t find a simple explanation to implement the move animation. Just follow these simple steps and you would be good to go.

Step 1: Create a panel which you want to move with the animation extender

<asp:Panel ID="Panel1" runat="server" CssClass="movingPanel">

Click on the Panel to move it

</asp:Panel>

Step 2: Assign a CSS class to this panel. Make sure you assign the coordinates for this panel as animation extender uses these coordinates to move the panel.

.movingPanel

{

position : absolute;

height : 200px;

width: 250px;

top: 166px;

left: 500px;

border-width: 1px;

border-color:Black;

border-style:double;

}

Step 3: Add the animation extender to the page.

<asp:AnimationExtender ID="AnimationExtender1" runat="server"TargetControlID ="Panel1" >

<Animations>

<OnClick>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal ="100" unit ="px"/>

</OnClick>

</Animations>

</asp:AnimationExtender>

Duration: Duration of Animation

FPS: Frames per second
Vertical: Vertical length to cover
Horizontal: Horizontal length to cover
Unit: Unit to define Vertical and Horizontal lengths
Build the solution and click on the panel to move it. Let me know if you face any issues.

Creating Pulse animation using animation extender in asp.net

Pulse animation will make your panel blink on and off for the number of times you want it to. 

This is again almost similar to the resizing, moving and other animations with just the difference of the tag.

<Pulse Duration = ".1" iterations = "10"/>

Duration: Duration of pulse

Iterations: Number of pulse

Animating a panel using Ajax Animation Extender - Server Side

1) Add an UpdatePanel to your page which contains a panel that needs to be animated.

<%--Update panel having the panel to be animated --%>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Panel ID="Panel1" runat="server" CssClass="movingPanel">

Testing Animation

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

2) Add checkboxes that will be used to set Animations and 2 , one to set the animations and the other to initiate it

<asp:CheckBox ID="chkMove" runat="server" Text="Move" />

      <br />

      <asp:CheckBox ID="chkFade" runat="server" Text="Fade" />

      <br />

     <asp:CheckBox ID="chkPulse" runat="server" Text="Pulse" />

     <br />

     <asp:Button ID="btnMovePanel" runat="server" Text="Set Animations"

       OnClick="btnMovePanel_Click" Width="112px" />

        <asp:Button ID="btnAnimate" runat="server" Text="Animate"

      OnClick="btnAnimate_Click" OnClientClick = "return false" />

3) Add your AnimationExtender to your page and set the TargetControlID to the button that will initiate the animation.

<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID = "btnAnimate">

<%--Leave the animations tag empty --%>

<Animations>

</Animations>

</asp:AnimationExtender>

4) Moving to the server side, we need to add the event for Button which will set the animations.

I created a StringBuilder object to store animations and then the selected to this stringbuilder object. The Animations object is then assigned to the AnimationExtender.Animations

protected void btnMovePanel_Click(object sender, EventArgs e)

{

      StringBuilder Animations = new StringBuilder("<OnClick>" +

      "<Sequence AnimationTarget = \"Panel1\">");

      if (chkMove.Checked)
           {

          Animations.Append("<Move Horizontal = \"100\" unit =\"px\" FPS = \"30\" /> ");
     }
     if (chkFade.Checked)
      {

           Animations.Append("<FadeOut FPS = \"30\"/>");

           Animations.Append("<FadeIn FPS = \"30\" />");
     }
      if (chkPulse.Checked)
     {
         Animations.Append("<Pulse Duration = \".1\" iterations = \"4\" />");
     }
       Animations.Append("</Sequence></OnClick>");

       this.AnimationExtender1.Animations = Animations.ToString();

}

You can obviously modify this code depending on your requirements.