Click here to Skip to main content
14,981,116 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
<tr>
                                            <td colspan="2" class="pdTop10 pdr20 pdl20">
                                                <asp:GridView ID="GridPartDet" runat="server" AutoGenerateColumns="False" CellPadding="3"
                                                    CssClass="ph clr width100per" OnRowCommand="GridPartDet_RowCommand" TabIndex="24">
                                                    <Columns>
                                                        <asp:TemplateField HeaderText="S No">
                                                            <ItemTemplate>
                                                                <%# ((GridViewRow)Container).RowIndex + 1%>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="8%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="Action">
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkBtnEdit" runat="server" CausesValidation="false" CommandName="EditRow"
                                                                    CssClass="gridCommand" TabIndex="25" Text="Edit"></asp:LinkButton>
                                                                <asp:LinkButton ID="LinkBtnDelete" runat="server" CausesValidation="false" CommandName="DeleteRow"
                                                                    CssClass="gridCommand" TabIndex="26" Text="Delete"></asp:LinkButton>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="10%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="Personal" Visible="false">
                                                            <ItemTemplate>
                                                                <asp:Label ID="LbPersonal" runat="server" Text='<%# Eval("Personal") %>'></asp:Label>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="20%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="PersonalDetail">
                                                            <ItemTemplate>
                                                                <asp:Label ID="LblPartID" runat="server" Text='<%# Eval("PersonalDetail") %>'></asp:Label>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="10%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="PartRemark">
                                                            <ItemTemplate>
                                                                <asp:Label ID="LblPartDetails" runat="server" Text='<%# Eval("PartRemark") %>'></asp:Label>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="40%" />
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <FooterStyle BackColor="#CCCCCC" />
                                                    <%-- <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />--%>
                                                    <HeaderStyle BackColor="LightGray" Font-Bold="True" CssClass="ForeColor" />
                                                </asp:GridView>
                                            </td>
                                        </tr>
                                    </table>
                            </asp:Panel>


What I have tried:

i have tried many times in different ways but its not working
Posted
Updated 5-Jul-17 23:04pm

1 solution

Add a class to the header and the item template of the column you want to resize, then simply adjust the width of items with that class. Below I've added the cladd "pdCol" to the personalDetail column and added a button that resizes those columns when clicked

<asp:GridView ID="GridPartDet" runat="server" AutoGenerateColumns="False" CellPadding="3"
    CssClass="ph clr width100per" OnRowCommand="GridPartDet_RowCommand" TabIndex="24">
    <Columns>
        <asp:TemplateField HeaderText="S No">
            <ItemTemplate>
                <%# ((GridViewRow)Container).RowIndex + 1%>
            </ItemTemplate>
            <ItemStyle Width="8%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Action">
            <ItemTemplate>
                <asp:LinkButton ID="LinkBtnEdit" runat="server" CausesValidation="false" CommandName="EditRow"
                    CssClass="gridCommand" TabIndex="25" Text="Edit"></asp:LinkButton>
                <asp:LinkButton ID="LinkBtnDelete" runat="server" CausesValidation="false" CommandName="DeleteRow"
                    CssClass="gridCommand" TabIndex="26" Text="Delete"></asp:LinkButton>
            </ItemTemplate>
            <ItemStyle Width="10%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Personal" Visible="false">
            <ItemTemplate>
                <asp:Label ID="LbPersonal" runat="server" Text='<%# Eval("Personal") %>'></asp:Label>
            </ItemTemplate>
            <ItemStyle Width="20%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="PersonalDetail">
            <ItemTemplate>
                <asp:Label ID="LblPartID" runat="server" Text='<%# Eval("PersonalDetail") %>'></asp:Label>
            </ItemTemplate>
            <ItemStyle Width="10%" CssClass="pdCol" />
            <HeaderStyle CssClass="pdCol" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="PartRemark">
            <ItemTemplate>
                <asp:Label ID="LblPartDetails" runat="server" Text='<%# Eval("PartRemark") %>'></asp:Label>
            </ItemTemplate>
            <ItemStyle Width="40%" />
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="LightGray" Font-Bold="True" CssClass="ForeColor" />
</asp:GridView>

<button id="btnResize">Resize</button>

<script>
    $(document).ready(function () {
        $("#btnResize").click(function (e) {
            e.preventDefault();
            $(".pdCol").css("width", "500px");
        });
    });
</script>
   
v2
Comments
Member 13260274 6-Jul-17 6:29am
   
i want to resize the gridview columns when i drag the columns on client side

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900