Kendo tooltip loading content with AJAX not showing content

3 posts, 1 answers
  1. Huy
    Huy avatar
    12 posts
    Member since:
    Jun 2012

    Posted 04 Nov 2014 Link to this post

    I tried to implement a tooltip on this Telerik site : http://demos.telerik.com/aspnet-mvc/tooltip/ajax

    This is my script code on cshtml page:

    @(Html.Kendo().Tooltip()
    .For("#grOrders")
    .Filter("td a")
    .LoadContentFrom("ToolTipCustomer", "Home")
    .Position(TooltipPosition.Right)
    .Width(200)
    .Height(150)
    .Events(events => events.RequestStart("requestStart"))
    )

    Event requestStart:

    function requestStart(e) {
        e.options.data = {
            id: e.target.data("id")
        }
    }

    And controller:

    public ActionResult ToolTipCustomer(int id)
        {
            Customers objCustomer = new Customers();
            DaCustomers db = new DaCustomers();
            objCustomer = db.GetCustomerById(id);
            StringBuilder str=new StringBuilder();
            str.Append("<div style='text-align:left;'>");
            str.Append("<p>" + objCustomer.Name + "</p>");
            str.Append("</hr>");
            str.Append("<p>Address: " + objCustomer.Address + "</p>");
            str.Append("<p>Telephone: " + objCustomer.Phone + "</p>");
            str.Append("<p>Email: " + objCustomer.Email + "</p>");
            str.Append("</div>");
            ViewBag.Title=str;
            return PartialView();
        }

    And result is: when i hover tag a, tooltip not showing any content, when i debug, method TooltipCustomer get parameter "id" and return StringBuilder exactly, don't know where i am going wrong, please help me.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Nov 2014 Link to this post

    Hello Huy,

    Are you actually using the ViewBag.Title value in the partial view markup? You have to render it somewhere in the code of the View, as it will not be served to the client automatically.

    Our "Loading content with AJAX" example uses a details.cshtml partial view, which you can see in the offline ASP.NET MVC demo site, which is shipped in the UI for ASP.NET MVC installation. The partial view code looks like this:

    <div class="dairy-details">   
        <img src="@Url.Content("~/content/web/foods/200/")@(ViewBag.id).jpg" alt="@ViewBag.Title" />
        <h3>@ViewBag.Title</h3>
    </div>

    In case you are not familiar with ViewBag and how it works, I recommend you to get to know it, as it will be useful for your general ASP.NET MVC knowledge.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Huy
    Huy avatar
    12 posts
    Member since:
    Jun 2012

    Posted 06 Nov 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Thank you for your reply, i'm a new in Kendo and MVC so i try to learn it but your demo site about kendo tooltip have not in partial view, that is really difficult to me.

    REgards,
    Huy
Back to Top