Archive

Archive for November, 2012

Display Tooltip for Details With Gridview using JQuery

November 29, 2012 Leave a comment

Hi all,

try this example to Display Tooltip for Details With Gridview using JQuery

In this example i will Use Northwind Database and i will bind Categories Table to Gridview and also will display all products which is related to each Category as Tooltip

1) Open VS2008 and create new WebSite and Add Two Web Pages Called “Default.aspx” and “ProductDetails.aspx”

2) Right click on Solution Explorer and add Web.Config file and inside it add the Connection string to Northwind Database


<connectionStrings>
 <add name="NorthwindConnectionString" connectionString="Data Source=SQL2008;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

3) Open Default.aspx Page and From Toolbox drag Gridview control which we will beind it to Categories Table using SQLDataSource


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
 DataKeyNames="CategoryID" DataSourceID="sds_Category"
 ForeColor="#333333">
 <RowStyle BackColor="#EFF3FB" />
 <Columns>
 <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
 <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
 <asp:TemplateField HeaderText="CategoryID" InsertVisible="False" SortExpression="CategoryID">
 <ItemTemplate>
 <a href="#" class='anchor1' id='<%#Eval("CategoryID")%>'>
 <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryID") %>'></asp:Label></a>
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <EditRowStyle BackColor="#2461BF" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Category" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
 </asp:SqlDataSource>

Then at the end of your Default.aspx Page we will Add HTML DIV to display Tooltip on it

<div id="disp" style="position: absolute; background-color: Gray;"></div>

4) Add this Javascript Code to display Tooltip


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('.anchor1').mouseover(function() {
 $("#disp").empty();
 $("#disp").show("slow");
 //$("#disp").css({ top: $(this).parent().find("table:first").offset().top, left: $(this).parent().find("table:first").offset().left + $(this).parent().find("table:first").width() });
 var id1 = $(this).attr("id");
 var pos = $(this).offset();
 var width = $(this).width();
 $("#disp").css({ left: (pos.left + width) + 'px', top: pos.top - 2 + 'px' });
 var ID = 'CategoryID=' + id1;
 $.ajax({
 type: "GET",
 url: "ProductDetails.aspx",
 data: ID,
 success: function(data) {
 $("#disp").html(data);
 },
 error: function(r) {
 alert(r);
 }
 });
 return false;
 });
 $('.anchor1').mouseout(function() {
 $("#disp").hide();
 });
 $('.anchor1').mousemove(function(e) {

$("#disp").css({ left: e.pageX });
 });
 });
 </script>

5) Open ProductDetails.aspx Page and from Toolbox drag Gridview Control and Bind it using SQLDataSource Control

In this page i will display all product for specific Category and i will pass the CategoryID to this Page through query string


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
 CellPadding="4" DataKeyNames="ProductID" DataSourceID="sds_Products"
 ForeColor="#333333">
 <RowStyle BackColor="#EFF3FB" />
 <Columns>
 <asp:BoundField DataField="ProductID" HeaderText="ProductID"
 InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
 <asp:BoundField DataField="ProductName" HeaderText="ProductName"
 SortExpression="ProductName" />
 <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"
 SortExpression="QuantityPerUnit" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
 SortExpression="UnitPrice" />
 <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
 SortExpression="UnitsInStock" />
 </Columns>
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <EditRowStyle BackColor="#2461BF" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Products" runat="server"
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
 <SelectParameters>
 <asp:QueryStringParameter Name="CategoryID" QueryStringField="CategoryID"
 Type="Int32" />
 </SelectParameters>
 </asp:SqlDataSource>

After that run your web site

Hope this helps

Good Luck.

 

Advertisements
Categories: ASP.Net, Javascript, Jquery

Bind Gridview To SharePoint List or Library

November 29, 2012 Leave a comment

Hi all,

try this example to Bind Gridview To SharePoint List or Library

In this example i will bind my Gridview to sharepoint Library called “MyLibrary”

1) Open VS2010 and create a new Project and select Visual Web Part

2) From Toolbox add Gridview control


<asp:GridView ID="grdDocuments" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:HyperLinkField DataTextField="Title" DataNavigateUrlFields="URL" />
</Columns>
</asp:GridView>

3) In Code behind add the following Code


void BindDocuments()
 {
 SPWeb mySite = SPContext.Current.Web;
 SPList myList = mySite.Lists["MyLibrary"];
 SPListItemCollection items = myList.Items;
 //Here we will make a datatable and we will put our document library data to the data table
 DataTable table;
 table = new DataTable();
 table.Columns.Add("Title", typeof(string));
 table.Columns.Add("URL", typeof(string));
 // Create rows for each splistitem
 DataRow row;
 foreach (SPListItem result in items)
 {
 row = table.Rows.Add();
 row["Title"] = result.Name;
 row["URL"] = "Your site url" + result.Url;
 }
 grdDocuments.DataSource = table.DefaultView;
 grdDocuments.DataBind();
 }

4) Now build the Project and Deploy it

Hope this helps

Good Luck.

Categories: SharePoint 2010

Expand Collapse Sharepoint 2010 Quick Launch Menu

November 27, 2012 14 comments

Hi all,

try this example to Expand Collapse SharePoint 2010 Quick Launch Menu

First : Open SharePoint Site using SharePoint Designer

Second : Click on Master Pages from Site Objects and Select V4.Master then right click and Edit

Third : Add the following Script


<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
 jQuery(function($) {
 //Hide all
 $('.s4-ql li ul').hide();
 //Set the Images up
 var Collapse = "/_layouts/images/collapse.gif";
 var Expand = "/_layouts/images/expand.gif";
 //Find each top level UI and add reletive buttons & children numbers
 $('.s4-ql ul li').find('ul').each(function(index) {
 var $this = $(this);
 $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['<a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'><img src=\'/_layouts/images/expand.gif\'/></a><span style=\'margin-top:5px;float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));
 });
 //Setup Click Hanlder
 $('.min').click(function() {
 //Get Reference to img
 var img = $(this).children();
 //Traverse the DOM to find the child UL node
 var subList = $(this).siblings('ul');
 //Check the visibility of the item and set the image
 var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;
 //Toggle the UL
 subList.slideToggle();
 });
 });
</script>

Then Save and Open your site

Hope this helps

Good Luck.

Categories: SharePoint 2010

Use Computed Column in SQL Server

November 18, 2012 Leave a comment

Hi all ,

try this example to use computed column in SQL Server


CREATE TABLE Authors
(
 AuthorId int IDENTITY(1,1) NOT NULL,
 FirstName nvarchar(100),
 LastName nvarchar(100),
 FullName AS (FirstName + SPACE(1) + LastName) -- computed column
)

for more information check this link

Hope this helps

Good Luck

Categories: SQL Server

Solve Problem Cannot create/shadow copy when that file already exists

November 17, 2012 2 comments

Hi all

try this to solve error message “Cannot create/shadow copy when that file already exists”

in web.config add this line :


<system.web>
 <hostingEnvironment shadowCopyBinAssemblies="false" />
</system.web>

Hope this helps

Good Luck.

Categories: ASP.Net

Remove Hours, Minutes, and Second from DateTime in SQL Server

November 13, 2012 Leave a comment

Hi all,

try this Query to Remove Hours, Minutes, and Second from DateTime in SQL Server

If we try this Query to Display the current DateTime

select GETDATE() as [Current DateTime] 

we will get current datetime including Hours,Minutes,and Seconds

But what if we need to remove them we will use the following SQL Query

select convert(datetime,convert(varchar,GETDATE(),101)) as [CurrentDate] 

Hope this helps

Good Luck.

Categories: SQL Server

Get Months Name Between Two Dates in SQL

November 13, 2012 Leave a comment

Hi all,

try this example to Get Months Name Between Two Dates in SQL


CREATE FUNCTION [dbo].[GetMonthList] (
 @StartDate DATETIME,
 @EndDate DATETIME
)
RETURNS @months TABLE (
 [month] VARCHAR(10)
)
WITH EXECUTE AS OWNER AS
BEGIN
 DECLARE @MonthDiff INT;
 DECLARE @counter INT;
 SET @counter = 0;
 SELECT @MonthDiff = DATEDIFF(mm, @StartDate, @EndDate);
 WHILE @counter <= @MonthDiff
 BEGIN
 INSERT @months
 Select DATENAME( month , DATEADD(mm, @counter, @StartDate))
 SET @counter = @counter + 1;
 END
 RETURN;
END

and to Test this Function try this

select * from dbo.GetMonthList ('2012-10-09','2012-12-09')

Hope this helps

Good Luck.

Categories: SQL Server