[Solved] Master/details

[ondfisk]

I have a RadGrid with an inline edit form.
I have a lot of columns with display=false.
Is there an easy way to be able to expand a row to display those columns - like displaying the edit form in readonly mode?

Also the grid always renders at 100% width.
Is there a way to have the grid render at auto width?
(I currently solve this problem by nesting the grid in an empty table like this: <table><tr><td><telerik:RadGrid /></td></tr></table>, but that seems to be an 'evil hack'.)

Here's the grid:

                <telerik:RadGrid ID="UsersGrid" runat="server"
                    AllowAutomaticDeletes="True"
                    AllowAutomaticInserts="True"
                    AllowAutomaticUpdates="True"
                    AllowFilteringByColumn="true"
                    AllowPaging="True"
                    AllowSorting="True"
                    AutoGenerateColumns="False"
                    DataSourceID="UsersDataSource"
                    OnItemCommand="UsersGrid_ItemCommand"
                    PageSize="20">
                    <ValidationSettings
                        EnableValidation="true"
                        ValidationGroup="Grid" />
                    <MasterTableView
                        AllowAutomaticDeletes="true"
                        AllowAutomaticInserts="true"
                        AllowAutomaticUpdates="true"
                        CommandItemDisplay="Top"
                        DataKeyNames="UserID"
                        NoMasterRecordsText="<%$ Resources:Strings, NoData %>">
                        <CommandItemSettings
                            AddNewRecordText="<%$ Resources:Strings, Add %>"
                            RefreshText="" />
                        <EditFormSettings ColumnNumber="2">
                            <EditColumn
                                ButtonType="ImageButton"
                                CancelText="<%$ Resources:Strings, Cancel %>"
                                InsertText="<%$ Resources:Strings, Insert %>"
                                UpdateText="<%$ Resources:Strings, Update %>" />
                        </EditFormSettings>
                        <Columns>
                            <telerik:GridTemplateColumn DataField="Username" Display="false" HeaderText="<%$ Resources:Strings, Username %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:HiddenField ID="UserID" runat="server" Value='<%# Eval("UserID") %>' />
                                    <telerik:RadTextBox ID="Username" runat="server" Text='<%# Bind("Username") %>' ValidationGroup="Grid" />
                                    <asp:RequiredFieldValidator ID="UsernameRequired" runat="server"
                                        ControlToValidate="Username"
                                        ErrorMessage="<%$ Resources:Strings, RequiredField %>"
                                        SetFocusOnError="true"
                                        ValidationGroup="Grid" />
                                    <ajax:ValidatorCalloutExtender ID="UsernameRequiredExtender" runat="server" TargetControlID="UsernameRequired" />
                                    <asp:CustomValidator ID="UsernameValidator" runat="server"
                                        ControlToValidate="Username"
                                        ErrorMessage="<%$ Resources:Strings, UsernameTaken %>"
                                        OnServerValidate="UsernameValidator_ServerValidate"
                                        SetFocusOnError="true"
                                        ValidationGroup="Grid" />
                                    <ajax:ValidatorCalloutExtender ID="UsernameValidatorExtender" runat="server" TargetControlID="UsernameValidator" />
                               </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn Display="false" HeaderText="<%$ Resources:Strings, Password %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadTextBox ID="Password" runat="server" Text='<%# Bind("Password") %>' TextMode="Password" ValidationGroup="Grid" />
                                    <asp:RegularExpressionValidator ID="PasswordValidator" runat="server"
                                        ControlToValidate="Password"
                                        ErrorMessage="<%$ Resources:Strings, InvalidPassword %>"
                                        SetFocusOnError="true"
                                        ValidationExpression=".{7,}"
                                        ValidationGroup="Grid" />
                                    <ajax:ValidatorCalloutExtender ID="PasswordValidatorExtender" runat="server" TargetControlID="PasswordValidator" />
                               </EditItemTemplate>
                            </telerik:GridTemplateColumn>                                    
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="true" DataField="GivenName" HeaderText="<%$ Resources:Strings, GivenName %>" SortExpression="GivenName">
                                <ItemTemplate>
                                    <asp:Label ID="GivenName" runat="server" Text='<%# Eval("GivenName") %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                     <telerik:RadTextBox ID="GivenName" runat="server" Text='<%# Bind("GivenName") %>' ValidationGroup="Grid" />
                                    <asp:RequiredFieldValidator ID="GivenNameRequired" runat="server"
                                        ControlToValidate="GivenName"
                                        ErrorMessage="<%$ Resources:Strings, RequiredField %>"
                                        SetFocusOnError="true"
                                        ValidationGroup="Grid" />
                                    <ajax:ValidatorCalloutExtender ID="GivenNameRequiredExtender" runat="server" TargetControlID="GivenNameRequired" />
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="true" DataField="FamilyName" HeaderText="<%$ Resources:Strings, FamilyName %>" SortExpression="FamilyName">
                                <ItemTemplate>
                                    <asp:Label ID="FamilyName" runat="server" Text='<%# Eval("FamilyName") %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadTextBox ID="FamilyName" runat="server" Text='<%# Bind("FamilyName") %>' ValidationGroup="Grid" />
                                    <asp:RequiredFieldValidator ID="FamilyNameRequired" runat="server"
                                        ControlToValidate="FamilyName"
                                        ErrorMessage="<%$ Resources:Strings, RequiredField %>"
                                        SetFocusOnError="true"
                                        ValidationGroup="Grid" />
                                    <ajax:ValidatorCalloutExtender ID="FamilyNameRequiredExtender" runat="server" TargetControlID="FamilyNameRequired" />
                               </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="<%$ Resources:Strings, Telephone %>" SortExpression="Telephone">
                                <ItemTemplate>
                                    <asp:Label ID="Telephone" runat="server" Text='<%# Eval("Telephone") %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <div style="white-space:nowrap;">
                                        <telerik:RadTextBox ID="Telephone" runat="server" Text='<%# Bind("Telephone") %>' MaxLength="50" ValidationGroup="Grid" />
                                        <asp:CheckBox ID="HideTelephone" runat="server" Checked='<%# Bind("HideTelephone") %>' Text="<%$ Resources:Strings, Hide %>" />
                                    </div>
                               </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="<%$ Resources:Strings, Email %>" SortExpression="Email">
                                <ItemTemplate>
                                    <asp:Label ID="Email" runat="server" Text='<%# Eval("Email") %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <div style="white-space:nowrap;">
                                        <telerik:RadTextBox ID="Email" runat="server" Text='<%# Bind("Email") %>' MaxLength="50" ValidationGroup="Grid" />
                                        <asp:RegularExpressionValidator ID="EmailValidator" runat="server"
                                            ControlToValidate="Email"
                                            ErrorMessage="<%$ Resources:Strings, InvalidEmail %>"
                                            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                                            ValidationGroup="Grid" />
                                        <ajax:ValidatorCalloutExtender ID="EmailValidatorExtender" runat="server"
                                            TargetControlID="EmailValidator" />
                                        <asp:CheckBox ID="HideEmail" runat="server" Checked='<%# Bind("HideEmail") %>' Text="<%$ Resources:Strings, Hide %>" />
                                    </div>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridDateTimeColumn DataField="DateOfBirth" Display="false" HeaderText="<%$ Resources:Strings, DateOfBirth %>" PickerType="DatePicker" />
                            <telerik:GridTemplateColumn Display="false" HeaderText="<%$ Resources:Strings, Height %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadNumericTextBox ID="Height" runat="server"
                                        DataType="Number"
                                        DbValue='<%# Bind("Height") %>'
                                        MinValue="50"
                                        MaxValue="250"
                                        NumberFormat-DecimalDigits="0"
                                        NumberFormat-GroupSizes="4" />                        
                                </EditItemTemplate>                        
                            </telerik:GridTemplateColumn>   
                            <telerik:GridTemplateColumn Display="false" HeaderText="<%$ Resources:Strings, EyeColor %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadComboBox ID="EyeColorID" runat="server"
                                        AppendDataBoundItems="true"
                                        DataSourceID="EyeColorDataSource"
                                        DataTextField="EyeColorName"
                                        DataValueField="EyeColorID"
                                        SelectedValue='<%# Bind("EyeColorID") %>'>
                                        <Items>
                                            <telerik:RadComboBoxItem />
                                        </Items>
                                    </telerik:RadComboBox>
                                </EditItemTemplate>                        
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn Display="false" HeaderText="<%$ Resources:Strings, HairColor %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadComboBox ID="HairColorID" runat="server"
                                        AppendDataBoundItems="true"
                                        DataSourceID="HairColorDataSource"
                                        DataTextField="HairColorName"
                                        DataValueField="HairColorID"
                                        SelectedValue='<%# Bind("HairColorID") %>'>
                                        <Items>
                                            <telerik:RadComboBoxItem />
                                        </Items>
                                    </telerik:RadComboBox>
                                </EditItemTemplate>                        
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="true" DataField="GraduationYear" HeaderText="<%$ Resources:Strings, GraduationYear %>" ItemStyle-HorizontalAlign="Center" SortExpression="GraduationYear" UniqueName="GraduationYear">
                                <ItemTemplate>
                                    <asp:Label ID="GraduationYear" runat="server" Text='<%# Eval("GraduationYear") %>' Visible='<%# (int)Eval("GraduationYear") != 0 %>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadNumericTextBox ID="GraduationYear" runat="server"
                                        DataType="Number"
                                        DbValue='<%# Bind("GraduationYear") %>'
                                        MinValue='<%# DateTime.Now.Year - 10 %>'
                                        MaxValue='<%# DateTime.Now.Year + 10 %>'
                                        NumberFormat-DecimalDigits="0"
                                        NumberFormat-GroupSizes="4" />                   
                                </EditItemTemplate>                        
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn Display="false" EditFormColumnIndex="1" HeaderText="<%$ Resources:Strings, DescriptionDanish %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadEditor ID="DescriptionDanish" runat="server"
                                        Content='<%# Bind("DescriptionDanish") %>'
                                        SkinID="Description" />
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>                       
                            <telerik:GridTemplateColumn Display="false" EditFormColumnIndex="1" HeaderText="<%$ Resources:Strings, DescriptionEnglish %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadEditor ID="DescriptionEnglish" runat="server"
                                        Content='<%# Bind("DescriptionEnglish") %>'
                                        SkinID="Description" />
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>  
                            <telerik:GridTemplateColumn Display="false" HeaderText="<%$ Resources:Strings, Website %>">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadTextBox ID="Website" runat="server" Text='<%# Bind("Website") %>' ValidationGroup="Grid" />
                                    <asp:RegularExpressionValidator ID="WebsiteValidator" runat="server"
                                        ControlToValidate="Website"
                                        ErrorMessage="<%$ Resources:Strings, InvalidUri %>"
                                        ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&amp;=]*)?"
                                        ValidationGroup="Grid" />
                                    <ajax:ValidatorCalloutExtender ID="WebsiteValidatorExtender" runat="server"
                                        TargetControlID="WebsiteValidator" />                         
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>   
                            <telerik:GridTemplateColumn Display="false" HeaderText="<%$ Resources:Strings, Portrait %>" UniqueName="Portrait">
                                <ItemTemplate>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <telerik:RadBinaryImage ID="Portrait" runat="server"
                                        AutoAdjustImageControlSize="false"
                                        DataValue='<%# Eval("Portrait") != DBNull.Value ? Eval("Portrait") : null %>'
                                        GenerateEmptyAlternateText="true"
                                        Width="100px" />                                
                                    <div>
                                        <asp:Button ID="DeletePortrait" runat="server"
                                            CommandArgument='<%# Eval("UserID") %>'
                                            OnClick="DeletePortrait_Click"
                                            Text="<%$ Resources:Strings, Delete %>"
                                            Visible='<%# Eval("Portrait") != DBNull.Value %>' />
                                        <ajax:ConfirmButtonExtender ID="DeletePortraitExtender" runat="server" ConfirmText="<%$ Resources:Strings, AreYouSure %>" TargetControlID="DeletePortrait" />
                                    </div>                                
                                    <asp:FileUpload ID="PortraitUpload" runat="server" />
                                </EditItemTemplate>                        
                            </telerik:GridTemplateColumn>    
                            <telerik:GridCheckBoxColumn AutoPostBackOnFilter="true" DataField="Administrator" HeaderText="<%$ Resources:Strings, Administrator %>" ItemStyle-HorizontalAlign="Center" SortExpression="Administrator" />
                            <telerik:GridCheckBoxColumn AutoPostBackOnFilter="true" DataField="TeachingStaff" HeaderText="<%$ Resources:Strings, TeachingStaff %>" ItemStyle-HorizontalAlign="Center" SortExpression="TeachingStaff" />
                            <telerik:GridCheckBoxColumn AutoPostBackOnFilter="true" DataField="Student" HeaderText="<%$ Resources:Strings, Student %>" ItemStyle-HorizontalAlign="Center" SortExpression="Student" />
                            <telerik:GridCheckBoxColumn AutoPostBackOnFilter="true" DataField="Alumnus" HeaderText="<%$ Resources:Strings, Alumnus %>" ItemStyle-HorizontalAlign="Center" SortExpression="Alumnus" />
                            <telerik:GridCheckBoxColumn AutoPostBackOnFilter="true" DataField="Applicant" HeaderText="<%$ Resources:Strings, Applicant %>" ItemStyle-HorizontalAlign="Center" SortExpression="Applicant" />
                            <telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="40px" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <asp:ImageButton ID="Unlock" runat="server"    
                                        AlternateText="<%$ Resources:Strings, Unlock %>"
                                        CommandArgument='<%# Eval("UserID") %>'
                                        ImageUrl="~/images/lock.gif"
                                        OnClick="Unlock_Click"
                                        ToolTip="<%$ Resources:Strings, Unlock %>"
                                        Visible='<%# Eval("IsLockedOut") %>' />
                                    <ajax:ConfirmButtonExtender ID="UnlockExtender" runat="server" ConfirmText="<%$ Resources:Strings, AreYouSure %>" TargetControlID="Unlock" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="40px" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <asp:ImageButton ID="Edit" runat="server"
                                        AlternateText="<%$ Resources:Strings, Edit %>"
                                        CommandName="Edit"
                                        ImageUrl="~/images/edit.gif"
                                        ToolTip="<%$ Resources:Strings, Edit %>" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="40px" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>                                           
                                    <asp:ImageButton ID="Delete" runat="server"
                                        AlternateText="<%$ Resources:Strings, Delete %>"
                                        CommandName="Delete"
                                        ImageUrl="~/images/delete.gif"
                                        ToolTip="<%$ Resources:Strings, Delete %>" />
                                    <ajax:ConfirmButtonExtender ID="DeleteExtender" runat="server" TargetControlID="Delete" ConfirmText="<%$ Resources:Strings, AreYouSure %>" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>                                   
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

[Dimo]

Hi Rasmus,

There is no way to display the cells of the hidden columns in the edit row - the HTML specification does not allow that. The only way is to show the columns by setting Display="true", e.g. at runtime when the user enters edit mode (OnEditCommand event handler).

As for your second question, please refer to the following forum post, which shows how to make RadGrid shrink and expand automatically, according to the width of its columns:

http://www.telerik.com/community/forums/aspnet/grid/radgrid-width-spans-entire-page.aspx#503138


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ondfisk]

Thanks for the reply.

As it turns out the solutions to make RadGrid width=auto/float works fine in Firefox and IE8 but completely destroys the layout in IE7 so I had to revert to nesting the RadGrid in an empty table.

Regarding displaying automatic master details, I'd hoped there would be an option to easily expand/collapse a row to display hidden columns - so I wouldn't have to code a specific expand part for each grid. Maybe that would be something to include in the next version?

[Dimo]

Hello Rasmus,

We may consider including the mentioned feature in the future, based on customer feedback.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ondfisk]

Sounds great - looking forward to that