ToolTip For RadDatePicker

4 posts, 1 answers
  1. Biao
    Biao avatar
    4 posts
    Member since:
    Mar 2015

    Posted 29 Mar 2015 Link to this post

    Hi, 
    I currently experiencing one problem for change the toolTip property of RadDatePicker control 

    code as follows:
    <telerik:GridTemplateColumn HeaderText="<%$ Resources:WebUIResources, I18N_Date %>" UniqueName="DateOfAttendance" DataField="DateOfAttendance" SortExpression="DateOfAttendance" Groupable="False">
                    <ItemTemplate>
                        <%# String.Format("{0:ddd}", Eval("DateOfAttendance")) + " - " + String.Format("{0:d}", Eval("DateOfAttendance")) %>
                    </ItemTemplate>
                    <EditItemTemplate> 
                        <telerik:RadDatePicker ID="DateOfAttendance" runat="server" DbSelectedDate ='<%# Bind("DateOfAttendance") %>'  SkipMinMaxDateValidationOnServer="True"  MinDate="1800-01-01" MaxDate="9999-12-31" Width="100%" />
                        <telerik:RadToolTip ID="DateOfAttendance_RadToolTip" runat="server" IsClientID="true"     TargetControlID="DateOfAttendance_wrapper" Text="show tooltip" ShowEvent="OnMouseOver">
                       </telerik:RadToolTip> 
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>  But mouse over on the RadDatePicker, the display content still the default one, seems RadToolTip is not working. anyone can Help? all the controls inside teleGrid Control





  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 30 Mar 2015 Link to this post

    Hello,

    When in a databound container, controls get their IDs changd by the framework, so the date picker does not have the ID hardcoded in the tooltip settings. You must acccess its ClientID in order for the tooltip to target it as expected. Here is a basic example:

    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView>
            <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                <telerik:GridTemplateColumn Groupable="False">
                    <ItemTemplate>
                    some item template
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadDatePicker ID="DateOfAttendance" runat="server"  SkipMinMaxDateValidationOnServer="True" MinDate="1800-01-01" MaxDate="9999-12-31" Width="100%" />
                        <telerik:RadToolTip ID="DateOfAttendance_RadToolTip" runat="server" IsClientID="true" Text="show tooltip" ShowEvent="OnMouseOver">
                        </telerik:RadToolTip>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem editableItem = e.Item as GridEditableItem;
            RadDatePicker picker = editableItem.FindControl("DateOfAttendance") as RadDatePicker;
            RadToolTip ttip = editableItem.FindControl("DateOfAttendance_RadToolTip") as RadToolTip;
            ttip.TargetControlID = picker.ClientID + "_wrapper";
        }
    }

    You can read more on the ways to access/modify controls in the grid rows in the following article: http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html.

    If you want to also remove the built-in tooltip form the button of the date picker, you can use a simple script like this to your page:

    <script>
        if($telerik && $telerik.$)
            $telerik.$(".noButtonTooltip .rcCalPopup").attr("title", "");
    </script>
    where the first class is something you can add to a particular picker instance so the script above does not affect all pickers on the page:

    <telerik:RadDatePicker CssClass="noButtonTooltip" ID="DateOfAttendance" runat="server" SkipMinMaxDateValidationOnServer="True" MinDate="1800-01-01" MaxDate="9999-12-31" Width="100%" />


    Regards,

    Marin Bratanov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Biao
    Biao avatar
    4 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 in reply to Marin Bratanov Link to this post

    Hi Marin,

    thanks for the reply, but I had other problem, as the gridview row could be added, 
    in the edit mode, mean I click a button and new row created,  all these happened not post back to server, and I dont want to postback, the datapicker inside the new row I cannot set the tooltip. I need use jquery selector to locate this new datepicker element and set the title attribute to something else. 

    is there any other way could do this easier? in this page we have multiple gridview as well. Cheers Jin 
  5. Biao
    Biao avatar
    4 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 in reply to Marin Bratanov Link to this post

    Hi Marin, Forget my previous post, I fixed the problem,

    thanks for the help.
    Jin
Back to Top