I am working on an asp.net page. In which I am using a grid view. I want to be able to change the width of the bound fields. I am using
ControlStyle-Width="100px" and itemstyle-width but I unable to change width of bound field. Can anyone tell me how this could be done?
<asp:BoundField DataField="ptDob" HeaderText="PatientDob" HeaderStyle-HorizontalAlign="Left" SortExpression="ptDob" ControlStyle-Width="2500px" />
<asp:BoundField DataField="memid" HeaderText="MemberId" HeaderStyle-HorizontalAlign="Left" ControlStyle-Width="100px"
SortExpression="memid" />
<asp:BoundField DataField="memssn" HeaderText="MembeSsn" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px"
SortExpression="memssn" />
<asp:BoundField DataField="billType" HeaderText="BillType" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px"
SortExpression="billType" />
<asp:BoundField DataField="insuranceName" HeaderText="insuranceName" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px"
SortExpression="insuranceName" />
<asp:BoundField DataField="taxId" HeaderText="TaxId" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px"
SortExpression="taxId" />
<asp:BoundField DataField="attendingProvider" HeaderText="AttendingProvider" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px"
SortExpression="attendingProvider" />
<asp:BoundField DataField="parStatus" HeaderText="parStatus" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="100px"
SortExpression="parStatus" />
<asp:BoundField DataField="admittedDate" HeaderText="AdmittedDate" HeaderStyle-HorizontalAlign="Left"
SortExpression="admittedDate" />
<asp:BoundField DataField="billedAmount" HeaderText="BilledAmount" HeaderStyle-HorizontalAlign="Left"
ItemStyle-Width="100px" or HeaderStyle-Width="100px" should perfectly work, maybe you have some other style interfering, CSS maybe.
You can add it as a CSS field in your itemstyle. Then make sure the class has a width set. Assuming you've not got any inline styles that take precedence then this will work.
<asp:BoundField DataField="parStatus" HeaderText="parStatus">
<ItemStyle CssClass="yourclass"></ItemStyle>
</asp:BoundField>
Try Using HeaderText-cssClass, in class add
padding-left: 100px;
padding-right: 100px;
Related
<asp:DetailsView ID="dtl_people" runat="server" AutoGenerateRows="False" DataKeyNames="personID" DataSourceID="dsrc_peopleObject" DefaultMode="Insert" CssClass="table-bordered table-striped" ControlStyle-Width="50%" ControlStyle-Height="200px" OnPageIndexChanging="dtl_people_PageIndexChanging" RowStyle-Wrap="False">
<FieldHeaderStyle Width="15%" />
<Fields>
<asp:BoundField DataField="personID" HeaderText="personID" InsertVisible="False" ReadOnly="True" SortExpression="personID" />
<asp:BoundField DataField="lastName" HeaderText="lastName" SortExpression="lastName" ControlStyle-Width="100%">
</asp:BoundField>
<asp:BoundField DataField="firstName" HeaderText="firstName" SortExpression="firstName" />
<asp:BoundField DataField="address" HeaderText="address" SortExpression="address" />
<asp:BoundField DataField="phone" HeaderText="phone" SortExpression="phone" ItemStyle-Width="350px">
<ItemStyle Width="350px"></ItemStyle>
</asp:BoundField>
<asp:CommandField ShowInsertButton="True" ButtonType="Button" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="False" />
</Fields>
<InsertRowStyle Wrap="true"/>
</asp:DetailsView>
I want to remove gap between buttons and also gap to the left of field where you enter details,thank you
The dafult behavior of the ASP.NET DetailsView control is to display data in a tabular fashion with no padding applied.This means that you have a CSS style rule somewhere which causes this undesired behavior.
Luckily this is pretty easy to find:
Run your web application in Google Chrome.
Press Ctrl+Shift+I to open up the developer console.
Click on the Elements tab.
Right click on the element in the page where the spacing issue is happening and click Inspect
Look carefully through the Styles section in the developer console for the style rule that causes the undesired effects and make the necessary changes in the style sheet file to remove it.
Example:
I have a button in my rows in a gridview and when clicking the button some code behind handles the button click. I want to pass a commandname paramater through with each button click, which is really just an order id. I'm wondering how I can set the commmand name for each button.
<Columns>
<asp:BoundField DataField="status" HeaderText="Status" HeaderStyle-HorizontalAlign="Left" SortExpression="status" />
<asp:BoundField DataField="orderid" HeaderText="Order ID" HeaderStyle-HorizontalAlign="Left" SortExpression="orderid" />
<asp:BoundField DataField="customer" HeaderText="Customer" HeaderStyle-HorizontalAlign="Left" SortExpression="customer" />
<asp:BoundField DataField="email" HeaderText="Email" HeaderStyle-HorizontalAlign="Left" SortExpression="email" />
<asp:BoundField DataField="createddate" HeaderText="Created Date" HeaderStyle-HorizontalAlign="Left" SortExpression="createddate" />
<asp:BoundField DataField="promocode" HeaderText="Promo Code" HeaderStyle-HorizontalAlign="Left" SortExpression="promocode" />
<asp:BoundField DataField="grandtotal" HeaderText="Grand Total" HeaderStyle-HorizontalAlign="Left" SortExpression="grandtotal" DataFormatString="{0:C}"/>
<asp:ButtonField Text="View" CommandName="6182" ButtonType="Button" />
</Columns>
As you can see abve the last column is the button that appears on each row and I've currently set it to 6182 - just as an example. What I really want to set it to is the orderid value...
How can I do that?
Thanks,
I'd probably go for something similar to this:
<asp:ButtonField Text="View" CommandName='<%# Eval("orderid") %>' ButtonType="Button" />
That should insert the orderid for the bound row into that field. If it doesn't work, convert the column into a TemplateField, add a button and do the same. Report back :-)
I want to hide a column in a gridview. I use the following code;
dgvTekleme.Columns[1].Visible = false;
but this does not work. (may be it does not work because of using that column in the code)
Is there any solution to hide a column in code-behind
you can do this manually.....
goto asp:gridview tag and in gridview tag set autogeneratecolumn="false"
if you don't want to display some column just don't write that column....
for example if you don't want to display prodId column just erase that line....
and write manually for displaying data like!!!!!!!!!!
<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="ProdID" DataField="prodid" ReadOnly="true" />
<asp:BoundField HeaderText="ProdName" DataField="ProdName" />
<asp:BoundField HeaderText="Quantity" DataField="quantity" />
<asp:BoundField HeaderText="SupplierID" DataField="SupplierId" />
<asp:BoundField HeaderText="StockLvl" DataField="stocklevel" />
<asp:BoundField HeaderText="MinStockLvl" DataField="minstocklevel" />
<asp:BoundField HeaderText="CostPrice" DataField="costprice" />
<asp:BoundField HeaderText="SalesPrice" DataField="saleprice" />
<asp:BoundField HeaderText="Loc" DataField="location" />
<asp:BoundField HeaderText="ProdCode" DataField="prodtypecode" />
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
</Columns>
</asp:GridView>
or you can check this link:
How to hide columns in an ASP.NET GridView with auto-generated columns?
I have a standard grid view, which contains a number of bounded fields and template fields, out of these I would like to make 4 columns invisible.
I know the css for this is visibility:hidden; but I do not know how to apply it to just these 4 columns, I have tried using the ControlStyle-CssClass property but it seems to apply the css to the whole table.
Is there a way to apply this css only to these 4 columns, also the plan is after I manage this is to write some Javascript for a button to switch the visibility on and off, so if you could please use some CSS/tags etc which can be easily changed client side it would be a huge plus.
A example:
<asp:GridView ID="gwFoo" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
Width="631px" OnRowDataBound="gwFoo_RowDataBound"
CssClass="customerDataTable" AllowSorting="True">
<Columns>
<asp:BoundField DataField="type" HeaderText="Type" SortExpression="type" />
<asp:TemplateField HeaderText="Number" SortExpression="id">
<ItemTemplate>
<asp:HyperLink ID="hlNumber" runat="server">[hlNumber]</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="product" HeaderText="Product" SortExpression="product" />
<asp:BoundField DataField="startDate" HeaderText="Start Date" SortExpression="startDate" />
<asp:BoundField DataField="endDate" HeaderText="End Date" SortExpression="endDate" />
<asp:BoundField DataField="isActive" HeaderText="Is Active ?" SortExpression="isActive" />
<asp:BoundField DataField="markedForActivation" HeaderText="Marked for Activation ?" SortExpression="markedForActivation" />
<asp:BoundField DataField="status" HeaderText="Status" SortExpression="status" />
<asp:TemplateField HeaderText="Parent Order" SortExpression="Foo">
<ItemTemplate>
<asp:HyperLink ID="hlFoo" runat="server">[hlFoo]</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Parent Document" SortExpression="Foo">
<ItemTemplate>
<asp:HyperLink ID="hlFoo" runat="server">[hlFoo]</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="createdDate" HeaderText="Created Date" <itemstyle Visible="false"></itemstyle> SortExpression="createdDate" />
<asp:BoundField DataField="createdBy" HeaderText="Created By" SortExpression="createdBy" />
<asp:BoundField DataField="lastUpdated" HeaderText="Last Updated" SortExpression="lastUpdated" />
<asp:BoundField DataField="lastUpdatedBy" HeaderText="Last Updated By" SortExpression="lastUpdatedBy" />
</Columns>
</asp:GridView>
give the columns a class and set the class css to visiblity:hidden;
Using Visible="false" will works
ie
<asp:BoundField Visible="false" DataField="status" HeaderText="Status" SortExpression="status" />
I solved the problem, in a way in which I can also switch the invissibility on and off from a button.
First I refactored the bounded fields I wanted to hide in this manner:
<asp:BoundField DataField="createdBy" HeaderText="Created By" SortExpression="createdBy" >
<ItemStyle CssClass="fooClass"></ItemStyle>
</asp:BoundField>
The class fooClass is a empty css class, I used it only so that all the <td> </td> elements which are generated by the bounded field share a common class, thus allowing the jquery script I wrote bellow to hide or show them.
<script> $(".fooClass").hide(); </script>
// or
<script> $(".fooClass").show(); </script>
<asp:BoundField DataField="ComputerModel" HeaderText="ComputerModel"
SortExpression="ComputerModel"
ItemStyle-Width="50px"/>
<asp:CheckBoxField DataField="Lease" HeaderText="Lease"
SortExpression="Lease" />
<asp:BoundField DataField="SerialNumber" HeaderText="SerialNumber"
SortExpression="SerialNumber" />
<asp:BoundField DataField="LeasedTagNum" HeaderText="LeasedTagNum"
SortExpression="LeasedTagNum" />
<asp:BoundField DataField="MonitorType" HeaderText="MonitorType"
SortExpression="MonitorType" />
<asp:BoundField DataField="MonitorCount" HeaderText="MonitorCount"
SortExpression="MonitorCount" />
<asp:CommandField ShowEditButton="True" ShowInsertButton="True" />
</Fields>
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
Try something like this:
<asp:BoundField DataField="ComputerModel" ItemStyle-Width="50px"/>
where 50px is the width you need.
Try this:
<asp:BoundField DataField="ComputerModel" HeaderText="ComputerModel"
SortExpression="ComputerModel"
HeaderStyle-Width="50px" >
</asp:BoundField>
Can we see all the HTML for the control? I'm curious to see the markup for the entire control so I don't make any assumptions.
Per MSDN try
<asp:boundfield
sortexpression="LastName"
datafield="LastName"
headertext="LastName">
<itemstyle width="50px">
</itemstyle>
</asp:boundfield>
I would like to see what you have thus far and maybe I can be more helpful. Also is there any CSS class that may be setting the item width?