Questions on UI for ASP.NET AJAX Forum

0 answers

238 views

Hi Telerik Team,

When we scroll the scrollable RadMenu by using Mouse wheel (moving downwards) till the end, RadMenu popup height is reducing, Due to this effect, only few items are visible in the top of the menu.

This scrollable RadMenu is working fine in (Telerik.Web.UI (2008)) , but it is not working fine in (Telerik.Web.UI (2011).

Design : Default.aspx
----------------------------




                        <telerik:RadMenu ID="rmDisplay" runat="server"   CausesValidation="False"    ClickToOpen="true"   >
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Display: Table" Value="Table" PostBack="false" >
                                    <GroupSettings ExpandDirection="Up" Height="100px" OffsetX="0" OffsetY="0" />

                                    <Items>

                                    <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>


                                 <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">

                                </telerik:RadMenuItem>

                                  <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>




                                  <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>


                                 <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">

                                </telerik:RadMenuItem>


                                  <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>


                                <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>


                                 <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">

                                </telerik:RadMenuItem>


                                  <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>

                                 <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>


                                 <telerik:RadMenuItem runat="server" Text="Images" Value="Table2">

                                </telerik:RadMenuItem>


                                  <telerik:RadMenuItem runat="server" Text="Graph" Value="Table1">

                                </telerik:RadMenuItem>





                                    </Items>

                                </telerik:RadMenuItem>



                            </Items>
                            <DefaultGroupSettings ExpandDirection="Up"     />
                            <CollapseAnimation Duration="200" Type="None"   />
                        </telerik:RadMenu>

---- code ends here ----------------

The code uses the theme file (menu.Agionet.css).

Theme file (menu.agionet.css)
------------------------------------------

/* r.a.d.menu Web 2.0 skin */

.RadMenu_Agionet
{
   /*background: #666666 url('Menu/Agionet/img/MenuItemBackground.gif');*/
   font: normal 9pt Arial, "Ms Sans Serif", "Ms Serif",sans-serif;
   margin: 0;
   padding: 0;
   z-index:3000;
   position: static !important;
}

.RadMenu_Agionet .rmRootGroup
{
   /*max-width: 130px;
   _width: 130px;*/
}
#Filter1_rmX,
#Filter1_rmX .rmText
{
   /*resize X button */
   width: 14px !important; /* x */
   margin: 0;
   padding: 0;
}

.RadMenu_Agionet .rmLink,
.RadMenu_Agionet .rmLink:visited,
.RadMenu_Agionet .rmLink:active
{
   text-decoration: none;
   color: #004D6B;
   background: #FFFFFF url(Menu/Agionet/img/MainItemBackground.gif) repeat-x bottom center;
   line-height: 22px;
   border: 1px solid #004D6B;
   overflow:hidden;

}
.RadMenu_Agionet .rmLink:hover,
.RadMenu_Agionet .rmFocused,
.RadMenu_Agionet .rmExpanded
{
   color: #FF991A;
   border: 1px solid #FF991A;
   background: #FFFFFF url(Menu/Agionet/img/MainItemBackgroundHover.gif) repeat-x bottom center;
   cursor: hand;
   cursor: pointer;
   overflow:hidden
}

.RadMenu_Agionet .rmRootGroup .rmText
{
   /* line-height: 22px; */
   padding: 0 0 0 5px;
   cursor: hand;
   cursor:pointer;
   background-image:none;
   display:block !important; /* x */
   width:100% !important; /* x */
}

.RadMenu_Agionet .rmItem
{
   width:100% !important; /* x */
}

.RadMenu_Agionet .rmSlide
{
   margin-top:-1px;
   border: 0;
   width: 100% !important;
}

.RadMenu_Agionet .rmGroup
{

   border: 1px solid #FF991A;
   background: #FFE6C7 url(Menu/Agionet/img/rmGroup_bckgr.gif) repeat-x bottom;
   text-align: left;
   overflow-x:hidden !important;
   overflow-y:auto !important;
}

.RadMenu_Agionet .rmVertical
{
   /* IE8 fix --- menu type and effekt */
   display: block !important;
   width:100% !important;
   background-color:#FFC884 !important;
   color:#004D6B !important;

}

.RadMenu_Agionet .rmGroup .rmLink
{
   background: none;
   border: 0px !important;
   border-bottom: solid 1px #000000;
   width:100% !important; /* x */

}

.RadMenu_Agionet .rmGroup .rmText
{
   background: none;
   margin-right: 0px !important;
   padding-left: 8px;
   padding-right: 8px;
   color: #004D6B;
   _display: inline !important;
   border: 0px !important;
   width:auto !important;
}
.RadMenu_Agionet .rmLeftImage
   {
   margin-right: 5px;
   /*margin: 2px 5px 2px 0;
   padding: 0;*/
   border: 1px solid;
   border-top-color: #5B5B5B;
   border-right-color: #606264;
   border-bottom-color: #CCCCCC;
   border-left-color: #EFEFEF;
    position:relative !important;
    padding:0 !important;
    margin:0 !important;
   }
.RadMenu_Agionet .rmRightItem { padding: 2px 0;}
.RadMenu_Agionet .rmGroup .rmLink:hover,
.RadMenu_Agionet .rmGroup .rmFocused,
.RadMenu_Agionet .rmGroup .rmExpanded
{
   background: none;
   background-color:#FFC884;
   color: #004D6B;
   /*border-bottom: solid 1px #d8dde0;*/
}

.RadMenu_Agionet .rmHorizontal .rmExpandBottom,
.RadMenu_Agionet .rmHorizontal .rmExpandTop
{     overflow-x:hidden;
}

.RadMenu_Agionet .rmVertical .rmSeparator .rmText
{
   padding-top: 2px;
   background: #6788be;
   font-size: 1px;
}

/* mozilla only - disabled state */
.RadMenu_Agionet .rmLink.disabled,
.RadMenu_Agionet .rmLink.disabled:hover {
   color: #CCCCCC;
   border: solid 1px #CCCCCC;
   background-color: #FFFFFF;

}

/*right-to-left support*/

.RadMenu_Agionet_rtl,
.RadMenu_Agionet_rtl *
{
    text-align:right;
}

.RadMenu_Agionet_rtl .rmRootGroup .rmText
{
   padding: 0px;
   margin: 0;

}

.RadMenu_Agionet_rtl .rmGroup .rmText
{
   margin-left: 0 !important;

}

.RadMenu_Agionet_rtl .rmHorizontal .rmExpandBottom,
.RadMenu_Agionet_rtl .rmHorizontal .rmExpandTop
{
background-position:left center;
}

.RadMenu_Agionet_rtl .rmVertical .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmExpandRight
{
background: transparent url('Menu/Agionet/img/invertedGroupImageRTL.gif') no-repeat left center;
}

.RadMenu_Agionet_rtl .rmGroup .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmExpandRight
{
background: transparent url('Menu/Agionet/img/groupImageRTL.gif') no-repeat 5px center;
}

.RadMenu_Agionet_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Agionet_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Agionet_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Agionet_rtl .rmVertical .rmExpanded .rmExpandRight
{
   background: transparent url(Menu/Agionet/img/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_Agionet_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Agionet_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Agionet_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Agionet_rtl .rmGroup .rmExpanded .rmExpandRight
{
   background: transparent url(Menu/Agionet/img/groupImageRTL.gif) 5px center no-repeat;
}

#Filter1_divSecondarySelection { margin-right: 1%}

/*#Control1_Help1_rmLogout .rmText,
#Control1_Help1_rmHelp .rmText */
.RadMenu_Agionet_center
{
   text-align:center;
   margin: 0 auto;
   width: 100px !important;
}

---- code ends here ------------

Please do the needful.

Thanks,

V. Raguraman.

Menu

asked on 04 Apr 2012

3 answers

134 views

RadDatePicker culter is not reflected from page_load

Hi
i am using raddatepicker in ascx page
<radCln:RadDatePicker ID="dtpDateOfBirthDriverDetail" Culture="(Default)" runat="server" Width="170px" EnableTyping="False">

</DateInput>

</Calendar>

</radCln:RadDatePicker>
and its Culture is updated vai page_load of ascx.cs page

System.Globalization.CultureInfo c = new System.Globalization.CultureInfo(sCulture);

c.DateTimeFormat.CalendarWeekRule = System.Globalization.CalendarWeekRule.FirstFourDayWeek;

c.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Monday;
dtpDateOfBirthDriverDetail.Culture=c;

but its functinality is not working as expected for "week no" or as working in other aspx pages
while it is working fine for aspx pages

Calendar

answered on 04 Apr 2012

2 answers

202 views

[Solved] OnFilterMenuShowing client-side event does not working for RadGrid Column

In my page there is a RadGrid having filter functionality enabled.

I am handling the "OnHeaderMenuShowing" event for one of my requirement and its working fine but while trying the "OnFilterMenuShowing" client-side event its not working for me, even the simple method having to show alert message also not being called by this event handler and also without throwing any error.

Please see my code example below :-

    function FilterMenuShowing(sender, eventArgs){
                                    alert('hi');
                                                 }

again this is called at the client-side event like below for the RadGrid :-

Can any body say here if anything missed for it to work ?
OR anything to do more for get it worked ?

Thanks in advance ... :)

Grid

answered on 04 Apr 2012

1 answer

461 views

Busy Indicator

I have some client side processing that creates some data then rebinds to a radgrid. I want to show a busy indicator while this is happening. How can i do this? I would also like to use this in other parts of the program where there may not be a grid.

Thanks.

General Discussions

answered on 04 Apr 2012

1 answer

125 views

Hide edit panel

Hi,

I'm trying to figure out how to hide the edit panel after the user presses entered. The edit panel is what comes up below the selected row with the update and cancel button. I just want the postback to occur after the user presses enter to get the row that is currently being worked on. I'm creating the detail of the record below the grid. This sounds simple, but I just can't figure it out. Seems like I need to set something to false.

I have the following settings on in Client Settings tag:

<ClientSettings EnablePostBackOnRowClick="true" Selecting-AllowRowSelect="true" AllowKeyboardNavigation="true" />

Thank you,

Grid

answered on 04 Apr 2012

3 answers

133 views

Style Issue after changing FocusedDate from code behind

I am trying to change the calendar focus month from the code behind when the selected date is not in the current focus month view. The month changes as expected with the below code but the style of the individual days in the now focused month view still display with the style "OtherMonthDayStyle". The style of the individual days is updated when the mouse hovers over each day.

Is there a solution for updating the styles immediately? I have confirmed the same issue in the following broswers:
IE 8.0.6; FF 11.0; Chrome 17.0.X

<Telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<Telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" ShowRowHeaders="false"

EnableMultiSelect="false" OnSelectionChanged="RadCalendar1_SelectionChanged">

</Telerik:RadCalendar>

protected void RadCalendar1_SelectionChanged(object sender, SelectedDatesEventArgs e)

{

RadCalendar cal = (RadCalendar)sender;

if (cal.SelectedDate.Month != cal.FocusedDate.Month)

cal.FocusedDate = cal.SelectedDate;

}

Calendar

answered on 04 Apr 2012

1 answer

115 views

Access editform from client side

How to access the dropdownlist value on client side in button click

<EditFormSettings EditFormType="Template">

<FormTemplate>

<asp:DropDownList ID="editDropDown" runat="server">

<asp:ListItem Text="Item1"></asp:ListItem>

<asp:ListItem Text="Item2"></asp:ListItem>

<asp:ListItem Text="Item3"></asp:ListItem>

</asp:DropDownList>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="btn" Text="btn" runat="server" OnClientClick="ddlValue();" />

</FormTemplate>

</EditFormSettings>

General Discussions

answered on 04 Apr 2012

3 answers

274 views

[Solved] Fill checkbox list on edit mode radgrid

I am trying to fill and edit Checkboxlist with values as in the datagrid i combine all those values into one field to show better, long story. Anyway i need to first populate all teh avialable checkbox list items to choose from, got this done but next I need to hit the database and get the checkboxlist items that are checked already and populate that. So far unsuccessfull.

Protected Sub myRadGrid_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles myRadGrid.ItemDataBound

If TypeOf e.Item Is GridEditableItem And e.Item.IsInEditMode Then

Dim Item As GridEditableItem = CType(e.Item, GridEditableItem)

Dim cbl As CheckBoxList = Item.FindControl("cblReg")

Dim Id As Integer = e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("intCategoryId")

'populate the checkboxlist will all avialable items

sql = "Select COLUMN_NAME from ITSystems.INFORMATION_SCHEMA.COLUMNS where Table_name = 'Drat_Registration' and COLUMN_NAME not like 'int%'"

myDataTable = New DataTable

myDataTable = getData(sql)

cbl.DataSource = myDataTable

cbl.DataTextField = "COLUMN_NAME"

cbl.DataValueField = "COLUMN_NAME"

cbl.DataBind()

'get the existing items that should be checked when editing

sql = "Select strFieldName from Drat_regRelation where intCategoryId = " & Id

myDataTable = New DataTable

myDataTable = getData(sql)

For Each row As DataRow In myDataTable.Rows

For Each Item In cbl.Items

If row(0) = cbl.DataValueField Then

cbl.SelectedValue = True

End If

Next

End If

End Sub




<telerik:RadGrid ID="myRadGrid" runat="server" Width="100%" BorderWidth="1px" CellPadding="6" GridLines="None" BorderColor="#404040" Skin="Web20"> 
                                        <MasterTableView AutoGenerateColumns="false" DataKeyNames="Category" Name="MasterGrid" BorderColor="#404040" Font-Size="9" Font-Names="Veranda,arial,sans-serif" 
                                        HeaderStyle-HorizontalAlign="Center" GridLines="Both" BorderWidth="1px"><AlternatingItemStyle BackColor="#B0C4DE" /> 
                                        <HeaderStyle ForeColor="White" Font-Bold="true" BorderColor="#404040" BorderWidth="1px" /> 
                                            <Columns> 
                                                 <telerik:GridEditCommandColumn UniqueName="EditCommandColumn"></telerik:GridEditCommandColumn> 
                                                <telerik:GridBoundColumn DataField="Category" HeaderText="Category" /> 
                                                <telerik:GridBoundColumn DataField="DataFields" HeaderText="REG DATA" /> 
                                            </Columns> 
                                             <EditFormSettings EditFormType="Template"> 
                                                <FormTemplate> 
                                                    <table width="100%"> 
                                                        <tr> 
                                                            <td style="height:8px"></td> 
                                                        </tr> 
                                                        <tr> 
                                                            <td><b>EDIT DETAILS</b></td> 
                                                        </tr> 
                                                    </table> 
                                                    <table width="100%"> 
                                                        <tr> 
                                                            <td align="left"><asp:CheckBoxList ID="cblReg" runat="server" DataTextField="strCategory" DataValueField="intCategoryId"></asp:CheckBoxList></td> 
                                                        </tr> 
                                                        <tr> 
                                                            <td style="height:5px"></td> 
                                                        </tr> 
                                                    </table> 
                                                    <table width="100%"> 
                                                        <tr> 
                                                            <td> 
                                                                <asp:LinkButton ID="lnkSubmit" runat="server" text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'  
                                                                CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'></asp:LinkButton> 
                                                                      
                                                                <asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="false" CommandName="Cancel" Text="Cancel"></asp:LinkButton> 
                                                            </td> 
                                                        </tr> 
                                                        <tr> 
                                                            <td style="height:8px"></td> 
                                                        </tr> 
                                                    </table> 
                                                </FormTemplate> 
                                            </EditFormSettings> 
                                        </MasterTableView> 
                                     </telerik:RadGrid>

Grid

answered on 04 Apr 2012

5 answers

195 views

RadWindow attributes

hi everyone,

i just noticed 1 thing bout this control.
after my radwindow poped up once the next pop of same radwindow it loose the attributes which i defined..

any kind of help would be appreciated..

thanks in advance

regards
webster

Window

answered on 04 Apr 2012

1 answer

101 views

RadFilter javascript error

Hi,

I hav a RadFilter in a RadWindow being used to filter a RadGrid. The grid can have upto about 80 columns visible in it but generally the users have about 20 at any one time. When the user selects the RadFilter and adds predicate to the filter this works ok, but when the user clicks on the drop down in the filter to select the actual column they want to filter on from the 80 or so potentials, as soon as the mouse moves from hovering over one column to hovering over another we get a javascript error inside the telerik javascript code at line 8900 (while(k.get_level()>0))

The debugger says that k (an object of type RadContextMenu I guess) does not have a method of get_level

if(!m||j==m||$telerik.isDescendant(j,m)){return true;

}if(this._childrenDetached&&$telerik.isDescendant(l.get_parent()._getAnimationContainer(),m)){return true;

}if(this._scroller&&l.get_level()>0&&!$telerik.isDescendant(this.get_element(),m)){var k=l;

while(k.get_level()>0){k=k.get_parent();

}this._onItemMouseOut({eventMapTarget:k.get_element(),eventMapRelatedTarget:m});

}if(l._state==a.RadMenuItemState.Closed||l._state==a.RadMenuItemState.AboutToClose){return true;

}if(l._state==a.RadMenuItemState.AboutToOpen){l._clearTimeout();

l._state=a.RadMenuItemState.Closed;

l.get_parent()._openedItem=null;

return true;

The list of columns is obviously implemented as RadContextMenu and because we have so many columns we have made the change mentioned elsewhere in the forum to add AutoScroll and setting the height of area to 300px but I don't suppose this makes any difference.

What can I do to fix this as it makes it impossible for the user to select any column other the first one in the list.

Stuart

Filter

answered on 04 Apr 2012