About gridcontrol and column chooser - devexpress

I have a form that form has a gridcontrol then when I click column chooser I will add a any column that added column will remove on a gridcontrol when i close the form finally I do not want to lose that added column I hope I can explain what I want to do thank you for everything.

Please follow this example for customizing the columns :
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="CustomersDataSource"
KeyFieldName="CustomerID" Width="100%">
<Columns>
<dx:GridViewDataColumn FieldName="ContactName" VisibleIndex="0" ShowInCustomizationForm="true" />
<dx:GridViewDataColumn FieldName="CompanyName" VisibleIndex="1" ShowInCustomizationForm="true" />
<dx:GridViewDataColumn FieldName="City" VisibleIndex="2" ShowInCustomizationForm="true" />
<dx:GridViewDataColumn FieldName="Region" Visible="false" ShowInCustomizationForm="true" />
<dx:GridViewDataColumn FieldName="Country" VisibleIndex="3" ShowInCustomizationForm="true" />
</Columns>
<Templates>
<PagerBar>
<table width="100%">
<tr>
<td style="width: 50%">
<dx:ASPxGridViewTemplateReplacement ID="Pager" runat="server" ReplacementType="Pager" />
</td>
<td align="right">
<dx:ASPxButton ID="btnCustomizationWindow" runat="server" CssFilePath="~/App_Themes/Office2010Blue/{0}/styles.css"
AutoPostBack="False" Text="Show/Hide Columns" Width="150px" ClientInstanceName="btnCustomizationWindow"
CssPostfix="Office2010Blue" SpriteCssFilePath="~/App_Themes/Office2010Blue/{0}/sprite.css">
<ClientSideEvents Click="btnCustomizationWindow_Click" />
</dx:ASPxButton>
</td>
</tr>
</table>
</PagerBar>
</Templates>
<Settings ShowGroupPanel="True" />
<SettingsLoadingPanel Mode="ShowOnStatusBar" />
<SettingsBehavior EnableCustomizationWindow="true" />
<SettingsCookies CookiesID="CookiesV1" Enabled="True" StoreColumnsVisiblePosition="true"
StoreColumnsWidth="true" StoreFiltering="False" StoreGroupingAndSorting="False"
StorePaging="False" /><%--This will store the column position and visibility--%>
</dx:ASPxGridView>
Script:
<script type="text/javascript">
function btnCustomizationWindow_Click(s, e) {
if(grid.IsCustomizationWindowVisible())
grid.HideCustomizationWindow();
else
grid.ShowCustomizationWindow();
}
</script>
Note:
If you wish to hide some columns for customization set the property :
ShowInCustomizationForm="false"
Hope this helps.

Related

GridView is Shacking when i clicked my add Button

When i Click add button My Grid is shacking.
the Button Id is="AddNewUnit"
If i click Add or Edit button my grid is shrinking and suddenly comeback to normal size for 1st time only.
If the page is refresh again same problem is doing.
I dont know how to solve the problem.
If any body know the problem. Let me know.
<dx:ASPxCallbackPanel runat="server" ID="CallbackPanel" ClientInstanceName="CallbackPanel" >
<PanelCollection>
<dx:PanelContent ID="PanelContent3" runat="server">
<dx:ASPxButton ID="AddNewUnit" ClientInstanceName="AddNewUnit" runat="server" Text="Add New" OnInit="AddNewUnit_Init" Image-Url="~/App_Themes/Images/add.png"
AutoPostBack="false">
<ClientSideEvents Click="function(s, e) {Grdview.AddNewRow(); }" />
<Image Url="~/App_Themes/Images/add.png"></Image>
</dx:ASPxButton>
<dx:ASPxLabel ID="lblindex" ClientInstanceName="lblindex" runat="server" ClientVisible="false"></dx:ASPxLabel>
<dx:ASPxGridView ID="Grdview" ClientInstanceName="Grdview" runat="server" OnRowDeleting="Grdview_RowDeleting"
KeyFieldName="Id" AutoGenerateColumns="False" Width="100%" OnRowInserting="Grdview_RowInserting"
OnRowUpdating="Grdview_RowUpdating" OnCellEditorInitialize="Grdview_CellEditorInitialize">
<ClientSideEvents CustomButtonClick="custombuttonclicks" />
<Columns>
<dx:GridViewCommandColumn VisibleIndex="0" Caption="Edit" Width="6%" Name="EditButton" ShowEditButton="true">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Center" VerticalAlign="Middle"></CellStyle>
</dx:GridViewCommandColumn>
<dx:GridViewCommandColumn ShowNewButton="true" Name="Delete" ShowEditButton="false" VisibleIndex="1" ButtonType="Image"
Width="6%" Caption="Delete">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Center" VerticalAlign="Middle"></CellStyle>
<CustomButtons>
<dx:GridViewCommandColumnCustomButton ID="deluser">
<Image ToolTip="Delete" Url="App_Themes/Images/delete.png" Width="22px" Height="22px" />
</dx:GridViewCommandColumnCustomButton>
</CustomButtons>
<HeaderStyle Wrap="True" Font-Bold="True"></HeaderStyle>
</dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="1" Width="14%" Settings-AutoFilterCondition="Contains"
Caption="Name">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Left" VerticalAlign="Middle"></CellStyle>
<PropertiesTextEdit Width="250px">
<ValidationSettings ErrorDisplayMode="Text" ErrorTextPosition="Bottom">
<RequiredField IsRequired="True" ErrorText="Please enter the Name"></RequiredField>
</ValidationSettings>
</PropertiesTextEdit>
<Settings AutoFilterCondition="Contains"></Settings>
<EditFormSettings VisibleIndex="0" Caption="Name" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Age" Caption="Age" VisibleIndex="2" Width="10%" PropertiesTextEdit-MaxLength="50"
HeaderStyle-Font-Bold="true" CellStyle-HorizontalAlign="Left" PropertiesTextEdit-ValidationSettings-RequiredField-ErrorText="Please enter the No. Of Beds"
Settings-AutoFilterCondition="Contains">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Right" VerticalAlign="Middle"></CellStyle>
<PropertiesTextEdit Width="250px" ValidationSettings-ErrorDisplayMode="Text">
<Style HorizontalAlign="Right">
</Style>
<ValidationSettings ErrorTextPosition="Bottom">
<RequiredField IsRequired="true" />
<RegularExpression ValidationExpression="^\d*\.?\d*$" ErrorText="Age accepts only numbers" />
</ValidationSettings>
</PropertiesTextEdit>
<EditFormSettings VisibleIndex="2" Caption="Age" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataMemoColumn FieldName="Country" Width="35%" VisibleIndex="3" Caption="Country"
Settings-AutoFilterCondition="Contains">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Left" VerticalAlign="Middle"></CellStyle>
<PropertiesMemoEdit Height="50px" Width="250px">
<ValidationSettings ErrorDisplayMode="Text" ErrorTextPosition="Bottom">
<RequiredField IsRequired="True" ErrorText="Please enter the Country" />
</ValidationSettings>
</PropertiesMemoEdit>
<EditFormSettings VisibleIndex="3" Caption="Country" />
</dx:GridViewDataMemoColumn>
<dx:GridViewDataMemoColumn FieldName="State" Width="35%" VisibleIndex="4" Caption="State"
Settings-AutoFilterCondition="Contains">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True"></HeaderStyle>
<CellStyle HorizontalAlign="Left" VerticalAlign="Middle"></CellStyle>
<PropertiesMemoEdit Height="50px" Width="250px">
<ValidationSettings ErrorDisplayMode="Text" ErrorTextPosition="Bottom">
<RequiredField IsRequired="True" ErrorText="Please enter the State" />
</ValidationSettings>
</PropertiesMemoEdit>
<EditFormSettings VisibleIndex="4" Caption="State" />
</dx:GridViewDataMemoColumn>
</Columns>
<SettingsCommandButton ApplyFilterButton-ButtonType="Button" ApplyFilterButton-Styles-FocusRectStyle-VerticalAlign="Middle">
<EditButton ButtonType="Image" Image-Height="24px" Image-Width="24px" Image-Url="App_Themes/Images/blueedit.png" Image-ToolTip="Edit">
<Image ToolTip="Edit" Height="24px" Width="24px" Url="App_Themes/Images/blueedit.png"></Image>
</EditButton>
<CancelButton ButtonType="Button" Styles-Style-VerticalAlign="Middle" Styles-Style-HorizontalAlign="Center" Image-ToolTip="Close Edit Form Without Saving Changes" Image-Width="60px">
<Image ToolTip="Close Edit Form Without Saving Changes" Width="60px"></Image>
<Styles>
<Style HorizontalAlign="Center" VerticalAlign="Middle"></Style>
</Styles>
</CancelButton>
<ShowAdaptiveDetailButton ButtonType="Image"></ShowAdaptiveDetailButton>
<HideAdaptiveDetailButton ButtonType="Image"></HideAdaptiveDetailButton>
<ApplyFilterButton ButtonType="Button" RenderMode="Button">
<Styles>
<FocusRectStyle VerticalAlign="Middle"></FocusRectStyle>
</Styles>
</ApplyFilterButton>
<UpdateButton ButtonType="Button" Styles-Style-VerticalAlign="Middle" Styles-Style-HorizontalAlign="Center" Image-ToolTip="Saving Changes." Image-Width="60px">
<Image ToolTip="Saving Changes." Width="60px"></Image>
<Styles>
<Style HorizontalAlign="Center" VerticalAlign="Middle"></Style>
</Styles>
</UpdateButton>
</SettingsCommandButton>
<SettingsEditing EditFormColumnCount="2" Mode="PopupEditForm">
</SettingsEditing>
<SettingsPager Mode="ShowPager" AlwaysShowPager="true" PageSize="10" Position="Bottom">
<PageSizeItemSettings Visible="true" Caption="Units to display" Items="5, 10, 25, 50" />
</SettingsPager>
<Settings ShowFilterRow="true" ShowFilterRowMenu="true" VerticalScrollBarMode="Visible" VerticalScrollableHeight="432" />
<SettingsPopup>
<EditForm Width="760px" HorizontalAlign="WindowCenter" VerticalAlign="WindowCenter" Modal="true" />
</SettingsPopup>
<Settings ShowTitlePanel="false" />
<SettingsText Title="Add New" PopupEditFormCaption="Edit" />
</dx:ASPxGridView>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
<dx:ASPxPopupControl ID="PopupforCustDeletePopupSubmitConfirmation" runat="server" ShowPageScrollbarWhenModal="true" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" ClientInstanceName="PopupforCustDeletePopupSubmitConfirmation" AllowDragging="false" AllowResize="false" HeaderText="Alert"
EnableHotTrack="False" HeaderStyle-Font-Bold="true" CloseAction="CloseButton" Modal="True" HeaderStyle-HorizontalAlign="Left">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
<dx:ASPxPanel ID="ASPxPanel1" runat="server" DefaultButton="btOK">
<PanelCollection>
<dx:PanelContent ID="PanelContent2" runat="server">
<table style="width: 400px">
<tr>
<td align="center">
<dx:ASPxLabel ID="lblCustDeletePopupConfirmationMsg" ViewStateMode="Disabled" runat="server" Text="Are you sure you want to delete the Unit?">
</dx:ASPxLabel>
</td>
</tr>
</table>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
<br />
<br />
<table style="width: 100px; margin: auto;">
<tr>
<td align="center" style="width: 50px">
<dx:ASPxButton ID="btnCustDeletePopupYes" runat="server" Text="Yes" Width="55px" AutoPostBack="false" ToolTip="Yes">
<ClientSideEvents Click="CustDeletePopupYes_Click" />
</dx:ASPxButton>
</td>
<td align="center" style="width: 49px; padding-left: 5px;">
<dx:ASPxButton ID="btnCustDeletePopupNo" runat="server" Text="No" AutoPostBack="false" Width="55px" ToolTip="No">
<ClientSideEvents Click="CustDeletePopupNo_Click" />
</dx:ASPxButton>
</td>
</tr>
</table>
</dx:PopupControlContentControl>
</ContentCollection>
<HeaderStyle>
<Paddings PaddingRight="6px"></Paddings>
</HeaderStyle>
<SizeGripImage Height="16px" Width="16px">
</SizeGripImage>
</dx:ASPxPopupControl>
My Screenshot attached Here
<dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server"></dx:ASPxFormLayout>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server"></dx:ASPxPopupControl>
before aspxcallbackpanel paste it never shake.

Avoid close the ModalPopupExtender

I have a GridView which charge user data, selecting one lifts the panel through a ModalPopupExtender, this panel has UpdatePanel nested as you can see in the code, pressing the save button closes the Popup, can not find the error. help me with this problem.
Removing the UpdatePanel not let the FileUpload upload the file but no longer the Popup is closed, but I need to upload the file and that the Popup is not closed.
<asp:Panel ID="pDatos" runat="server" BackColor="#E0E0E0">
<table>
<tr>
<td>
<asp:GridView runat="server" ID="gvResultado" AutoGenerateColumns="false"
OnRowCommand="gvResultado_OnRowCommand" DataKeyNames="Id, Estado" >
<Columns>
<asp:ButtonField DataTextField="Id" ItemStyle-ForeColor="Black"
ControlStyle-CssClass="hover" CommandName="gvResultado"
HeaderText="Verificar"/>
<asp:BoundField DataField="Nombre" HeaderText="Nombre" ItemStyle-Width="320px" />
<asp:BoundField DataField="Observaciones" HeaderText="Observaciones" ItemStyle-Width="360px" />
<asp:BoundField DataField="Fecha" HeaderText="Fecha" />
<asp:BoundField DataField="Estado" HeaderText="Estado" ItemStyle-Width="120px" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</asp:Panel>
<asp:HiddenField ID="hfPopup" runat="server" />
<ajax:ModalPopupExtender ID="mpePopup" runat="server" PopupControlID="pPopup"
TargetControlID="hfPopup" BackgroundCssClass="backgroundColor">
</ajax:ModalPopupExtender>
<asp:Panel ID="pPopup" runat="server" BackColor="#CFCFCF" Style="display: none" >
<asp:UpdatePanel ID="upPopup" runat="server">
<ContentTemplate>
<table style="width:740px;" align="center">
<tr>
<td align="center" colspan="2">
<asp:GridView runat="server" ID="gvHistorial" AutoGenerateColumns="false"
OnRowCommand="gvHistorial_RowCommand" DataKeyNames="Descargar" >
<Columns>
<asp:BoundField DataField="Legajo" HeaderText="Legajo" ItemStyle-Width="100"/>
<asp:BoundField DataField="Observaciones" HeaderText="Observaciones" ItemStyle-Width="550" />
<asp:BoundField DataField="Fecha" HeaderText="Fecha" ItemStyle-Width="150"/>
<asp:ButtonField DataTextField="Descargar" HeaderText="Descargar" CommandName="gvHistorial_Descargar" />
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td><!-- --></td>
<td >
<asp:UpdatePanel ID="upArchivo" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="luSeleccione" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="bGuardar" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td><!-- --></td>
<td align="left">
<asp:Button runat="server" ID="btnGuardar" OnClick="btnGuardar_Click"
Text="Guardar" CssClass="Button hover" />
<asp:Button runat="server" ID="btnSalir" OnClick="btnSalir_Click"
Text="Salir" CssClass="Button hover" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

Exporting Excel is giving error on button click

I am implementing the functionality that on button click the data saved in the gridview should get exported on the button click, I implemented the functionality from here.
But I am getting error as Control 'mainContent_grdTeacherProfile' of type 'GridView' must be placed inside a form tag with runat=server at line
grdTeacherProfile.RenderControl(hw);
Please see the asps code of the gridview:-
<asp:GridView ID="grdTeacherProfile"
runat="server"
Width="100%"
border="1" Style="border: 1px solid #E5E5E5;"
CellPadding="3" FooterStyle-BackColor="#e3e3e3"
AutoGenerateColumns="false"
AllowPaging="true"
CssClass="hoverTable"
DataKeyNames="Id"
PageSize="4"
ShowFooter="false"
OnPreRender="PreRenderGrid"
HeaderStyle-CssClass="k-grid td"
OnDataBound="grdTeacherProfile_DataBound"
OnPageIndexChanging="grdTeacherProfile_PageIndexChanging"
OnRowDeleting="grdTeacherProfile_RowDeleting"
OnRowCommand="grdTeacherProfile_RowCommand"
EnableSortingAndPagingCallbacks="false"
EmptyDataText="No records found">
<AlternatingRowStyle CssClass="k-alt" />
<Columns>
<asp:TemplateField HeaderText="Select" ItemStyle-Width="5" >
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" onClick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="first_name" HeaderText="First Name" ItemStyle-Width="30" />
<asp:BoundField DataField="last_name" HeaderText="Last Name" ItemStyle-Width="30" />
<asp:BoundField DataField="dob" HeaderText="Date of Birth" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="gender" HeaderText="Gender" ItemStyle-Width="20" />
<asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-Width="20" />
<asp:BoundField DataField="joining_date" HeaderText="Joining Date" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="leaving_date" HeaderText="Leaving Date" ItemStyle-Width="20" ApplyFormatInEditMode="true" DataFormatString="{0:d}" />
<asp:BoundField DataField="active" HeaderText="Active" ItemStyle-Width="25" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" AlternateText="Edit" ImageUrl="~/images/edit.png" runat="server" Width="15" Height="15" CommandName="eEdit" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" />
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle ForeColor="#e3e3e3"
BackColor="#e3e3e3" CssClass="grid-pagi" />
<PagerTemplate>
<table runat="server" id="testTable1" style="width: 100%" class="hoverTable_tbl">
<tr>
<td class="col-md-4 pull-left">
<asp:Label ID="MessageLabel"
Text="Select a page:"
runat="server" />
<asp:LinkButton ID="FirstLB" runat="server" CommandName="Page" CommandArgument="First" ToolTip="First" CssClass="btn-pager btn-default"><<</asp:LinkButton>
<asp:LinkButton ID="PrevLB" runat="server" CommandName="Page" CommandArgument="Prev" ToolTip="Previous" CssClass="btn-pager btn-default"><</asp:LinkButton>
<asp:DropDownList runat="server" ID="PageDropDownList" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged" CssClass="selectpicker form-control-drp"></asp:DropDownList>
<asp:LinkButton ID="NextLB" runat="server" CommandName="Page" CommandArgument="Next" ToolTip="Next" CssClass="btn-pager btn-default">></asp:LinkButton>
<asp:LinkButton ID="LastLB" runat="server" CommandName="Page" CommandArgument="Last" ToolTip="Last" CssClass="btn-pager btn-default">>></asp:LinkButton>
</td>
<td class="col-md-3">
<div>
<div class="pull-left"><asp:Label ID="PageSizeLabel" CssClass="page-size" runat="server" Text="Select Page Size: "></asp:Label>
<asp:DropDownList ID="ddlPageSize" runat="server" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged" AutoPostBack="true" CssClass="selectpicker form-control-drp">
<%-- <asp:ListItem Value="0" Text="0" />--%>
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
</div>
<div>
<asp:Label ID="CurrentPageLabel" CssClass="view" runat="server" />
</div>
</div>
</td>
</tr>
</table>
</PagerTemplate>
<RowStyle />
</asp:GridView>
Exporting GridView to Excel is easier using a 3rd party like iTextSharp.
If you want to know how I make it work, you can check this sample code:
http://dotnetfrommanila.blogspot.com/2013/04/convert-gridview-to-excel-in-c.html
I hope it could help you.
I got it done on my own,
actually I forgot to add the code below and EnableEventValidation="false".
The code was:-
public override void VerifyRenderingInServerForm(Control control)
{
/* Verifies that the control is rendered */
}
and it worked.!!

obout gridview - using edit template

Hello guys i am working with obout gridview and i am trying to make an edit template for my grid, i looked up on their site but i still cant solve a problem with updating the needed rows .
When i pick a row to edit i got a template with different look that has 4 textboxes that should be connected to 4 of the cells on the choosen row of the grid. The problem those textboxes aint getting updated and even when i as a user fill them up and click update i can see on debugger that they are strings of "".
This is the grid altough maybe there is something else that needs to be done to solve this? i am kinda new to this, Thanks in advance!
<cc1:Grid ID="budgetGrid" runat="server"
EnableTypeValidation="false" CallbackMode="true" Serialize="true" AutoPostBackOnSelect="false"
AllowGrouping="True" FolderStyle="~/styles/premiere_blue"
OnUpdateCommand="UpdateRecord"
DataSourceID="budgetSql" GroupBy="year,departmentName" ShowColumnsFooter="True"
ShowGroupFooter="True" ShowMultiPageGroupsInfo="False"
AllowAddingRecords="False" PageSize="-1" AllowPageSizeSelection="False"
AllowPaging="False">
<GroupingSettings AllowChanges="False" />
<Columns>
<cc1:Column ID="Column1" runat="server" AllowEdit="true" HeaderText="Edit"
width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="column0" HeaderText="ID" readonly="true" Visible="false" runat="server" DataField="id" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column2" HeaderText="Department" readonly="true" Visible="false" runat="server" DataField="departmentName" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column3" HeaderText="Sub Dep" readonly="true" runat="server" DataField="subDepName" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column11" HeaderText="Q1Bud" readonly="false" runat="server" DataField="Q1B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ1" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column8" HeaderText="Q2Bud" readonly="false" runat="server" DataField="Q2B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ2" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column9" HeaderText="Q3Bud" readonly="false" runat="server" DataField="Q3B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ3" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column10" HeaderText="Q4Bud" readonly="false" runat="server" DataField="Q4B" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
<TemplateSettings RowEditTemplateControlId="budgetQ4" RowEditTemplateControlPropertyName="value" />
</cc1:Column>
<cc1:Column ID="Column4" HeaderText="Q1App" readonly="true" runat="server" DataField="Q1A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column5" HeaderText="Q2App" readonly="true" runat="server" DataField="Q2A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column6" HeaderText="Q3App" readonly="true" runat="server" DataField="Q3A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column7" HeaderText="Q4App" readonly="true" runat="server" DataField="Q4A" Width="100" FooterStyle-Font-Size="Smaller">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
<cc1:Column ID="Column13" HeaderText="Year" readonly="true" Visible="false" runat="server" DataField="year" FooterStyle-Font-Size="Smaller" Width="60">
<FooterStyle Font-Size="Smaller" />
</cc1:Column>
</Columns>
<TemplateSettings RowEditTemplateId="tplRowEdit" />
<Templates>
<cc1:GridTemplate runat="server" ID="tplRowEdit">
<Template>
<table class="rowEditTable">
<tr>
<td valign="top">
<fieldset style="width: 275px; height: 175px;">
<legend>Budget Amount</legend>
<table class="rowEditTable">
<tr>
<br />
<td>Quarter 1:</td>
<td> <cc1:OboutTextBox runat="server" ID="budgetQ1" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td>Quarter 2:</td>
<td>
<cc1:OboutTextBox runat="server" ID="budgetQ2" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td>Quarter 3:</td>
<td>
<cc1:OboutTextBox runat="server" ID="budgetQ3" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td>Quarter 4:</td>
<td>
<cc1:OboutTextBox runat="server" ID="budgetQ4" Width="150"></cc1:OboutTextBox>
</td>
</tr>
<tr>
<td colspan="2">
<br />
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Save" onclick="budgetGrid.save()" />
<input type="button" value="Cancel" onclick="budgetGrid.cancel()" />
</td>
</tr>
</table>
</Template>
</cc1:GridTemplate>
</Templates>
</cc1:Grid>
I found a solution some time ago , i created the gridview in the page load event from zero and by doing so i got full control on all the changes editing etc, which seem to cause many problems while trying to do so with existing gridview on the html view.

Convert table css to gridview?

I have a gridview that is bound to a database table, but the css I have to use was designed for html:table. I was wondering if there was an easy way to convert the gridview into a html table so that I can display it with the stylesheet I was given.
thanks
here's a sample of the html table my partner wrote for a mockup. I'd like to emulate how the style is applied.
<div class="content1">
<table class="yep">
<thead>
<tr>
<th>Case #</th>
<th>Unit #</th>
<th>Date</th>
<th>Type of Call</th>
<th>Gender</th>
<th>Age</th>
<th>View PCR</th>
<th><button class="btn">Create Incident</button></th>
</tr>
</thead>
<tbody>
<tr>
<td>123456788</td>
<td>102935734</td>
<td>07/28</td>
<td>Critical Care</td>
<td>Male</td>
<td>25</td>
<td><a class="btn em" href="table_view.html">View PCR</a></td>
<td class="check"><input type="checkbox"></td>
</tr>
here's my gridview:
<asp:GridView ID="GridView1" runat="server" CssClass="yep" AutoGenerateColumns="False" DataKeyNames="Case #" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="Case #" HeaderText="Case #" ReadOnly="True" SortExpression="Case #" />
<asp:BoundField DataField="Unit #" HeaderText="Unit #" SortExpression="Unit #" />
<asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
<asp:BoundField DataField="Type of Call" HeaderText="Type of Call" SortExpression="Type of Call" />
<asp:BoundField DataField="Gender" HeaderText="Gender" SortExpression="Gender" />
<asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
<asp:BoundField DataField="View PCR" HeaderText="View PCR" SortExpression="View PCR" />
<asp:TemplateField HeaderText="Selection">
<ItemTemplate>
<asp:CheckBox ID="Selections" runat="server" OnCheckedChanged="CheckBox1_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Try this:
<asp:TemplateField HeaderText="Selection">
<ItemTemplate>
<asp:Button ID="Selections" runat="server" OnClick="Selections_Click" CssClass="btn" />
</ItemTemplate>
</asp:TemplateField>
Note: The CssClass attribute will assign the btn class to the rendered output.

Resources