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
Posted by A2H in Trouble Shooting on March 26, 2015
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.
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
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.
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.
How to get the Last Row value from HTMLTable in Jquery in Asp.Net
Posted by A2H in JavaScript, JQuery on March 17, 2015
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" />
How to close the HoverMenu when user mouseover to hover Panel or Closing the HoverMenu on mouseout of target control in Asp.Net
Posted by A2H in AjaxControlToolkit on March 7, 2015
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
Trouble Shooting: Asp.Net AjaxControlToolkit ReOrderList control not working in IE 11 Browser
Posted by A2H in Trouble Shooting on March 6, 2015
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:
