Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
137 views
Hello,

I have an issue with the spacing of the RadRibbonBar...see the video below. What I need to do is remove the Red Area. Please note the color is simply used for contrast.
Demo of Issue

ASPX
<div id="dsxWeb">
        <div id="ribbonBar">
            <div class="autoSpacer">
                <telerik:RadRibbonBar  ID="dsxWebRibbon" runat="server" EnableQuickAccessToolbar="true" EnableMinimizing="true">
                <ApplicationMenu Text="File">
                         <Items>
                              <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="images/icon_new16.png"></telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="images/icon_open16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="images/icon_save16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Save As" ImageUrl="images/icon_saveas16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                              <telerik:RibbonBarApplicationMenuItem Text="Log Out" ImageUrl="images/icon_logout16.png">
                              </telerik:RibbonBarApplicationMenuItem>
                         </Items>
                </ApplicationMenu>         
                <Tabs>
                    <telerik:RibbonBarTab Text="Home">
                        <telerik:RibbonBarGroup Text="DSX Home">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Open Home" ImageUrl="images/dashboard.png" CommandName="opendc" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Workspace">
                            <Items>
                                <telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="File" ImageUrlLarge="images/icon_save.png" ImageUrl="images/icon_save16.png">
                                    <Items>
                                                  <telerik:RibbonBarMenuItem Text="Save" ImageUrl="images/icon_save16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="Save As" ImageUrl="images/icon_saveas16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="New" ImageUrl="images/icon_new16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="Open" ImageUrl="images/icon_open16.png"></telerik:RibbonBarMenuItem>
                                                  <telerik:RibbonBarMenuItem Text="Log Out" ImageUrl="images/icon_logout16.png"></telerik:RibbonBarMenuItem>
                                             </Items>
                                </telerik:RibbonBarMenu>
                                 <telerik:RibbonBarMenu QuickAccess="Active" Size="Large" Text="Navigation" ImageUrlLarge="images/home_navigation.png" ImageUrl="images/home_navigation16.png">
                                    <Items>
                                        <telerik:RibbonBarMenuItem Text="Left" ImageUrl="images/navigation_left.png" CommandName="choosenav" CommandArgument="navigationLeft"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Top" ImageUrl="images/navigation_top.png" CommandName="choosenav" CommandArgument="navigationTop"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Right" ImageUrl="images/navigation_right.png" CommandName="choosenav" CommandArgument="navigationRight"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem Text="Bottom" ImageUrl="images/navigation_bottom.png" CommandName="choosenav" CommandArgument="navigationBottom"></telerik:RibbonBarMenuItem>
                                         
                                    </Items>
                                </telerik:RibbonBarMenu>
                                <telerik:RibbonBarButton QuickAccess="Active" Size="Large" Text="Refresh" ImageUrl="images/home_refresh.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Data">
                        <telerik:RibbonBarGroup Text="Database">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Restore" ImageUrl="images/restoredb.png"/>
                                <telerik:RibbonBarButton Size="Large" Text="Sandbox" ImageUrl="images/sandboxdb.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Record">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="New" ImageUrl="images/addrecord.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Delete" ImageUrl="images/deleterecord.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Zero Data Fields" ImageUrl="images/zerorecord.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Reports">
                        <telerik:RibbonBarGroup Text="Standard">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Fiscal" ImageUrl="images/report_fiscal.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Item Master" ImageUrl="images/report_itemmaster.png" />
                                <telerik:RibbonBarButton Size="Large" Text="History-Forecast" ImageUrl="images/report_historyforecast.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Shortage" ImageUrl="images/report_shortage.png" />
                                <telerik:RibbonBarButton Size="Large" Text="ABC" ImageUrl="images/report_abc.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Performance" ImageUrl="images/report_performance.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Performance Summary" ImageUrl="images/report_performance.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Basic Inventory" ImageUrl="images/report_basicinventory.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Valuation Inventory" ImageUrl="images/report_valuationinventory.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Process">
                        <telerik:RibbonBarGroup Text="Convert">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Currency" ImageUrl="images/convert_currency.png" />
                                <telerik:RibbonBarButton Size="Large" Text="UOM" ImageUrl="images/convert_uom.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Forecast Mangement">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Forecasting" ImageUrl="images/fm_forecasting.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Performance" ImageUrl="images/fm_performance.png" />
                                <telerik:RibbonBarButton Size="Large" Text="ABC" ImageUrl="images/fm_abc.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Aggregation" ImageUrl="images/fm_aggregation.png" />
                                <telerik:RibbonBarButton Size="Large" Text="BOM" ImageUrl="images/fm_bom.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Inventory" ImageUrl="images/fm_inventory.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Promotions" ImageUrl="images/fm_promotions.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Create">
                        <telerik:RibbonBarGroup Text="Panels">
                            <Items>
                                <telerik:RibbonBarSplitButton ID="createDescriptive" Size="Large" Text="Descriptive" ImageUrlLarge ="images/widgets_descriptive.png">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Descriptive Panels' CommandName='managewidgets' CommandArgument='0' />
                                        <telerik:RibbonBarButton Text='Description Panel #1' CommandName='descriptionpanel' CommandArgument='1' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createAggregation" Size="Large" Text="Aggregation" ImageUrlLarge="images/widgets_aggregation.png">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Aggregation Panels' CommandName='managewidgets' CommandArgument='1' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createSpreadsheets" Size="Large" Text="Spreadsheets" ImageUrlLarge="images/widgets_spreadsheets.png" CommandName="managespreadsheets">
                                    <Buttons>
                                       <telerik:RibbonBarButton Text='Edit/Create Spreadsheet Panels' CommandName='managewidgets' CommandArgument='2' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createCharts" Size="Large" Text="Charts" ImageUrlLarge="images/widgets_charts.png" CommandName="managecharts">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Chart Panels' CommandName='managewidgets' CommandArgument='3' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton ID="createDashboard" Size="Large" Text="Dashboard" ImageUrlLarge="images/widgets_dashboard.png" CommandName="managedashboard">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text='Edit/Create Dashboard Panels' CommandName='managewidgets' CommandArgument='4' />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Builders">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Curves" ImageUrl="images/builders_curves.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Calendars" ImageUrl="images/builders_calendars.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Ranges" ImageUrl="images/builders_ranges.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Closed Day Calendars" ImageUrl="images/builders_closeddaycalendars.png" />
                                <telerik:RibbonBarButton Size="Large" Text="APS Refresh" ImageUrl="images/builders_apsrefresh.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                    <telerik:RibbonBarTab Text="Admin">
                        <telerik:RibbonBarGroup Text="Security">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Users" ImageUrl="images/security_users.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Roles" ImageUrl="images/security_roles.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="DBA">
                            <Items>
                                <telerik:RibbonBarButton Size="Large" Text="Supersession" ImageUrl="images/dba_supersession.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Batch Builder" ImageUrl="images/dba_batchbuilder.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Global Changes" ImageUrl="images/dba_globalchanges.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Delete Records" ImageUrl="images/dba_deleterecords.png" />
                                <telerik:RibbonBarButton Size="Large" Text="Field Mangement" ImageUrl="images/dba_fieldmanagement.png" />
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
                     
                </Tabs>
            </telerik:RadRibbonBar>
            </div>
        </div>
        <div id="mainContent">
             <div class="autoSpacer">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
                <telerik:RadPane ID="navigationPane" runat="server" Width="150">
                Navigation
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Both">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="contentPane" runat="server">
                Panels
                </telerik:RadPane>
            </telerik:RadSplitter>
            </div>
        </div>
        <div id="statusBar">
             <div class="autoSpacer">
            Status Bar
            </div>
        </div>
    </div>

CSS Used:

#dsxWeb
{
    position: absolute;
    display: table;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
}
 
#ribbonBar
{
    display: table-row;
    background-color: Red;
}
 
#dsxWebRibbon
{
   padding: 0px;
}
 
#mainContent
{
    display: table-row;
    background-color: Yellow;
}
#statusBar
{
    display: table-row;
    width: 100%;
    height: 40px;
    background-color: #3399FF;
     
}
 
.autoSpacer
{
    display: table-cell;
    vertical-align: top;
}


Any help would be great.

Michael
Ivan Zhekov
Telerik team
 answered on 13 May 2013
11 answers
267 views
Hi Team,

Please help me in learning RAD image Editor Control. Need to Use the telerik Control in ASP .net 2.0 environment.

Regards,
Nitish
Vessy
Telerik team
 answered on 13 May 2013
2 answers
142 views
Hi All,

I am using Telerik Spell checker in a web application. It seems that the control does not recognize words like Didn''t, It''s, hasn''t as wrong words.
Please let me know any workaround on this problem.

Thanks in Advance,
Rupali
Sudheer
Top achievements
Rank 1
 answered on 13 May 2013
4 answers
675 views
Hello , I am using a toggle button and trying to set toggle state programmatically. But always the tagglestate[1] is selected on page load. Can you please explain how this works

My sample code

Aspx page

 

<telerik:RadButton ID="btnPlayStop" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"

 

 

Width="30px" Height="30px" AutoPostBack="true" ForeColor="Black" OnToggleStateChanged="btnPlayStop_CheckedChanged" Visible='<%# !IsAddNewMode %>' >

 

 

<ToggleStates>

 

 

<telerik:RadButtonToggleState ImageUrl="~/Images/button_green_stop.png" HoveredImageUrl="~/Images/button_green_stop.png"

 

 

Text="Stop" />

 

 

<telerik:RadButtonToggleState ImageUrl="~/Images/button_play_green.png" HoveredImageUrl="~/Images/button_play_green.png"

 

 

Text="Play" />

 

 

</ToggleStates>

 

 

</telerik:RadButton>

 



Code behind

 

if (IsAutomationEnabled)

 

{

btnPlayStop.ToggleStates[1].Selected =

false;

 

btnPlayStop.ToggleStates[0].Selected =

true;

 

}

else

{

btnPlayStop.ToggleStates[1].Selected =

true;

 

btnPlayStop.ToggleStates[0].Selected =

false;

 

 

}


Even though it goes into the correct loop on debugging , always togglestate[1] is selected on page load. Please help

Thanks an dRegards,
Vaneeth
Ruby
Top achievements
Rank 1
 answered on 13 May 2013
7 answers
207 views
Hello Team,

I have a requirement like when the user try to update the appointment by dragging the appointment then it should popup a confirm box and if user clicks on ok then it should update other wise not. its just like the existing delete functionality. could you please let me know how to achieve this.

Thanks,
Ram
Boyan Dimitrov
Telerik team
 answered on 13 May 2013
3 answers
121 views
Hi,

I'm trying to generate columns dynamically in a RadGrid. I'm currently doing it in the Init() event of the page but when I do it there I get a viewstate error when posting back with filtering turned on. I found a solution that suggests generating the columns in the Page_Load() event, which works for the current issue. However, when I generate the columns from Page_Load(), I get an error message that it can't generate the column with specified type TempoGridDropDownColumn.

I tried with another custom column type and got the same error message. It seems when I generate them from Page_Load() it doesn't support custom column types. If I set EnableColumnsViewState to false I can make the grid work for displaying and adding data. However, without the view state enabled I'm unable to get the selected item into edit mode. When I click Edit Selected the grid structure is lost along with the selected item, so it can't change the item to an editable row.

So I need one of two things. I need to be able to create a custom column type dynamically from Page_Load with EnableColumnsViewState set to true, or I need to be able to edit the selected row with EnableColumnsViewState set to false. Any suggestions?

Shane
Maria Ilieva
Telerik team
 answered on 13 May 2013
0 answers
88 views
I have a RadGrid with a GridButtonColumn that I use to download files from a binary field in my database.  This project has been going on for months and this has been working perfectly.  In the ItemDataBound event I set up the button if the binary field is not null. Nothing I've done lately has been directly related to it.

However now I've implemented RadWindow popups based on your examples and this required me to change the RadAjaxManager.

Now that the grid is 'Ajaxified', I've found that the download links have suddenly stopped working.  I've traced through the server side code in both the current and older versions and there has been no difference in execution of the code.  However once it gets to the end, it looks like the browser is just hanging with that circular 'loading' icon at the bottom left hand corner.

If I cut out both Ajax Settings from the manager, the download links function normally again.

Suggestions?

The manager declaration is as follows:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />  
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>
    </telerik:RadAjaxManager>

OK.  I think I've solved my problem.  I found this: http://www.telerik.com/community/forums/aspnet-ajax/grid/disabling-ajax-on-gridbuttoncolumn.aspx which was enough to get me started.

I changed my GridButtonColumn to a template with a RadButton.  Then I added   <ClientEvents OnRequestStart="mngRequestStarted" /> to my RadAjaxManager.

The only thing I couldn't get to work was that JavaScript RegExp (and I rarely use Regex) so my function wound up like this.  Seems to work.  Anyone see any problems doing it this way?

function mngRequestStarted(ajaxManager, eventArgs) {        
       if (eventArgs.EventTarget.indexOf("DownloadButton") > 0) {
            eventArgs.EnableAjax = false;
      }  
}

Boris
Top achievements
Rank 1
 asked on 13 May 2013
3 answers
131 views
I have a calendar that I would like to allow users to select a range of dates, but I want them to have to hold [shift] to select a second date to define a range.

The ConsecutiveClick setting works almost like I want, except the second click should be required to be [shift]+click and the click without the shift key should always be considered as the anchor point for the subsequent [shift]+click.

I set EnableMultiSelect="true" and RangeSelectionMode="OnKeyHold", but the user can still click and select multiple dates without pressing the shift key.

Basically what I want is single select mode unless the shift key is pressed. If the shift key is pressed, then I want to allow the user to select a second date that will define a range of dates (not individual days, but consecutive days). This would mimic the default behavior of Windows.

The scenario I am envisioning goes like this:
Calendar is rendered with May 8 selected (it is today after all)
The user clicks May 17.
May 17 is selected and May 8 is deselected.
User then clicks May 27.
May 27 is selected and May 17 is deselected.
User then presses [shift] and clicks May 29.
May 27-May 29 is selected as a range.
User (still holding shift key) clicks May 31.
May 27-May 31 is selected as a range.
User (still holding shift key) clicks May 8.
May 8-May 27 is selected as a range. (Note: The date selected without the shift key being held or the default date, becomes the anchor point for all range selections and only the last [shift]+click is recognized as a date range selection)
At this point:
If the user releases shift key and clicks another date, it becomes the "anchor" and the range is deselected;
OR
If the user releases the shift key and presses it again before clicking a date, the original "anchor" date remains valid and the new [shift]+click defines the range.

I hope I've explained what I would like.

Is there some telerik-fu that I can employ to get this kind of behavior?
Keith
Top achievements
Rank 2
 answered on 13 May 2013
1 answer
61 views
Having read up on the RadGrid it seems that the RCellFormatting event is the one I need to handle to set formatting on a cell based on its value however I am using 2012.2.912.20 which does not seem to have this event.  How should I handle formatting of a data cell in this version?

This leads me to a more fundamental issue of documentation - as all documentation is online how do I know which features are available in my version and which have been added since.  I'm only a little out of date but a pretty vital item (cellformatting) appears to either not be there or implemented in a different way.
Maria Ilieva
Telerik team
 answered on 13 May 2013
3 answers
150 views
On my webform, I have a radPanelBar that contains a radComboBox with default styling.  After a RadWindow is displayed via client-side code, the TabIndex of the anchor in the RCBArrowCell gets set to 0.  The arrow can now receive the focus.  This results in having to tab twice in order to move the focus from the RadComboBox to the next control.  I am not setting the tabIndex initially or via code.  I also could not determine if this is a stylesheet being applied.

Thanks for your help.

Sean Severson
Sean Severson
Top achievements
Rank 1
 answered on 13 May 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?