AJAX Mobile Views refresh on tabstrip click

4 posts, 1 answers
  1. bUb
    bUb avatar
    7 posts
    Member since:
    Mar 2017

    Posted 14 Dec 2017 Link to this post

    I have set up a asp.net MVC web app and in the layout.cshtml I set a mobilelayout and mobiletabstrip.  The mobile application's server navigation has been set to false, so that the partial views are obtained from the controller via ajax but they are only gotten once (never refreshed).  I have set a couple of events on the view for before show and was thinking that I could go and grab the latest partial view from the controller here.

    Is this process a good idea or is there a better way?

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1011 posts

    Posted 18 Dec 2017 Link to this post

    Hi,

    As far as I can understand, you need to request the view from the server each time the user navigates to that view. If this is the case, I could suggest you to purge the view, that is being unloaded by handling the Layout.hide event in the following way:
    <div data-id="examples" data-role="layout" data-show="showDemoLayout" data-hide="removeView">

    and:
    function removeView(e) {
        if (!e.view.element.data("persist")) {
            e.view.purge();
        }
    }

    In case the above does not suite your needs, I would like to ask you to send us a small isolated runnable sample, which replicates your scenario. This way we will be able to review the case locally.

    Regards,
    Veselin Tsvetanov
    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. bUb
    bUb avatar
    7 posts
    Member since:
    Mar 2017

    Posted 18 Dec 2017 in reply to Veselin Tsvetanov Link to this post

    I added an event to the layout and the results are the view displays without layout's footer of the tabstrip

     

    <body>
            @RenderBody()
     
            <!--Layout-->
            @{Html.Kendo().MobileLayout()
                .Name("TabstripLayout")
                .Events(events=>events.Hide("removeView"))
                .Header(() =>
                    Html.Kendo().MobileNavBar()
                        .Content(navbar => @<text> @navbar.ViewTitle("") </text>)
                        .Render()
                )
                .Footer(@<text>
                    @(Html.Kendo().MobileTabStrip()
                        .Name("Tabstrip")
                        .Events(events => events.Select("onSelect"))
                        .Items(items => {
                            items.Add().Icon("home").Text("Index").Url("Index", "Home");
                            items.Add().Icon("about").Text("About").Url("About", "Home");
                            items.Add().Icon("contacts").Text("Contact").Url("Contact", "Home");
                        }))
                </text>)
                .Render();
            }
     
            @(Html.Kendo().MobileApplication()
                .ServerNavigation(false)
                .PushState(true)
                .Layout("TabstripLayout")
            )
     
            <script>
                 
                function removeView(e) {
                    if (!e.view.element.data("persist")) {
                        e.view.purge();
                    }
                }
            </script>
     
        </body>
  4. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1011 posts

    Posted 20 Dec 2017 Link to this post

    Hello,

    Thank you for the snippet sent. You are right that in such scenario the header and the footer of the MobileView will also be purged from the application.

    To avoid that issue, I would suggest you to configure the views with their Reload(true) option enabled:
    @(Html.Kendo().MobileView()
        .Title("Home Page")
        .Name("Index")
        .Reload(true)
        .Content(@<text>
    ..........

    Attached you will find a small sample implementing the above suggestion.

    Regards,
    Veselin Tsvetanov
    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.
Back to Top