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?

Hello,

I would like to fire click Event when already selected tab item is clicked. Looks like OnSelect doesnt get fired if the selected item is clicked again. I tried implementing JavaScript but doesnt get fired

$(function () {
$("#tbAdress .k-tabstrip-items").on("click", "li.k-state-active", function () {
//custom logic
});
});

 

here is my layout

@(Html.Kendo().MobileLayout()
.Name("mobile-tabstrip")
//.Header(obj => NavBarTemplate(this))
.Header(
@<text>
@Menumobile()
</text>
)
.Footer(
@<text>
@(Html.Kendo().MobileTabStrip()
.Name("tbAdress")
.SelectedIndex(999)
.Events(events => events
.Select("onTabSelect")
)
.Items(items =>
{
                   
                    items.Add().Text("Objekt").HtmlAttributes(new { @data_icon = "home" });
items.Add().Text("GoogleMaps").HtmlAttributes(new { @data_icon = "gps-e" });
})
)
</text>)
)

 

How can i achieve this

 

-Anamika

I am trying to fire an action every time a mobile tabstrip item is selected and not just the first click. This is very common for refreshing the current view or scrolling back to the top on apps like Twitter that are an endless scrolling list. 

data-select="onSelect" only fires when the item is inactive (first time) and data-click="onClick" which I saw here in the forums does nothing nor is it in the api docs (deprecated maybe?). 

I tried simply using jQuery to get (#tabstrip a).click() and then reset the scroller of the current view but this would only fire on subsequent clicks (not the initial) and it wasn't working right on my phone, only in the simulator. 

Please advise on the best way to do this?

Can we use the mobile mvc tabstrip with web?
I cant seem to get any css on my tabstrip

Also when initializing tabstript this messes up bootstrap menu, menu now covers page content.
Where am I going wrong,
Thanks


   

I've seen some of the documentation regarding how to create custom icons for Kendo UI Mobile, but can someone please give me an example of how it is applied to the MobileTapStrip in ASP.NET MVC?

Here's what I've tried so far:

<style>
    .km-root .km-pane .km-view .km-home1
    {
        background-image: url("/Images/Icons/home1.png");
    }
</style>

@(Html.Kendo().MobileLayout()
    .Name("mobile-main")
    .Footer(
        @<text>
            @(Html.Kendo().MobileTabStrip()
                .Items(items => {
                    items.Add().Icon("home1").Text("Home").Url("#view-home");
                    items.Add().Icon("cart").Text("Purchases").Url("#view-purchases");
                    items.Add().Icon("bookmarks").Text("Reports").Url("#view-reports");
                })

            )
        </text>
    )
)

OK, I've figured it out:

@(Html.Kendo().MobileLayout()
    .Name("mobile-main")
    .Footer(
        @<text>
            @(Html.Kendo().MobileTabStrip()
                .Items(items => {
                    items.Add().Icon("home1").Text("Home").Url("#view-home");
                    items.Add().Icon("purchases").Text("Purchases").Url("#view-purchases");
                    items.Add().Icon("reports").Text("Reports").Url("#view-reports");
                })

            )
        </text>
    )
)

CSS:

.km-root .km-pane .km-view .km-icon {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
}

.km-home1 {
    -webkit-mask-box-image: url("/Images/Icons/home1.png");
    background-color: red;
}

.km-purchases {
    -webkit-mask-box-image: url("/Images/Icons/money.png");
    background-color: red;
}

.km-reports {
    -webkit-mask-box-image: url("/Images/Icons/documents.png");
    background-color: red;
}