Использование jQuery для изменения размера всех редактируемых полей в сетке - PullRequest
Новая
       18

Использование jQuery для изменения размера всех редактируемых полей в сетке

2 голосов
/ 16 сентября 2011

У меня есть RadGrid на одной из моих веб-форм, и я использую InPlace (встроенное) редактирование, с пустой строкой внизу для вставок.

Когда сетка загружается, столбцы автоматически изменяют размер после рендеринга (вы можете фактически увидеть столбцы, откорректированные при загрузке страницы) с использованием JavaScript (я предполагаю), но входные данные в столбцах не изменяются. чтобы соответствовать настроенной ширине столбца, которая оставляет много пустого пространства. Я пытался подключить метод JavaScript, который автоматически изменяет размеры столбцов, но это не представляется возможным.

Я хотел бы использовать jQuery, чтобы найти все входные данные после размера столбцов, и изменить их размер в соответствии с шириной столбцов. Для только входных данных, которые необходимо изменить, являются TextBoxes и DropDowns, и мне не нужно вычислять ширину - просто установите ширину элементов управления на 100%, чтобы они заполняли доступные пробел в столбцах.

EDIT

Следует также отметить, что в разметке для входов установлено значение ширины 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>

Ответы [ 2 ]

4 голосов
/ 16 сентября 2011

Нет необходимости в javascript, сделайте это с помощью CSS CSS 

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

В вашем случае размер ваших столбцов будет изменен в зависимости от содержимого, сделайте это 

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

затемвызовите этот скрипт, когда изменение размера столбца будет завершено 

$('#grid_client_id input[type="text"]').setClass('grid-input');
1 голос
/ 16 сентября 2011

Я согласен с 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>

Внутри функции ColumnResized JavaScript вы можете напрямую установить дочерние элементы управления.

...