I am programming using .NET aspx. In the asp:DataList component I want to distribute columns evenly, even in case not all columns are assigned an ItemTemplate.
E.g.
<asp:DataList id="test" runat="server" Width="90%" gridlines="None"
RepeatDirection="Horizontal"
RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate> ... </ItemTemplate>
</asp:DataList>
At runtime the array bound to the datalist only contains 2 elements. I still want the columns to be distributed evenly over the four spaces.
If you are dedicated to using a DataList, there are two reasonable methods for accomplishing this.
First, you can wrap your ItemTemplate in a div with a fixed width.
<ItemTemplate>
<div style="width: 250px;">
...
</div>
</ItemTemplate>
Secondly, if your DataList must expand or contract to fit the viewer's screen, you can utilize jquery.
We will be grabbing the computed client width of the datalist after page load and adjusting the columns to be distributed evenly.
<asp:DataList id="MyDataList" ClientIDMode="Static" runat="server" Width="90%" gridlines="None"
RepeatDirection="Horizontal"
RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate>
<div class="DataListItem">
....
</div>
</ItemTemplate>
</asp:DataList>
Two quick notes before we see the jquery
ClientIDMode="Static" on the datalist
Every datalist item will be wrapped in a div with class "DataListColumn"
In jquery, upon page load, you can get the computed datalist width as follows
$(document).ready(function () {
$(".DataListItem").width($("#MyDataList").width() / 4); // Set the column width
});
With all of that said, you may want to just use a repeater so you can have more control over actual columns.
Related
I am attempting to create a table with a checkbox, an image, and an image title in each cell.
I created the table statically with no values in the cell items.
I then dynamically fill in each cell.
When I click a checkbox in the cell, the page flickers for the first 2 check boxes, then on the 3rd and subsequent clicks it repaints the whole table.
I added a RadScriptManager, but it appears to have had no effect.
I do nothing on the Page Load postback except load a few variables from the Session state.
This is part of my ASPX page.
<asp:Table ID="tblItems" runat="server" GridLines="Both" Width="98%" >
<asp:TableRow ID ="tr1" runat="server" Visible="false">
<asp:TableCell ID="tcR1C1" runat="server">
<asp:CheckBox ID="cbR1C1" runat="server"
OnCheckedChanged="cb_CheckedChanged" AutoPostBack="true" />
<asp:Label ID="lblR1C1" runat="server" />
<br />
<asp:Image ID="imgR1C1" runat="server" Width="200px" Height="200px" />
</asp:TableCell>
this is part of my initial load page
lbl.Text = lProducts.Products[iCurrentProduct].title;
img.ImageUrl = lProducts.Products[iCurrentProduct].image.src;
I am initially loading the object from an http://. Not sure if that is the issue. I could get each item locally as an image, then put it in the table, but I think the table should not be updating all the time - I thought that is what the RadScriptManager was supposed to do?
I need to make filters on table (GridView), on the top of each column should appear "TextBox" to enter filter values. GridView width is not fixed, column's width always changing depending on results. How to make that TextBox width on top of columns auto changed when GridView's columns width changing?
As you see in image, there are 3 columns. White - TextBoxes (for filtering data), yellow - GridView
This is my current code:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="InsertName" runat="server" width="130px" placeholder="Name Filter..."></asp:TextBox>
<asp:TextBox ID="InsertEmail" runat="server" width="130px" placeholder="Domain Filter..."></asp:TextBox>
<asp:TextBox ID="InsertCountry" runat="server" width="130px" placeholder="Domain Filter..."></asp:TextBox>
<br />
<br />
</div>
<asp:GridView ID="GridView1" runat="server" BackColor="#FFFFB3" width="390px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
</asp:GridView>
</form>
Here I set fixed widths for each TextBox and for GridView. But here is problem, GridView have fixed width as I wrote width="390px", but columns width always changing. Have you ideas?
You cannot accomplish this in the current HTML markup since the DIV containing the text boxes is unaware of the GridView resizing.
Instead, you could use a HeaderTemplate inside a TemplateField like this (with a 100% text box width):
<asp:GridView ID="GridView1" runat="server" BackColor="#FFFFB3" width="390px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
...
<asp:TemplateField HeaderText="Name">
<HeaderTemplate>
<asp:TextBox ID="InsertName" runat="server" width="100%" placeholder="Name Filter..."></asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
</asp:TemplateField>
...
</Columns>
</asp:GridView>
My code is
<asp:DropDownList ID="ddlFrom" runat="server" CssClass="From"></asp:DropDownList>
and my css code is .From{ width:250px;height:25px}
Height can not be so large because there are large number of items in it.
How do I add a vertical scroll bar to my drop down ?
There are a few 3rd party controls out there in the web, and you could easily bing them. I just put a very simple workaround that involves DropDownExtender (of AJAX ControlToolkit), TextBox, ListBox, and a few lines of Javascript.
Here TextBox will hold the selected value of the listbox. My ASPX code below:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text="Select your item" CssClass="MyTextBox"></asp:TextBox>
<div style="padding: 4px;" id="ItemsDiv" runat="server">
<asp:ListBox ID="ListBox1" runat="server" onclick="callme()" CssClass="MyDropDown" Rows="6">
</asp:ListBox>
</div>
<asp:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"
DropDownControlID="ItemsDiv">
</asp:DropDownExtender>
</ContentTemplate>
</asp:UpdatePanel>
<script>
function callme() {
element = document.getElementById("ListBox1");
str = element.options[element.selectedIndex].value;
document.getElementById("TextBox1").value = str;
}
</script>
Option 1. Remove the height of the dropdown so that it will grow automatic
Option 2. If it is in a table cell or something which does not allow it to grow then put it in a div like below
<div style="overflow-y:scroll; height:50px;
overflow: -moz-scrollbars-horizontal;">
<select....></select>
</div>
Here are some example click here
In the css class add overflow-y:auto, when the options length increases beyon 25px, you will get a scrollbar in y-axis of your dropdpwn
I am trying to create a view with multiple product listing in it. An example is below of how the product listing should look like. I am not sure if I should use a table and create a new table for each new product or what. I am not a very good ASP.NET developer and I am not sure how to approach this.
Basically if I have 10 results I need to display 10 of these in a list and each button and image is different based on each product result.
The source of data is from another class that was built and runs through a foreach for each product. Any guidance on this would be helpful. I just think I need to be pointed in the right direction because I tried it with a table and it wasn't working out to well.
Using GridView
<asp:GridView runat="server" ID="myGrid"
OnRowCommand="MyGrid_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%# Eval("SmallImageUrl") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<div>Title: <%# Eval("Title") %> </div>
<div>Weight: <%# Eval("Weight") %> </div>
<asp:Button runat="server" ID="GetOfferButton" CommandArgument='<%# Eval("OfferID") %>'></asp:Button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Assuming you have a collection of Products e.g. List, or DataTable of Product etc., and your collection has these fields
class Product
{
//property Title
//property SmallImageUrl
//property Weight
}
You can have
myGrid.DataSource = <Replace with List of Products collection>;
myGrid.DataBind();
Maybe you can try using asp.net table and just add rows with the images dynamically once you iterate your results..check out the control here:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.table.aspx
and here you have an example to add rows dynamically:
http://msdn.microsoft.com/en-us/library/7bewx260%28v=vs.100%29.aspx
in each row you can put the controls that you want...
What I want is a pagination structure of this type .
I am able to display the previous and next buttons using the code below and they are functional too.
<PagerTemplate>
<asp:LinkButton CommandName="Page" CommandArgument="Prev" ID="LinkButton2" runat="server" Style="color: Black">
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/videos_page_arrow_previous.gif"/>
</asp:LinkButton>
[Records <%= gridviewVideos.PageIndex * gridviewVideos.PageSize%>-<%= gridviewVideos.PageIndex * gridviewVideos.PageSize + gridviewVideos.PageSize - 1%>]
<asp:LinkButton CommandName="Page" CommandArgument="Next" ID="LinkButton3" runat="server" Style="color: Black">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/videos_page_arrow_next.gif"/>
</asp:LinkButton>
</PagerTemplate>
But I am not sure how to achieve in getting the page numbers in between them. Each page of mine contains 5 rows, if I use a repeater control to do that, then how ?
For these kind of scenarios you should ideally wanna use asp:ListView coupled with asp:DataPager. But if you are persisting with a asp:GridView you should extend it to use asp:DataPager
I have been using Matt Berseth's Using a DataPager with the GridView Control - Implementing IPageableItemContainer. But the demo / download site is down. So you could download the same from GridView with DataPager in ASP.NET 3.5 which I believe is more or less trhe same code.