This is a migrated thread and some comments may be shown as answers.

Set Panelbar Template width

2 Answers 77 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
King Wilder
Top achievements
Rank 2
King Wilder asked on 07 Jul 2008, 09:43 PM
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 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 08 Jul 2008, 02:40 PM
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
0
King Wilder
Top achievements
Rank 2
answered on 08 Jul 2008, 03:55 PM
Paul,

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

Thanks,

King Wilder
Tags
PanelBar
Asked by
King Wilder
Top achievements
Rank 2
Answers by
Paul
Telerik team
King Wilder
Top achievements
Rank 2
Share this question
or