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

AJAX Mobile Views refresh on tabstrip click

3 Answers 27 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
bUb
Top achievements
Rank 1
bUb asked on 14 Dec 2017, 10:21 PM

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?

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 18 Dec 2017, 12:54 PM
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.
0
bUb
Top achievements
Rank 1
answered on 18 Dec 2017, 03:50 PM

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>
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 20 Dec 2017, 09:30 AM
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.
Tags
TabStrip (Mobile)
Asked by
bUb
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
bUb
Top achievements
Rank 1
Share this question
or