RadTreeList Popup Window alignment

Thread is closed for posting
2 posts, 0 answers
  1. Tamim
    Tamim avatar
    64 posts
    Member since:
    May 2011

    Posted 23 Mar 2013 Link to this post


    Hi all,

    I have used Radtreelist and add, edit in popup window.
    How to set Popup window alignment Right side.
    see Image1 - Normal open popup window
    Image2 - I want popup window open in this format

    My Sample Coding:

    <tr>
                    <td>
                        <telerik:RadTreeList ID="RadTreeListWork" runat="server" OnNeedDataSource="RadTreeListWork_NeedDataSource"
                            OnUpdateCommand="RadTreeListWork_UpdateCommand" OnInsertCommand="RadTreeListWork_InsertCommand"
                            ParentDataKeyNames="WorkParentId" DataKeyNames="WorkId" AutoGenerateColumns="False"
                            OnItemDataBound="RadTreeListWork_ItemDataBound" EditMode="PopUp" OnDeleteCommand="RadTreeListWork_DeleteCommand"
                            OnItemCreated="RadTreeListWork_ItemCreated" AllowMultiItemEdit="False" Culture="(Default)"
                            GridLines="None" IsItemInserted="False" ShowOuterBorders="False" Width="500px"
                            PageSize="10" AllowPaging="true" EditFormSettings-PopUpSettings-Modal="true">
                            <Columns>
                                <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton"
                                    ShowEditButton="false" HeaderStyle-Width="20px" ItemStyle-HorizontalAlign="Center" />
                                <telerik:TreeListButtonColumn CommandName="Edit" Text="Edit" UniqueName="EditCommandColumn"
                                    ButtonType="ImageButton" HeaderStyle-Width="20px" ItemStyle-HorizontalAlign="Center"
                                    HeaderText="EDIT" />
                                <telerik:TreeListBoundColumn DataField="WorkId" HeaderText="WorkId" ReadOnly="true"
                                    UniqueName="WorkId" HeaderStyle-Width="75px" ForceExtractValue="Always" Visible="false" />
                                <telerik:TreeListBoundColumn DataField="WorkParentId" HeaderText="WorkParentId" HeaderStyle-Width="65px"
                                    UniqueName="WorkParentId" ReadOnly="true" ForceExtractValue="Always" Visible="false" />
                                <telerik:TreeListBoundColumn DataField="WorkName" HeaderText="NAME" UniqueName="WorkName"
                                    HeaderStyle-Width="100px">
                                    <HeaderStyle Font-Bold="true" Font-Size="Small"></HeaderStyle>
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="WorkDescription" HeaderText="DESCRIPTION"
                                    UniqueName="WorkDescription" HeaderStyle-Width="200px">
                                    <HeaderStyle Font-Bold="true" Font-Size="Small"></HeaderStyle>
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="UnitCode" HeaderText="UNIT" UniqueName="UnitCode"
                                    HeaderStyle-Width="100px">
                                    <HeaderStyle Font-Bold="true" Font-Size="Small"></HeaderStyle>
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListTemplateColumn DataField="Quantity" HeaderText="QUANTITY" UniqueName="Quantity"
                                    HeaderStyle-Width="100px">
                                    <HeaderStyle Font-Bold="true" Font-Size="Small"></HeaderStyle>
                                    <ItemTemplate>
                                        <asp:Label runat="server" ID="Qty" Text='<%# Eval("Quantity") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn DataField="Rate" HeaderText="RATE ($)" UniqueName="Rate"
                                    HeaderStyle-Width="100px">
                                    <HeaderStyle Font-Bold="true" Font-Size="Small"></HeaderStyle>
                                    <ItemTemplate>
                                        <asp:Label runat="server" ID="Rte" Text='<%# Eval("Rate") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListTemplateColumn DataField="Amount" HeaderText="AMOUNT ($)" UniqueName="Amount"
                                    HeaderStyle-Width="100px">
                                    <HeaderStyle Font-Bold="true" Font-Size="Small"></HeaderStyle>
                                    <ItemTemplate>
                                        <asp:Label runat="server" ID="Amt" Text='<%# Eval("Amount") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListButtonColumn ButtonType="ImageButton" UniqueName="DeleteCommandColumn"
                                    Text="Delete" CommandArgument="Child" CommandName="Delete" HeaderStyle-Width="20px" />
                            </Columns>
                            <ValidationSettings CommandsToValidate="PerformInsert, Update" EnableValidation="true" />
                            <EditFormSettings CaptionFormatString="Create" EditFormType="Template" PopUpSettings-Width="400px">
                                <FormTemplate>
                                    <div style="margin-left: 1%;">
                                        <table width="100%">
                                            <tr>
                                                <td style="height: 75px; width: 75%;">
                                                    <table style="float: right;">
                                                        <tr>
                                                            <td>
                                                                <asp:Label ID="Label3" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
                                                                <asp:Label ID="Label2" Text="Mandatory Field(s)" runat="server"></asp:Label>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <br />
                                                    <br />
                                                    <fieldset>
                                                        <legend style="margin-bottom: 10px">Work Definition</legend>
                                                        <table cellspacing="2" cellpadding="1" width="100%" border="0">
                                                            <tr>
                                                                <td align="right">
                                                                    <asp:Label ID="Label1" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
                                                                    Code :
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox Width="90%" ID="WorkName" AutoCompleteType="Disabled" runat="server"
                                                                        MaxLength="5" Text='<%# Bind("WorkName") %>'></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top" align="right">
                                                                    <asp:Label ID="Label4" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
                                                                    Description :
                                                                </td>
                                                                <td>
                                                                    <asp:TextBox Width="90%" ID="WorkDescription" AutoCompleteType="Disabled" runat="server"
                                                                        MaxLength="300" TextMode="MultiLine" Height="100px" Text='<%# Bind("WorkDescription") %>'></asp:TextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top" align="right">
                                                                    Unit :
                                                                </td>
                                                                <td>
                                                                    <telerik:RadComboBox runat="server" ID="UnitCode" Skin="Vista" AppendDataBoundItems="True"
                                                                        AutoPostBack="True" DataTextField="UnitName" DataValueField="UnitCode" Height="200px"
                                                                        OnSelectedIndexChanged="UnitCode_SelectedIndexChanged">
                                                                    </telerik:RadComboBox>
                                                                </td>
                                                                <%--<td>
                                                                    <telerik:RadComboBox runat="server" ID="UnitCode">
                                                                    </telerik:RadComboBox>
                                                                </td>--%>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top" align="right">
                                                                    <asp:Label ID="Label9" runat="server" ForeColor="Red" Text="*" Width="1px" Visible="false"></asp:Label>
                                                                    Quantity :
                                                                </td>
                                                                <td>
                                                                    <telerik:RadNumericTextBox Width="50%" ID="Quantity" AutoCompleteType="Disabled"
                                                                        MaxLength="6" FocusedStyle-BackColor="Lavender" runat="server" Text='<%# Bind("Quantity") %>'
                                                                        onkeydown="return (event.keyCode!=13);" ReadOnly="true">
                                                                        <NumberFormat GroupSeparator="" DecimalDigits="0" AllowRounding="true" KeepNotRoundedValue="false" />
                                                                        <IncrementSettings InterceptMouseWheel="false" InterceptArrowKeys="false" />
                                                                        <ClientEvents OnKeyPress="KeyPress" />
                                                                    </telerik:RadNumericTextBox>
                                                                    <%--<telerik:RadListBox runat="server" ID="UnitNo">
                                                                    </telerik:RadListBox>--%>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top" align="right">
                                                                    <asp:Label ID="Label10" runat="server" ForeColor="Red" Text="*" Width="1px" Visible="false"></asp:Label>
                                                                    Rate ($):
                                                                </td>
                                                                <td>
                                                                    <telerik:RadNumericTextBox Width="50%" ID="Rate" AutoCompleteType="Disabled" MaxLength="6"
                                                                        ReadOnly="true" FocusedStyle-BackColor="Lavender" runat="server" Text='<%# Bind("Rate") %>'
                                                                        onkeydown="return (event.keyCode!=13);">
                                                                        <NumberFormat GroupSeparator="" DecimalDigits="0" AllowRounding="true" KeepNotRoundedValue="false" />
                                                                        <IncrementSettings InterceptMouseWheel="false" InterceptArrowKeys="false" />
                                                                        <ClientEvents OnKeyPress="KeyPress" />
                                                                    </telerik:RadNumericTextBox>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top" align="right">
                                                                    Amount ($):
                                                                </td>
                                                                <td>
                                                                    <telerik:RadNumericTextBox Width="50%" ID="Amount" AutoCompleteType="Disabled" MaxLength="6"
                                                                        FocusedStyle-BackColor="Lavender" runat="server" Text='<%# Bind("Amount") %>'
                                                                        onkeydown="return (event.keyCode!=13);" ReadOnly="true">
                                                                        <NumberFormat GroupSeparator="" DecimalDigits="0" AllowRounding="true" KeepNotRoundedValue="false" />
                                                                        <IncrementSettings InterceptMouseWheel="false" InterceptArrowKeys="false" />
                                                                        <ClientEvents OnKeyPress="KeyPress" />
                                                                    </telerik:RadNumericTextBox>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </fieldset>
                                                </td>
                                            </tr>
                                        </table>
                                        <table>
                                            <tr>
                                                <td>
                                                    <telerik:RadButton ID="btnUpdate" Text='<%# (Container is TreeListEditFormInsertItem) ? "Insert" : "Update" %>'
                                                        runat="server" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                                        Icon-PrimaryIconCssClass="rbOk">
                                                    </telerik:RadButton>
                                                    &nbsp;
                                                    <telerik:RadButton ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                                        CommandName="Cancel" Icon-PrimaryIconCssClass="rbCancel">
                                                    </telerik:RadButton>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </FormTemplate>
                                <PopUpSettings Modal="True"></PopUpSettings>
                            </EditFormSettings>
                        </telerik:RadTreeList>
                    </td>
                </tr>

    Advance & Thanks,
    Ansari.
  2. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 27 Mar 2013 Link to this post

    Hi,

    I am afraid that the TreeList does not have such functionality out of the box. However, you could try to port this solution and use it with TreeList. Then you could achieve your goal.

    All the best,
    Andrey
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top