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

ToolTip For RadDatePicker

3 Answers 236 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Biao
Top achievements
Rank 1
Biao asked on 29 Mar 2015, 11:42 PM
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





3 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 30 Mar 2015, 09:09 AM

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.

 
0
Biao
Top achievements
Rank 1
answered on 31 Mar 2015, 02:53 AM
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 
0
Biao
Top achievements
Rank 1
answered on 31 Mar 2015, 03:27 AM
Hi Marin, Forget my previous post, I fixed the problem,

thanks for the help.
Jin
Tags
ToolTip
Asked by
Biao
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Biao
Top achievements
Rank 1
Share this question
or