I have been playing around a lot with this the past few weeks, but now I am getting desperate. I have a very simple GridView in my default.aspx which display images from a folder based on the server.
I display them in the gridivew and i put the width and height to 300px; So it creates a square of 300 by 300 pixels like it should be.
But this makes the images crop to 300x300 pixels, but I want the pictures at their original size with a overflow:hidden;
I tried to add it trough css on the imagefield, but nothing is happening.
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
ShowHeader="False"
>
<Columns>
<asp:ImageField DataImageUrlField="value">
<ControlStyle CssClass="test" Height="300px" Width="300px" />
<HeaderStyle Width="300px" />
<ItemStyle Height="300px" Width="300px" />
</asp:ImageField>
</Columns>
</asp:GridView>
CSS
.test{
overflow:hidden;
}
How about change img to div, and use image as background:
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
ShowHeader="False"
>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="background-image:url(<%# Eval("value") %>);width:300px;height:300px;background-repeat:no-repeat;"></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Related
I have the buttons below working so that the buttond do what they have to, but i would like to add a CSS so that they can hover is there any method of doing this.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="pageID"
DataSourceID="SQLData" AutoGenerateColumns="False"
PageSize="1" Width="100%" Height="500px"
GridLines="None" ShowHeader="False" >
<Columns>
<asp:BoundField DataField="pageID" HeaderText="pageID" InsertVisible="False"
ReadOnly="True" SortExpression="pageID" ShowHeader="False" Visible="False" />
<asp:BoundField DataField="sectionID" HeaderText="sectionID"
SortExpression="sectionID" Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageNo" HeaderText="pageNo" SortExpression="pageNo"
Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageTitle" HeaderText="pageTitle"
SortExpression="pageTitle" Visible="False" ShowHeader="False" />
<asp:TemplateField HeaderText="pageContent" SortExpression="pageContent"
ShowHeader="False" ItemStyle-CssClass="pagecontent">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("pageContent") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblPageContent" runat="server" Text='<%# Bind("pageContent") %>' CssClass="pageContent"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Mode="NextPrevious"
NextPageImageUrl="~/images/navButtonNext.png" NextPageText="Next Page"
PreviousPageImageUrl="~/images/navButtonPrevious.png" PreviousPageText="Previous Page" LastPageImageUrl="images/navButtonNext.png" />
<PagerStyle CssClass="navPager" HorizontalAlign="Right" />
<PagerTemplate>
<asp:ImageButton ID="navBack" runat="server"
ImageUrl="~/images/navigation/grey_bttn_back.jpg" CssClass="sec" CommandName="Page" CommandArgument="Prev" ClientIDMode="Static" AlternateText="Back" ToolTip="Back" />
<asp:ImageButton ID="navHome" runat="server"
ImageUrl="~/images/navigation/grey_bttn_up.jpg" CommandName="gotoHome" ClientIDMode="Static" AlternateText="Home" ToolTip="Home" />
<asp:ImageButton ID="navFwd" runat="server"
ImageUrl="~/images/navigation/grey_bttn_fwd.jpg" CommandName="Page" CommandArgument="Next" ClientIDMode="Static" AlternateText="Fwd" ToolTip="Fwd" />
</PagerTemplate>
</asp:GridView>
You need JavaScript to do this. Bind your image buttons in mouse move event and add a class something like "hover" to the image button if mouse is hovered on it. Use your Css to style if the image button contains class.
<script type="text/javascript">
window.onload=function(){
document.getElementById("navBack").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navHome").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navBack").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navFwd").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navBack").className="";
}
}
</script>
Note: Don't forget to remove class name from image buttons if mouse is not hovered on them. Use css effects you want for the class "hover".
Suppose that I've a DataGrid like this:
<asp:Panel ID="PanelDGV" runat="server" Height="100%" ScrollBars="None" Width="100%">
<asp:GridView ID="DGV" runat="server" AutoGenerateColumns="False" GridLines="None" AllowPaging="true" PageSize="30" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:BoundField DataField="ProjectCode" HeaderText="Project Code" />
<asp:BoundField DataField="ProjectName" HeaderText="Project Name" />
<asp:ButtonField ButtonType="Image" ImageUrl="../Support/Image/Edit.png" ItemStyle-HorizontalAlign="Center" CommandName="CmdSearch" HeaderText="Edit">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:ButtonField>
</Columns>
<PagerStyle CssClass="pgr"></PagerStyle>
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
</asp:GridView>
</asp:Panel>
Is there any way to resize the DataGrid to automatically fill the webpage like the Windows desktop picture feature? Like when I resize the page, the DataGrid is resized automatically. Thank you.
GridView renders as an ordinary HTML table. So it should be style like it.
For example add a stlyle:
.mGrid
{
width:100%;
}
or GridView has a property which maps to html table width, which can be set to 100% too.
i want to give color to the first coloumn as same as header of the grid.
this is the image of original grid which i want.
this is the image of my which is displaying now
and this grid is created dynamically and all data are filld from server. so i want is to give color to only first coloumn ( not all coloumn , as shown in image)of grid at runtime
You could do this using simple CSS
table tr td:first-child
{
background-color: #FACF7B;
}
EDIT: This rule will apply to ALL tables though. You can change it to only apply to certain tables, e.g.:
.myTable tr td:first-child /* all tables with class="myTable" */
{
background-color: #FACF7B;
}
#myTable tr td:first-child /* tables with id="myTable" */
{
background-color: #FACF7B;
}
Add itemstyle to your first template field
<HeaderStyle BackColor="#FEFF01" HorizontalAlign="Center" />
<ItemStyle BackColor="#FEFF01" Font-Bold="True" HorizontalAlign="Center" />
EDIT:
see here is my grid view
<asp:GridView ID="GridViewOrganizationShareFee" runat="server"
AutoGenerateColumns="False" BackColor="White">
<HeaderStyle BackColor="#FFC000" Font-Bold="True" ForeColor="Black" Height="45px" HorizontalAlign="Center" />
<RowStyle ForeColor="Black" BackColor="#FFFDFF" Font-Bold="true" />
<Columns>
<asp:TemplateField HeaderText="Organization">
<ItemTemplate>
<asp:Label ID="LabelOrganizationName" runat="server" Text='<%#Eval("OrganizationID").ToString()=="0"?"n/a":Eval("Name") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle BackColor="#FEFF01" HorizontalAlign="Center" />
<ItemStyle BackColor="#FEFF01" Font-Bold="True" HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Fee Type">
<ItemTemplate>
<asp:Image ID="ImageDollor" runat="server" ImageUrl="~/Images/Icons/dollor.png" Visible='<%#Eval("DojoEventPaymentType").ToString().ToLower()=="a"?true:false %>' />
<asp:Image ID="ImagePercent" runat="server" ImageUrl="~/Images/Icons/percent.png" Visible='<%#Eval("DojoEventPaymentType").ToString().ToLower()=="p"?true:false %>' /> </ItemTemplate><ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Try this:
GridView1.Columns[0].ItemStyle.BackColor = System.Drawing.Color.Orange;
GridView1.Columns[0].ItemStyle.BackColor = System.Drawing.Color.Red;
post this after you bind grid data.ie after
GridView1.DataBind();
I want to fix the size of a GridView depending on the DIV containing it. I changed every possible attribute but nothing changes in the gridview. Here is the markup:
<table cellpadding="0" cellspacing="0" width="100%" style="height:100%">
<tr>
<td>
<div style="width: 500px">
<asp:GridView ID="GridView1" runat="server"
AllowSorting="True" AutoGenerateColumns="False"
DataSourceID="QuotationSQLDS"
onrowdatabound="GridView1_RowDataBound"
ForeColor="Black" Width="100%">
<HeaderStyle HorizontalAlign="Center" Font-Size="8pt" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id"
ReadOnly="True" SortExpression="Id"/>
<asp:BoundField DataField="description"
HeaderText="Description"
SortExpression="description" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
Please help me out because I am about to kick my laptop. Thanks
Try doing something like this
add class to both gridview and containing div
<div class="container" style="width: 500px">
<asp:GridView ID="GridView1" runat="server" CssClass="gvData"
AllowSorting="True" AutoGenerateColumns="False"
DataSourceID="QuotationSQLDS"
onrowdatabound="GridView1_RowDataBound"
ForeColor="Black">
<HeaderStyle HorizontalAlign="Center" Font-Size="8pt" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id"
ReadOnly="True" SortExpression="Id"/>
<asp:BoundField DataField="description"
HeaderText="Description"
SortExpression="description" />
</Columns>
</asp:GridView>
</div>
And use jQuery and do something like this:
$(document).ready(function () {
var height = $('.container').height();
$('.gvData').height(height);
});
and in your .css:
.container{height:auto; float:left;overflow:hidden;display:block;}
I think it should work if you are looking your grid view to be as broad as 500px.
Is it getting broader than that?
I have a grid named 'GridView1' contains two columns 'Date' and 'Session Details' I am displaying like this way only:
<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand"
runat="server" AutoGenerateColumns="False" Height="60px"
Style="text-align: center" Width="869px" EnableViewState="False">
<Columns>
<asp:BoundField HeaderText="Date" DataField="Date">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="" HeaderText="Session Detais" />
</Columns>
But here I need to display 3 column sections downside Session details without any column borders for each dates, how can I achieve this.
Date SessionDetails
06-04-2010 Time-(value from database) Topic-(value from database) Head-(value from database)
------- ------------------ ------------------- ----------------------
You're going to want to use a TemplateField to define the layout yourself. Something like this will do it:
<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand"
runat="server" AutoGenerateColumns="False" Height="60px"
Style="text-align: center" Width="869px" EnableViewState="False">
<Columns>
<asp:BoundField HeaderText="Date" DataField="Date">
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:TemplateField>
<HeaderTemplate>
Session Details
</HeaderTemplate>
<ItemTemplate>
<span class="col"><%# Eval("Time") %></span>
<span class="col"><%# Eval("Topic") %></span>
<span class="col"><%# Eval("Head") %></span>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Note: You'll have to replace Time, Topic, and Head with your real values if they differ. You can then style the placement of the 3 span tags with a style such as:
<style type="text/css">
.col { width: 100px; float: left; }
</style>