Archive for March, 2015

Solution to: The type System.IO.Packaging.Package’ is defined in an assembly that is not referenced. You must add a reference to assembly ‘WindowsBase

Description:

In article I am going to explain the solution of a problem which you may face when you work with Open Office XML SDK and DocumentFormat.OpenXML assembly in Asp.Net. After adding the needed reference when you build the project you will get exception “The type ‘System.IO.Packaging.Package’ is defined in an assembly that is not referenced. You must add a reference to assembly ‘WindowsBase’”

Solution:

To resolve this issue you need to add the reference of WindowsBase dll reference to your solution.

Advertisements

, , ,

Leave a comment

How to move items between to two Listboxes in Asp.Net

Introduction

In this article I am going to explain how to move items between two listboxes on button click. In other words move items from Listbox on left to Listbox on right side and vice versa.

Description:

We can achieve this requirement in two ways either by serverside(C#) or by client side (Javascript or Jquery). Here I am going to use Jquery codes to move items between Listbox controls.

Prerequisites:

You need to ensure that you have added the necessary Jquery references in your page prior to using the below code. You can either use the Jquery files available online or  If you don’t want to use the Online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Complete Code:

Here is complete code which moves the items between two listboxes in Asp.Net using Jquery.

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Attach click event of button
            $("#btnRight").click(function (e) {
                //Pass the value from Listbox1 to Listbox2
                $("#Listbox1 > option:selected").each(function () {
                    $(this).remove().appendTo("#Listbox2");
                });
                e.preventDefault();
            });
            //Attach click event of button
            $("#btnleft").click(function (e) {
                //Pass the value from Listbox2 to Listbox1
                $("#Listbox2 > option:selected").each(function () {
                    $(this).remove().appendTo("#Listbox1");
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form runat="server">
        <asp:ListBox ID="Listbox1" runat="server" SelectionMode="Multiple" Width="80">
            <asp:ListItem Text="Item1" Value="item1" />
            <asp:ListItem Text="Item2" Value="item2" />
            <asp:ListItem Text="Item3" Value="item3" />
            <asp:ListItem Text="Item4" Value="item4" />
            <asp:ListItem Text="Item5" Value="item5" />
            <asp:ListItem Text="Item6" Value="item6" />
        </asp:ListBox>
        <asp:Button ID="btnRight" runat="server" Text="Move to Right" />
        <asp:Button ID="btnleft" runat="server" Text="Move to Left" />
        <asp:ListBox ID="Listbox2" runat="server" SelectionMode="Multiple" Width="80"></asp:ListBox>
    </form>
</body>
</html>

Demo

, , , ,

1 Comment

How to show Header and Footer when GridView is empty in Asp.Net

In this article we are discussing the steps to show the Gridview’s Header and Footer if the datasource attached with Gridview is empty.

Problem Description:

As per design GridView control won’t show the header and footer if datasource assigned to GridView is empty or. You need to have a custom implementation to show the Gridview Header and Footer.

Solution:

Since GridView footer does not display when the GridView is empty (no rows). The work around is to ensure that a dummy row is returned from the database when there is no real data present.

You can find the complete implementation given below

HTML:

<asp:GridView ID="GridView2" CellPadding="5" runat="server" ShowFooter="True" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Contact Name">
                    <ItemTemplate>
                        <asp:Label ID="lblContactname" Text='<%# Eval("ContactName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtContactName" runat="server"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contact Name">
                    <ItemTemplate>
                        <asp:Label ID="lblCity" Text='<%# Eval("City") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contact Name">
                    <ItemTemplate>
                        <asp:Label ID="lblCountry" Text='<%# Eval("Country") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
            <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        </asp:GridView>

You need to ensure that you have set the ShowFooter property of GridView to true.

C#:

 protected void Page_Load(object sender, EventArgs e)
         {
             if (!IsPostBack)
             {
                 BindGridView();
             }
 
         }
 
         //Function which will bind the details to GridView
         public void BindGridView()
         {
             //Checking if gridview datasource is empty or not
             if (((DataTable)this.Get_Details()).Rows.Count > 0)
             {
                 GridView2.DataSource = this.Get_Details();
                 GridView2.DataBind();
             }
             else
             {
                 //if the Data is empty then bind the GridView with an Empty Dataset
                 GridView2.DataSource = this.Get_EmptyDataTable();
                 GridView2.DataBind();
 
             } 
         }
         //Populate some dummy data for GridView 
         public DataTable Get_Details()
         {
             DataTable dt = new DataTable();
             DataRow dr;
             string Price = "15.123,25.123,35.3245345,45.567,55.345";
             string ContactName = "Name1,Name2,Name3,Name4,Name5";
             string City = "City1,City2,City3,City4,City5";
             string Country = "Country1,Country2,Country3,Country4,Country5";
 
             string[] list1 = ContactName.Split(',');
             string[] list2 = City.Split(',');
             string[] list3 = Country.Split(',');
             string[] list4 = Price.Split(',');
 
             dt.Columns.Add("Price", typeof(Double));
             dt.Columns.Add("City", typeof(string));
             dt.Columns.Add("Country", typeof(string));
             dt.Columns.Add("ContactName", typeof(string));
             dt.Columns.Add("Date", typeof(DateTime));
 
             //* Uncomment below section of code to see gridview populating with data
             //for (int i = 0; i < list1.Length; i++)
             //{
             //    dr = dt.NewRow();
             //    dr["ContactName"] = list1[i];
             //    dr["City"] = list2[i];
             //    dr["Country"] = list3[i];
             //    dr["Price"] = list4[i];
             //    dr["Date"] = DateTime.Now;
             //    dt.Rows.Add(dr);
             //}
 
             return dt;
         }
 
         //PopulateEmpty data for GridView 
         public DataTable Get_EmptyDataTable()
         {
             DataTable dtEmpty = new DataTable();
             //Here ensure that you have added all the column available in your gridview
             dtEmpty.Columns.Add("City", typeof(string));
             dtEmpty.Columns.Add("Country", typeof(string));
             dtEmpty.Columns.Add("ContactName", typeof(string));
             DataRow datatRow = dtEmpty.NewRow();
 
             //Inserting a new row,datatable .newrow creates a blank row
             dtEmpty.Rows.Add(datatRow);//adding row to the datatable
             return dtEmpty;
         }
 

Sample Demo Image are given below

GridView Header and Footer with out Data

GridView Header and Footer with Data

Another option to show header when GridView is empty is to set the GridView.ShowHeaderWhenEmpty property to true. However this property is available only if your .Net framwork is 4.0 or higher.

, , , ,

Leave a comment

How to add Jquery Files manually to your solution in Asp.Net

Introduction:

Jquery files are hosted in online CDNs like Jquery and Google CDN etc. However if you don’t want to use online CDN and you want to have a local copy of jquery files in your solution then you can follow the below steps.

Steps to add the Jquery Files to your solution

You can download the latest Jquery files from Jquery download section or from online Jquery Hosted sites and use it in your project. Personally I also prefer to do that as we have a dependency on network (internet) whenever we use the online hosted libraries.

To add JQuery files to your project you need to manually add the Jquery Js files to your solution

First add a scripts folder to your project, so that you can keep all your script files in

  • Open your Projectwithin the Solution Explorer
  • Right-click the Main WebProjectand Choose Add option
  • You will be able to see new side window opened from that select the New Folder option
  • Rename the folder name to “Scripts” to add it to your project.

Now you have a folder where you can keep all your Js scripts files.

  • Right-click the Scriptsfolder and Choose Add Existing Item option
  • Next step is to add the jquery files to your project
  • Find and select the Jquery.min.js library  by browsing to its downloaded folder location)
  • Click the Ok buttonto add it to your Project.

Next step is to add the jquery ui files to your project

  • Find and select the jquery-ui.min.js library by browsing to its downloaded folder location.
  • Click the Ok buttonto add it to your Project.

Next step is to add the css files to your project

  • Find and select the smoothness/jquery-ui.css library  by browsing to its downloaded folder location)
  • Click the Ok buttonto add it to your Project.

,

Leave a comment

How to get the Last Row value from HTMLTable in Jquery in Asp.Net

Introduction:

In this article I am going to explain how to get the last row values from HTML table using Jquery. In this example I have used the online Jquery CDN files available. If you don’t want to use the Online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

I have used the last() filter function in Jquery to get the last element in that set of DOM elements.

Complete Code

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

        $(document).ready(function () {
            //Attach click event o button
            $('#btnGetValue').click(function () {
                //Get the last row in gridview
                var tr = $('#DetailTable tr:last');
                //Ge the firstcolumnVal 
                var firstcolumnval = $(tr).find("td").html()
                alert(firstcolumnval);
                //Get the secondcolumn value
                var secondcolumnval = $(tr).find("td").find('input.Col1').val();
                alert(secondcolumnval);
                //Get the Thirdcolumn value
                var Thirdcolumnval = $(tr).find("td").find('input.length').val();
                alert(Thirdcolumnval);
                //Get the Fourthcolumn value
                var Fourthcolumnval = $(tr).find("td").find('input.Col3').val();
                alert(Fourthcolumnval);
            });
        });
    </script>

    <table style="width: 40%" id="DetailTable">
        <tr>
            <td>1
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="4" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="12" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value1" />
            </td>
        </tr>

        <tr>
            <td>2
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="5" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="6" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value2" />
            </td>
        </tr>

        <tr>
            <td>3
            </td>
            <td>
                <input type="text" maxlength="100" class="Col1" display="Dynamic" value="34" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col2" display="Dynamic" value="12" />
            </td>
            <td>
                <input type="text" maxlength="100" class="Col3" display="Dynamic" value="Text Value3" />
            </td>
        </tr>
    </table>
    <input id="btnGetValue" value="GetValue" type="button" />

, , , ,

Leave a comment

How to close the HoverMenu when user mouseover to hover Panel or Closing the HoverMenu on mouseout of target control in Asp.Net

Introduction

In this article we are discussing on how to close the AjaxControlToolkit HoverMenuExtender Control when user move out target control of HoverMenuExtender.

Problem Description:

As per design the AjaxControlToolkit’s HoverMenuExtender don’t close if mouse pointer is over the Panel which displayed as HoverMenu. We need custom implementation to close the HoverMenuExtender when user moves out of Target Control.

Demo of issue here

Solution:

To resolve this issue we can use the Javascript approach. Basically we are making use of onmouseout event to hide the HoverMenuExtender control.

Code to Hide the HoverMenuExtenderControl:

	<script type="text/javascript">
            function ButtonMouseOut() {
                //Access the hovermenu here
                var hovermenu = $find("Hovemenu1");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }    
	</script>

Complete Code:

	<script type="text/javascript">
            function ButtonMouseOut() {
                //Access the hovermenu here
                var hovermenu = $find("HoverMenuExtender2");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }
        </script>
        <style type="text/css">
            .panelClass {
                background-color: blue;
                width: 300px;
            }
        </style>
        <asp:Panel ID="Panel1" runat="server" CssClass="panelClass">
            This is a sample HoverMenuExtender pop up.
        </asp:Panel>
         <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release"
            CombineScripts="false">
        </cc1:ToolkitScriptManager>
        <cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" PopupControlID="Panel1"
            TargetControlID="Button1" PopupPosition="Right">
        </cc1:HoverMenuExtender>
        <asp:Button ID="Button1" runat="server" onmouseout="ButtonMouseOut();" Text="Hover Here to Open PopUp" />

Demo of solution

, , ,

Leave a comment

Trouble Shooting: Asp.Net AjaxControlToolkit ReOrderList control not working in IE 11 Browser

Introduction

In this article I am going to provide a solution for the problem where the Asp.Net AjaxControlToolkit’s ReOrderList control won’t work in IE 11 Browser.

Problem Description:

In IE11 browser AjaxControlToolkit ReOrderList’s changing the order of items (ReOrder) won’t work properly. You don’t get any error however when you try to drag there won’t be any changes to ReOrderList.

Solution:

To resolve this issue you need to set the ClientIDMode to control to AutoID and it will resolve the issue.

CSS:

  <style type="text/css">
            .DragHandleClass {
                width: 40px;
                height: 20px;
                background-color: blue;
                color: white;
                cursor: move;
            }

            .ajaxOrderedList li {
                list-style: none;
            }
        </style>

HTML

 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:ReorderList ID="ReorderList1" runat="server"
            OnItemReorder="ReorderList1_ItemReorder"
            PostBackOnReorder="true"
            CallbackCssStyle="callbackStyle"
            DragHandleAlignment="Left"
            ItemInsertLocation="Beginning"
            DataKeyField="ID"
            SortOrderField="Name" ClientIDMode="AutoID">
            <ItemTemplate>
                <div class="itemArea">
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("Name")%>' />
                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Order_By") %>' />
                </div>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
            </ReorderTemplate>
            <DragHandleTemplate>
                <div class="DragHandleClass">Drag</div>
            </DragHandleTemplate>
        </asp:ReorderList>

C#:



public static DataTable dt = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                //test data suppose comes from database
                dt = new DataTable();
                dt.Columns.Add("ID");
                dt.Columns.Add("Name");
                dt.Columns.Add("Order_By");
                dt.Rows.Add(1, "Name1", "First");
                dt.Rows.Add(2, "Name2", "Second");
                dt.Rows.Add(3, "Name3", "Third");
                dt.Rows.Add(4, "Name4", "Fourth");
                this.ReorderList1.DataSource = dt;
                this.ReorderList1.DataBind();
            }

        }

        protected void ReorderList1_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
        {
            DataRow selectedRow = dt.Rows[e.OldIndex];
            DataRow newRow = dt.NewRow();
            newRow.ItemArray = selectedRow.ItemArray; // copy data
            dt.Rows.Remove(selectedRow);//delete the old row
            dt.Rows.InsertAt(newRow, e.NewIndex); //add new row
            //your code save the datatable to database
            this.ReorderList1.DataSource = dt;
            this.ReorderList1.DataBind();
        }

Demo:

, ,

Leave a comment