2

Webフォームの1つにRadGridがあり、InPlace（インライン）編集を使用しており、挿入用に下部に空の行があります。

グリッドが読み込まれると、JavaScript（私が想定している）を使用して、レンダリング後に列のサイズが自動的に変更されます（実際には、ページの読み込み時に調整された列を確認できます）が、列の入力は、列幅を調整しました。これにより、多くの空白が残ります。列のサイズを自動変更するJavaScriptメソッドにフックしようとしましたが、可能ではないようです。

jQueryを使用して、列のサイズが変更された後にすべての入力を検索し、列の幅に合わせてサイズを変更したいと思います。サイズを変更する必要がある入力はとだけです。幅を計算する必要はありません。コントロールの幅を100％に設定するだけで、列の使用可能なスペースがいっぱいになります。TextBoxesDropDowns

編集

また、入力はマークアップで100％の幅に設定されていますが、列のサイズが変更されてもスケーリングされないことに注意してください。この動作は正しくないようです。

RadGridには、ClientSettings多くのクライアント側イベントをサブスクライブできるセクションがありますが、グリッドの自動サイズ変更時にサイズ変更イベントは発生しません。ユーザーが手動で列のサイズを変更した場合のみ。

jQueryに精通している人の中には、これを行う方法についていくつかのアイデアを提案できますか？

RadGridのサンプルマークアップは次のとおりです。

<telerik:RadGrid ID="grdVendorAddresses" runat="server">                                
    <MasterTableView AutoGenerateColumns="false" InsertItemDisplay="Bottom" EditMode="InPlace" DataKeyNames="AddressID, AddressTypeID, IsActive">      
        <ItemStyle Font-Size="12px" Font-Names="Verdana" Wrap="false" />
        <HeaderStyle Font-Size="12px" Font-Names="Verdana" Wrap="false" />
        <AlternatingItemStyle Font-Size="12px" Font-Names="Verdana" Wrap="false" />         
        <Columns>
            <telerik:GridEditCommandColumn UniqueName="EditButton" ButtonType="ImageButton" EditImageUrl="/images/edit_icon_pencil.png" InsertImageUrl="/images/save_icon_small.png" UpdateImageUrl="/images/save_icon_small.png" CancelImageUrl="/images/cancel_icon.png">
                <ItemStyle HorizontalAlign="Center" Width="60" />
            </telerik:GridEditCommandColumn>              
            <telerik:GridTemplateColumn HeaderText="Address" DataField="StreetAddress" Resizable="false">                        
                <ItemStyle HorizontalAlign="Left" />        
                <HeaderStyle HorizontalAlign="Left" />                
                <ItemTemplate>                       
                    <%#Eval("StreetAddress")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <div style="padding:5px 0px 5px 0px;">
                        <telerik:RadTextBox ID="txtStreetAddress" runat="server" Skin="Sunset" Text='<%#Bind("StreetAddress")%>' Font-Size="12px" Font-Names="Verdana" Width="100%"></telerik:RadTextBox>
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>       
            <telerik:GridTemplateColumn HeaderText="City" DataField="City">                        
                <ItemStyle HorizontalAlign="Left" />        
                <HeaderStyle HorizontalAlign="Left" />                
                <ItemTemplate>                       
                    <%#Eval("City")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <div style="padding:5px 0px 5px 0px;">
                        <telerik:RadTextBox ID="txtCity" runat="server" Skin="Sunset" Text='<%#Bind("City")%>' Font-Size="12px" Font-Names="Verdana" Width="100%"></telerik:RadTextBox>
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>                             
            <telerik:GridTemplateColumn HeaderText="Country" DataField="CountryID">                        
                <ItemStyle HorizontalAlign="Center" />        
                <HeaderStyle HorizontalAlign="Center" />                
                <ItemTemplate>                       
                    <%#Eval("CountryName")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <div style="padding:5px 5px 5px 5px;">
                        <telerik:RadComboBox ID="ddlCountry" runat="server" Skin="Sunset" Font-Size="12px" Font-Names="Verdana" DataSourceID="ddsCountries" Height="200" DataTextField="CountryName" DataValueField="CountryID" Width="100%" SelectedValue='<%#Bind("CountryID")%>'></telerik:RadComboBox>                        
                    </div>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>    
    </MasterTableView>
</telerik:RadGrid>
4

2 に答える 2

4

javascriptは必要ありません。CSSCSSで実行して ください

#ClientID_OF_GRID input[type="text"] {
 width: 100% !important;
}

あなたの場合、あなたの列はコンテンツによってサイズ変更されますこれを行います

 .grid-input {
     width: 100% !important;
    }

次に、列のサイズ変更が終了したらこのスクリプトを呼び出します

$('#grid_client_id input[type="text"]').setClass('grid-input');
于 2011-09-16T19:11:54.340 に答える
1

私はSenadに同意します、CSSが進むべき道です。

しかし、本当にJavaScriptを実行したい場合は、ドキュメントのRadGrid関数を次に示します。

function ColumnResized(sender, eventArgs) {
    alert("Column with Index: " + 
     eventArgs.get_gridColumn().get_element().cellIndex + 
     " was resized, width: " + 
     eventArgs.get_gridColumn().get_element().offsetWidth);
}

そして、クライアント設定を設定します。

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>
        <Resizing AllowColumnResize="true" />
        <ClientEvents OnColumnResized="ColumnResized" />
    </ClientSettings>
</telerik:RadGrid>

JavaScript関数内で、ColumnResized子コントロールを直接設定できます。

于 2011-09-16T19:18:47.097 に答える