Member 13260274 Ответов: 1

Как изменить размер ASP.NET столбцы gridview на стороне клиента с использованием javascript

<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>


Что я уже пробовал:

я много раз пробовал по-разному, но это не работает

1 Ответов

Рейтинг:
1

F-ES Sitecore

Добавьте класс в заголовок и шаблон элемента столбца, размер которого вы хотите изменить, а затем просто отрегулируйте ширину элементов с помощью этого класса. Ниже я добавил cladd "pdCol" в столбец personalDetail и добавил кнопку, которая изменяет размер этих столбцов при нажатии

<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>

Member 13260274

я хочу изменить размер столбцов gridview при перетаскивании столбцов на стороне клиента