英文:
How to change 4 sides grid view to display corner radius?
问题
我在asp.net web forms上工作。我遇到问题，无法更改网格视图的标题以使其在四个边角上拥有圆角。
因此，我需要获取标题样式并将其作为CSS样式或引导样式应用到网格视图，以便在四个边角获得圆角
左上 - 右上 - 左下 - 右下
确切地说，我需要在每一边上获得相同的圆角
以下是网格视图组件：
<asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" CssClass="table" HeaderStyle-BackColor="#172b4d" AllowPaging="true" OnPageIndexChanging="grdData_PageIndexChanging" PageSize="10">
<Columns>
<asp:TemplateField HeaderText="Select All" ItemStyle-HorizontalAlign="Center">
<asp:BoundField DataField="BranchCode" HeaderText="BranchCode" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="Status" HeaderText="Status" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="OrderNo" HeaderText="OrderNo" ItemStyle-Width="120px" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="OrderType" HeaderText="OrderType" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="Printer_name" HeaderText="Printer_name" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="EntredDatetime" HeaderText="EntredDatetime" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-CssClass="hidden" HeaderStyle-CssClass="hidden" />
</Columns>
</asp:GridView>
期望的结果如下：
英文:
I work on asp.net web forms . I face issue i can't change header of grid view to take corner radius on 4 sides .
so I need to get header style and give it as CSS style or bootstrap to grid view to be get corner side radius on 4 sides
top left - top right -bottom left-bottom right
exactly I need to get same corner on every side
grid view component as below :
<asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" CssClass="table" HeaderStyle-BackColor="#172b4d" AllowPaging="true" OnPageIndexChanging="grdData_PageIndexChanging" PageSize="10">
<Columns>
<asp:TemplateField HeaderText="Select All" ItemStyle-HorizontalAlign="Center">
<asp:BoundField DataField="BranchCode" HeaderText="BranchCode" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="Status" HeaderText="Status" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="OrderNo" HeaderText="OrderNo" ItemStyle-Width="120px" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="OrderType" HeaderText="OrderType" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="Printer_name" HeaderText="Printer_name" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="EntredDatetime" HeaderText="EntredDatetime" HeaderStyle-ForeColor="White" />
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-CssClass="hidden" HeaderStyle-CssClass="hidden" />
</Columns>
</asp:GridView>
expected result as below :
答案1
得分: 0
我通过以下步骤解决了我的问题：
1- 我添加了如下的CSS类：
.corners {
border: 0px solid blue;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
-webkit-border-radius: 8px;
}
2- 添加包含网格视图的div
3- 通过以下CSS将类分配给包含网格视图的div：
<div class="corners">
<asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" CssClass="table" HeaderStyle-BackColor="#172b4d" HeaderStyle-CssClass="header" AllowPaging="true" OnPageIndexChanging="grdData_PageIndexChanging" PageSize="10" >
</asp:GridView>
</div>
现在它可以正常工作。
英文:
I solved my issue by this steps :
1- I add CSS class as below :
.corners {
border: 0px solid blue;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
-webkit-border-radius: 8px;
}
2- Add div contain grid view
3- Assign class to div contain grid view by CSS as below :
<div class="corners">
<asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" CssClass="table" HeaderStyle-BackColor="#172b4d" HeaderStyle-CssClass="header" AllowPaging="true" OnPageIndexChanging="grdData_PageIndexChanging" PageSize="10" >
</asp:GridView>
</div>
And it is working.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论