Tooltip with passing object to Controller action

8 posts, 1 answers
  1. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 02 Dec 2013 Link to this post

    Hi All

    How to pass object to controller action through LoadContentFrom method or is there any alternative option to pass object to controller action.

    Right now I am able to pass the string value to controller action but I want to pass the @model.ClientInfo object to  action from controller.

    So please help me how do I achieve this scenario. Here is my all code.
     

    @model ViewModel

    <div class="f-group">

        <div>
            <ul id="Section">
                <li><a class="Tooltip" href="#" data-id="Client1">@Model.Client1.Name</a></li>
                <li><a class="Tooltip" href="#" data-id="Client2">@Model.Client2.Name</a></li>
                <li><a class="Tooltip" href="#" data-id="Client4">@Model.Client3.Name</a></li>
                <li><a class="Tooltip" href="#" data-id="Client4">@Model.Client4.Name</a></li>
            </ul>
        </div>

        @(
             Html.Tooltip()
            .For("#Section")
            .Filter("a")
            .LoadContentFrom("LoadPopup", "Client")
            .Position(TooltipPosition.Bottom)
            .Width(250)
            .Events(events => events.RequestStart("requestStart").Show("showTooltip"))
         )

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

    function showTooltip() {
        this.refresh();
    }
    </div>

      public ActionResult LoadPopup(ClientInfo baseModel)
            {
                return this.PartialView("_ClientPopup", baseModel);
            }
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Dec 2013 Link to this post

    Hello,

    Should the same object be sent for each target? If yes, then you could pass it as route value:
    .LoadContentFrom("LoadPopup", "Client", Model.ClientInfo)
    Otherwise, you should use the same approach and add the other needed values to the elements so that they can be retrieved in the requestStart handler and added to the data.

    Regards,
    Daniel
    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. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 04 Dec 2013 Link to this post

    Hi Daniel,

    Thanks for your reply

    Should the same object be sent for each target? No , I want to pass the different Object for each target.

    Can you help how to pass other needed values to the element and how to add to the Data.



    Thanks-
    Atul
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Dec 2013 Link to this post

    Hello again,

    The principal is the same e.g.
    <li><a class="Tooltip" href="#" data-id="Client1" data-name="@Model.Client1.Name" data-otherfield="@Model.Client1.OtherField">@Model.Client1.Name</a></li>
    function requestStart(e) {
        e.options.data = {
            id: e.target.data("id"),
            name: e.target.data("name"),
            otherfield: e.target.data("otherfield")
        };
    }


    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 04 Dec 2013 Link to this post

    Hi Daniel,

    I have around 20 field in the ClientInfo object,  I think this is not good solution to pass all field like this.

    So is it possible to pass the entire object in the field

    data-clientInfo="@Model.Client1"

    I tried but I am getting null in the Action.

    So can you suggest some good approach to implement this.

    Thanks-
    Atul
  7. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Dec 2013 Link to this post

    Hello,

    It is possible to pass the entire object by serializing it to JSON e.g.
    <li><a class="Tooltip" href="#" data-clientinfo='@(Html.Raw(Json.Encode(Model.Client1)))'>@Model.Client1.Name</a></li>
    e.options.data = e.target.data("clientinfo");

    By default the object ToString method will be called so the data will not be available.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 19 Jan 2014 Link to this post

    Hi Daniel,

    Now I have added anchor tag in template for List View and tried same thing , but I am getting object value like data-clientinfo=[object object]

    Here is Kendo template code

    <script type="text/x-kendo-tmpl" id="template">
    <div class="product">
         <a class="Tooltip" href="///#" data-clientinfo='@(Html.Raw(Json.Encode("#:ClientInfo")))'>#: Name</a>
    </div>
    </script>

    List View code:
    @(Html.Kendo().ListView<ContactInfo>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .BindTo(Model.ContactInfos)
    )

    Please let me know if I am doing anything wrong.

    Thanks-
    Atul


  9. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Jan 2014 Link to this post

    Hello Atul,

    The method should be used only for data that should be rendered on the server. The listview template is rendered on the client and you should convert the data to JSON via JavaScript in a template expression instead of the server-side Encode method:
    data-clientinfo='#=kendo.stringify(ClientInfo)#'>
    When using a listview you could also get the needed values from the listview item model.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready