How can I fix the width for each column in GridView. My GridView keeps extend along with data in the cell. I need it to skip to new line when it reach the right side of the cell. This is my code in .aspx file:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="Emp_ID" DataSourceID="LinqDataSource1"
AllowPaging="True" AllowSorting="True" Width="900px" HorizontalAlign="Center" >
<Columns>
<asp:BoundField DataField="Emp_ID" HeaderText="ID"
InsertVisible="False" ReadOnly="True" SortExpression="Emp_ID"/>
<asp:BoundField DataField="Emp_Username"
HeaderText="Username" SortExpression="Emp_Username" />
<asp:BoundField DataField="Emp_Password"
HeaderText="Password" SortExpression="Emp_Password" />
<asp:BoundField DataField="Emp_Name"
HeaderText="ชื่อพนักงาน" SortExpression="Emp_Name" />
<asp:BoundField DataField="Emp_Address"
HeaderText="ที่อยู่" SortExpression="Emp_Address" />
<asp:BoundField DataField="Emp_Tel"
HeaderText="เบอร์โทรศัพท์" SortExpression="Emp_Tel" />
<asp:TemplateField HeaderText="รูปพนักงาน" SortExpression="Emp_Picture">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Emp_Picture") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image2" runat="server" Height="70px"
ImageUrl='<%# Eval("Emp_Picture", "{0}") %>' Width="50px" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Status" HeaderText="สถานะ"
SortExpression="Status" />
<asp:HyperLinkField DataNavigateUrlFields="Emp_ID"
DataNavigateUrlFormatString="AdminUpdate.aspx?Emp_ID={0}" Text="Edit" />
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="ChkSelectAll" runat="server"
AutoPostBack="True" oncheckedchanged="ChkSelectAll_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="Chk" runat="server" AutoPostBack="True" oncheckedchanged="Chk_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here's my design view:
As you can see, the first 4 columns has no problem with that until column 5. It keeps extend cause all GridView extend out of the page
Set itemstyle width of every column.For example.
<asp:BoundField DataField="Emp_Address"
HeaderText="ที่อยู่" SortExpression="Emp_Address">
<ItemStyle Width="200px" HorizontalAlign="Left" />
</asp:BoundField>
Wrapping is done based on words so that any single word is not broken in two lines.
So won't work for you if your data has long string without space.
The problem is that you can't insert spaces on your own because that may change the meaning of data.
While showing in grid we show only that long string which can be accommodated in column and then add "..." (only if string is more than what is showing) and then add a tooltip to show the full string.
That way the grid formatting is not compromised and if user wants he can hover his mouse and see the whole string.
hope this helps Example
Try setting the property RowStyle-Wrap of the GridView to True.
You can use ItemStyle-Width to fix the column width ,but in case you enter characters which can not be enclosed in given width (As seen in your image) ,column will expand as per the inputs so you can use RowStyle-Wrap property of gridview
<asp:GridView ID="grdVwtrial" runat="server" RowStyle-Wrap="true">
RowStyle-Wrap==true should work I guess. For more clarifications refer this:
http://forums.asp.net/t/1263769.aspx
Related
I have a problem in gridview, as per requirement i have set No of Records per page = 4 in gridview. I have to select Checkbox against every complaint but problem is then when i got to next pge in gridview and e.g fro 1 to 2 then when i come back to page 1 then it doesn't show TICK in check boxes . It doesn't remember my selection when i browse to and back to page.
<asp:GridView ID="GridViewSmsComplaints" AllowPaging="True" PageSize="4" runat="server" AutoGenerateColumns="False" CssClass="mGrid" BorderColor="#333333" Width="550px" OnPageIndexChanging="GridViewSmsComplaints_PageIndexChanging" >
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:BoundField HeaderText="Recieving Date" DataField="RecievingDate" />
<%--<asp:BoundField HeaderText="ToMobileNo" DataField="ToMobileNo" /> --%>
<asp:BoundField HeaderText="FromMobileNo" DataField="FromMobileNo" />
<asp:BoundField HeaderText="Message" DataField="Message" >
<ItemStyle Wrap="True" />
</asp:BoundField>
<asp:TemplateField HeaderText="IsComplaint">
<ItemTemplate>
<asp:CheckBox ID="ckboxIsComplaint" runat="server" Checked='<%# Convert.ToBoolean(Eval("IsComplaint").ToString()) %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
please check the above link.here your problem was clearly explained here.i think so it may be helpfull
As per comments...
If you do not update the underlying database by processing the OnCheckChanged event of the check box, then it will simply be reading the same data all the time.
From How to add event for Checkbox click in Asp.net Gridview Column, I have extracted the required information and tried to modify to fit your initial question.
<asp:TemplateField HeaderText="IsComplaint">
<ItemTemplate>
<asp:CheckBox ID="ckboxIsComplaint" runat="server" Checked='<%# Convert.ToBoolean(Eval("IsComplaint").ToString()) %>' OnCheckedChanged="chk_CheckedChanged" AutoPostBack="true/>
</ItemTemplate>
</asp:TemplateField>
add checkbox change event in aspx.cs page
protected void chk_CheckedChanged(object sender, EventArgs e)
{
GridViewRow row = ((GridViewRow)((CheckBox)sender).NamingContainer);
<your data source>.Rows[row.DataItemIndex]["B"] = ((CheckBox)GridViewSmsComplaints.Rows[row.RowIndex].FindControl("ckboxIsComplaint")).Checked;
}
I am binding Checkbox field to database and want to show actual value like if in database it is 1 then checkbox should be ticked in gridview else unchecked. I tried but my code doesn't show avtual value in checkbox, always remain unchecked.
CODE:
<asp:GridView ID="GridViewSmsComplaints" AllowPaging="True" runat="server" AutoGenerateColumns="false" CssClass="mGrid" Width="450px" OnPageIndexChanging="GridViewSmsComplaints_PageIndexChanging" >
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:BoundField HeaderText="Recieving Date" DataField="RecievingDate" />
<%--<asp:BoundField HeaderText="ToMobileNo" DataField="ToMobileNo" /> --%>
<asp:BoundField HeaderText="FromMobileNo" DataField="FromMobileNo" />
<asp:BoundField HeaderText="Message" DataField="Message" />
<asp:TemplateField HeaderText="IsComplaint">
<ItemTemplate>
<asp:CheckBox ID="ckboxIsComplaint" OnCheckedChanged="ckboxIsComplaint_CheckedChanged" AutoPostBack="true" runat="server" Value='<%# Eval("IsComplaint") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
.cs
SELECT [ID]
,REPLACE(convert(varchar, ReceivedMessages.ReceivedDateTime, 106), ' ','/') as RecievingDate
,[ToMobileNo]
,[FromMobileNo]
,[Message],
[IsComplaint]
FROM [CmsSMSDb].[dbo].[ReceivedMessages]
where Convert(date,ReceivedDateTime)>= #DateFrom AND Convert(date,ReceivedDateTime)<= #DateTo AND IsComplaint=1
If you will get only true or false then you can use the following, by adding
Checked='<%# Convert.ToBoolean(Eval("IsComplaint").ToString()) %>' to the CheckBox.
<asp:CheckBox ID="ckboxIsComplaint" OnCheckedChanged="ckboxIsComplaint_CheckedChanged" AutoPostBack="true" runat="server" Checked='<%# Convert.ToBoolean(Eval("IsComplaint").ToString()) %>' />
If you are getting null value also, then you need to do the checking and unchecking from C# code in RowDataBound event.
Try this
<asp:CheckBoxField DataField="IsComplaint" HeaderText="IsComplaint" SortExpression="IsComplaint" />
instead of using
<asp:TemplateField HeaderText="IsComplaint"> ............. </asp:TemplateField>
I have the following GridView:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="SysInvoiceID" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="InvoiceID" HeaderText="SysInvoiceID" ReadOnly="True" SortExpression="SysInvoiceID" />
<asp:BoundField DataField="BillMonth" HeaderText="BillMonth" SortExpression="BillMonth" />
<asp:BoundField DataField="InvoiceDate" HeaderText="InvoiceDate" ReadOnly="True" SortExpression="InvoiceDate" />
<asp:BoundField DataField="InvoiceNumber" HeaderText="InvoiceNumber" SortExpression="InvoiceNumber" />
<asp:BoundField DataField="Net" HeaderText="Net" SortExpression="Net" />
<asp:BoundField DataField="VAT" HeaderText="VAT" SortExpression="VAT" />
<asp:BoundField DataField="Gross" HeaderText="Gross" SortExpression="Gross" />
<asp:ButtonField CommandName="ViewInvoice" HeaderText=" " ShowHeader="True" Text="View" />
</Columns>
</asp:GridView>
The very last column (ButtonField) is one I created myself just to include the text 'View' on each row, which when clicked, will bring up a PDF invoice.
I'm not sure if this is even possible, but I was wondering if it was possible to add some sort of validation for that column or something, so that if the 'InvoiceID' column is blank, the 'View' link on the corresponding row won't show up.
I felt close to doing this by going on split view in Visual Studio and then the 'Edit Columns' button on GridView tasks, but like I said I'm not sure if it's possible to do it this way and may have to resort to simply coding it.
Thanks for any help!
Use a <TemplateField> instead of a <ButtonField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button runat="server" Text="View"
Visible='<%# Eval("IsEmpty(InvoiceID)") %>' CommandName="ViewInvoice" />
</ItemTemplate>
</asp:TemplateField>
And add a method to your page that is IsEmpty(string id) or whatever type your id is, and just check to see if it's empty first.
You can also add a CommandArgument attribute to the Button that will let you specify what the argument to it will be.
Use a placeholder...
<asp:Placeholder runat="server" ID="plView" Visible="<%# Convert.ToBoolean(InvoiceID == null) ? false : true %>">
<asp:ButtonField CommandName="ViewInvoice" HeaderText=" " ShowHeader="True" Text="View" />
</asp:Placeholder>
i am using Gridview.
my code is:
<asp:GridView ID="gvReceivers" runat="server" AutoGenerateColumns="False"
BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px"
CellPadding="2" ForeColor="Black" GridLines="None"
OnRowEditing="RowEditing" Font-Size="Medium"
OnSelectedIndexChanging="gvReceivers_SelectedIndexChanging"
onrowcancelingedit="gvReceivers_RowCancelingEdit"
onrowdeleting="gvReceivers_RowDeleting"
onrowupdating="gvReceivers_RowUpdating">
<FooterStyle BackColor="Tan" />
<Columns>
<asp:CommandField ShowEditButton="True" ButtonType="Image"
CancelImageUrl="~/Images/Cancel.png" UpdateImageUrl="~/Images/save.png"
EditImageUrl="~/images/Edit.png" ItemStyle-Width="25px"
UpdateText="Update" CancelText="Cancel" />
<asp:CommandField ShowDeleteButton="true"
DeleteImageUrl="~/Images/delete.png" ButtonType="Image"
ItemStyle-Width="25px" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgSelect"
CommandName="Select" AlternateText="Select"
ImageUrl="~/Images/allowed.png" />
</ItemTemplate>
</asp:TemplateField>
now, i click on edit image. update & cancel images & Event are coming.but issue is on IE Update & Cancel image coming Up & Down. it's working fine on Mozila & chrome.check below image.
It's simple just add ItemStyle-Wrap="false" in your column.
It seems you have not given any width for ItemTemplate, you can take two separate ItemTemplate or you can also work with single.
<asp:TemplateField HeaderText="ColumnHeader">
<EditItemTemplate>
//You controls
</EditItemTemplate>
<ItemStyle Width="30%" />
*Edit *
You can follow this link and update code accordingly. If get stuck any where then you can ask me. Here we can guide you but the main task you have to do your self.
As Dorel Domocos suggested, I managed to solve the line break using the ItemStyle Wrap in the CommandField.
For example:
<asp:CommandField ButtonType="Image" ShowEditButton="True" EditImageUrl="~/images/edit.png" CancelImageUrl="~/images/cancel.png" UpdateImageUrl="~/images/update.png" ItemStyle-Wrap="false" >
<ItemStyle Wrap="False" Width="48px"></ItemStyle>
</asp:CommandField>
It can be either on the CommandField with the attribute ItemStyle-Wrap="false", or with its ItemStyle element with Wrap="False" attribute.
The generated result has the white-space:nowrap; CSS style, having the following when being in Edit mode:
<td style="width:48px;white-space:nowrap;">
<input type="image" name="GridView1$ctl02$ctl00" src="images/update.png" alt="Update">
<input type="image" src="images/cancel.png" alt="Cancel" onclick="javascript:__doPostBack('GridView1','Cancel$0');return false;">
</td>
Hope it helps.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgSelect"
CommandName="Select" AlternateText="Select"
ImageUrl="~/Images/allowed.png" />
</ItemTemplate>
<ItemStyle Width="30%" />
</asp:TemplateField>
I am having an issue with the paging system on Telerik's RadGrid (AJAX). First take a look at this screenshot:
As you can see, the First/Last Prev/Next buttons are there, but there is no markings on them. Also, the dropdown (thats where those values are coming from) and whatever that 'select' is are really messed up. Here is my designer code:
<asp:LinqDataSource ID="ItemViewDataSource" runat="server" ContextTypeName="GSFyi.GSFyiDataClasses_DataContext"
TableName="FYI_Items" OrderBy="FYI_State.name, name" EnableDelete="True">
</asp:LinqDataSource>
<h2 class="gridTitle">
All Items</h2>
<telerik:RadGrid ID="ItemViewRadGrid" runat="server" AutoGenerateColumns="False"
DataSourceID="ItemViewDataSource" GridLines="None" AllowAutomaticDeletes="True"
EnableEmbeddedSkins="False" OnItemDataBound="itemsGrid_ItemDataBound"
AllowPaging="True" PageSize="15" AllowCustomPaging="True">
<HeaderContextMenu>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</HeaderContextMenu>
<PagerStyle FirstPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_first.png"
LastPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_last.png"
Mode="NextPrev"
NextPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_next.png"
PrevPageImageUrl="../../../../../Custom/Modules/GSFyi/Resources/Images/Icons/resultset_previous.png" />
<MasterTableView DataKeyNames="id" DataSourceID="ItemViewDataSource" CommandItemDisplay="None"
CssClass="listItems" Width="98%" PageSize="15" PagerStyle-Mode="NextPrevAndNumeric">
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn ItemStyle-CssClass="gridActions edit" UniqueName="Edit">
<ItemTemplate>
<asp:HyperLink ID="edit" runat="server" Text="Edit"></asp:HyperLink>
</ItemTemplate>
<ItemStyle CssClass="gridActions edit"></ItemStyle>
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn ConfirmText="Are you sure you want to delete this item?"
ConfirmDialogType="RadWindow" ButtonType="LinkButton" ItemStyle-CssClass="gridActions delete"
CommandName="Delete">
<ItemStyle CssClass="gridActions delete"></ItemStyle>
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="name" HeaderText="Item Name" SortExpression="name"
UniqueName="name">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="State" UniqueName="state" >
<ItemTemplate>
<asp:Literal ID="stateLit" runat="server" Text='<%# Eval("FYI_State.name") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Type" UniqueName="type">
<ItemTemplate>
<asp:Literal ID="typeLit" runat="server" Text='<%# Eval("FYI_Type.name") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="url" HeaderText="Value" SortExpression="url" UniqueName="url">
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" EditImageUrl="Edit.gif"
CancelImageUrl="Cancel.gif">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>
I assumed that AT LEAST the images would be present since I specified these images:
But no luck. Any input will be greatly appreciated!
Cheers,
anders
Most probably the (embedded) skin CSS files have failed to load. You can use Fiddler or Firebug to check your web site for failing requests. I have a blog post showing how to troubleshoot and resolve such problems. You can check it here
Indeed the odd appearance of the grid is due to the default skin not loading. This is because you have set EnableEmbeddedSkins="False". I assume you want the 'Default' skin because you have not specified one. Remove this declaration or set it to true. The odd combobox layout is due to the lack of the skin.
The images not loading is probably unrelated to the skin not loading. I'd check the path to the images.