Grid ClientDetailTemplate calling server action to return partial view

4 posts, 0 answers
  1. daniel
    daniel avatar
    5 posts
    Member since:
    Feb 2011

    Posted 17 Mar 2018 Link to this post

    Hi,

    We have a grid with a detail template containing a tabstrip - much like the demo at https://demos.telerik.com/aspnet-mvc/grid/detailtemplate .

    Three tabs got their content from calling controller actions which returned different Partial views.

    We do not need to show multiple tabs now - we only need to show one so do not need the tabstrip control.

    How can we keep the same method of getting the detailtemplate content from a controller action partialview without the tab strip?

    The data is a single model - not a listing - so not suited to a grid or listview.

    Many Thanks.

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 20 Mar 2018 Link to this post

    Hello, Daniel,

    We have a forum post on the same subject which can be helpful:

    https://www.telerik.com/forums/detail-template-and-partial-view

    The main point is to make an Ajax request to the Controller action which will return the partial view on the detailInit event of the Grid and then apply that content to the container DOM element which is set in the "ClientDetailTemplateId".

    Please let me know if you need more details on this matter.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Stephen
    Stephen avatar
    5 posts
    Member since:
    Dec 2018

    Posted 07 Jan 2020 in reply to Stefan Link to this post

    Hi,

    I effectively have the same question, and I think the linked forum post was a bit too 'high-concept' for me to follow. Could you share an example of how I could render the results of a PartialView call without using a TabStrip?

  4. Nikolay
    Admin
    Nikolay  avatar
    264 posts

    Posted 09 Jan 2020 Link to this post

    Hello Daniel,

    I have prepared an example illustrating how loading a PartialView in a Kendo Grid could be done on a DetailInit event and placed in the detail template:

        <script type="text/x-kendo-template" id="template">
           <div class="loadPartial"></div>
        </script>
    
    @(Html.Kendo().Grid<Sample.Models.OrderViewModel>()
    	.Name("grid")
            .ClientDetailTemplateId("template")
            .Events(ev=>ev.DetailInit("onDetailInit"))
            ...
    
    <script>
        function onDetailInit(e) {
            $.ajax({
            url: "/Home/MyCustom",
            method: 'GET',
            success: function (result) {
                e.detailCell.find(".loadPartial").html(result);
            }
        });
        }
    </script>

    Let me know if you have any questions.

    Regards,


    Nikolay
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top