Set Panelbar Template width

3 posts, 0 answers
  1. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 07 Jul 2008 Link to this post

    I'm using a Template inside the Panelbar control and the content goes off the page to the right without automatically wrapping to the width of the browser.

    I've looked at all the examples and I can't see how to set the width.  Can you tell me what I'm doing wrong?

    I've included my code:
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik" Width="1000px">  
            <CollapseAnimation Type="None" Duration="100"></CollapseAnimation> 
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Order Details Description (Click here)" 
                    Expanded="false">  
                    <Items> 
                        <telerik:RadPanelItem> 
                            <ItemTemplate> 
                                <div style="width: 1000px; float: left;">  
                                    <p> 
                                        The Tabs are in order of importance, from left to right.</p> 
                                    <p> 
                                        This is a brief explanation of how the order process flows. It only takes the four  
                                        (4) steps below to start, process and complete an order.  
                                    </p> 
                                    <ol> 
                                        <li><b>Order Tab</b> - View the information and status of the order. You do NOT need  
                                            to manually change the Order Status, this is done automatically as long as the process  
                                            follows these steps. If there is any change in the order process, you have the ability  
                                            to override this and change the status manually.</li> 
                                        <li><b>Files Tab</b> - Download the files for production. Click the file name to download  
                                            the file.</li> 
                                        <li><b>Vendor Jobs Tab</b> - Set a Vendor to handle an item or items.  
                                            <ul> 
                                                <li>Select a Vendor from the drop down list. <b>(Required)</b></li>  
                                                <li>enter a PO, if applicable.</li> 
                                                <li>enter the Date the item is dropped off to the Vendor. <b>(Required)</b></li>  
                                                <li>enter a description if needed.</li> 
                                                <li>select at least one item from the list on the right of items assigned to this Vendor.</li> 
                                                <li>set the job status.</li> 
                                                <li>Click the Save button. This will save the Vendor job for the selected item(s).</li> 
                                            </ul> 
                                            Note: You won't be able to add a Shipping Tracking Number (on the Shipping Tab)  
                                            until at least one item receives a Pick Up/Delivery Date and the Job Status is "Ok  
                                            to Ship"! (To set the Vendor Job Order Status, click the &quot;Vendor Job Status&quot;  
                                            link in the left hand navigation, then edit the statuses until they are how you  
                                            want them.)  
                                            <br /> 
                                            <b>To Set a Pick Up / Delivery Date:</b> 
                                            <ol> 
                                                <li>When a job from a Vendor is completed and received, click the &quot;Edit&quot; link  
                                                    in the Job History table. The information for this job will appear in the fields.  
                                                    Select the Pick Up date and click the Save button. This will update the record for  
                                                    this job.</li> 
                                            </ol> 
                                        </li> 
                                        <li><b>Shipping Tab</b> - this is the final step to completed an order. After a job  
                                            has a Pick Up / Delivery Date, those items that are completed can be shipped. This  
                                            section allows you to ship a partial order or the complete order, in case not all  
                                            items are back from Vendors.  
                                            <p> 
                                                <b>To Ship an item(s):</b></p>  
                                            <ol> 
                                                <li>You must first get the shipping process started in order to get a Tracking number.</li> 
                                                <li>Once you receive the Tracking number, enter it into the Shipping Tracking Number  
                                                    field and select the item(s) that will be shipped for this tracking number.</li> 
                                                <li>Click the Set Tracking Number button. This will update the database with the tracking  
                                                    information for the selected item(s) which will be shown in the table below, it  
                                                    will update the Order Status and send an email to the customer that a full or partial  
                                                    order has shipped. It will automatically update the Order Status based on the number  
                                                    of items shipped. If only some of the items are shipped, it will set the Order Status  
                                                    to: &quot;Shipping Order&quot;. If all the items are shipped, then the Order Status  
                                                    is set to: &quot;Shipped To Customer&quot;.</li> 
                                            </ol> 
                                        </li> 
                                    </ol> 
                                    <p> 
                                        The rest of this information is not part of the order completion process.</p> 
                                    <ul> 
                                        <li><b>Billing Tab</b> - The billing area shows the order billing information and it  
                                            gives you the ability to Refund the order. NOTE: Refunds can only be made by Administrators  
                                            and an alert will be displayed when the order is &quot;In Production&quot; or any  
                                            status past this. This is just to let you know that it's up to you if you want to  
                                            refund the order after it's in production.</li> 
                                        <li><b>Customer Tab</b> - The customer area allows you to update customer information  
                                            and view the order history for a customer.</li> 
                                        <li><b>Notes Tab</b> - This section allows you to add any notes for this order. Some  
                                            notes are automatically entered by the application during the customer checkout  
                                            process. You do not have the ability to edit or delete notes.</li> 
                                        <li><b>Receipt Tab</b> - This is a copy of the receipt that the customer received after  
                                            their order was completed.</li> 
                                        <li><b>Audit Tab</b> - This just displays a trace record of events that occurred during  
                                            the order checkout process. If there was an error during checkout, it would display  
                                            here also.</li> 
                                    </ul> 
                                </div> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
            <ExpandAnimation Type="None" Duration="100"></ExpandAnimation> 
        </telerik:RadPanelBar> 
     

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 08 Jul 2008 Link to this post

    Hello King Wilder,

    You can easily achieve your goal by adding the following style to the DIV container:

    ....  
    <telerik:RadPanelItem> 
        <ItemTemplate> 
            <div style="width: 1000px; float: left; white-space:normal">  
                <p> 
    .... 


    Kind regards,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 08 Jul 2008 Link to this post

    Paul,

    Thanks, that was it.  I didn't see this value anywhere in the examples.

    Thanks,

    King Wilder
Back to Top