Questions on Kendo UI for jQuery Forum

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

ActionSheet

Application

AutoComplete

Hierarchical Data Source

answered on 15 Jun 2022

2 answers

72 views

Navigate to SplitView from View

Hi, I'm trying to use a SplitView within a layout in a mobile application. I'm using MVVM.

I've defined the splitview in the html body, outside of any layouts or other views. The application starts by loading a basic layout and view It then navigates to different views based on data entered.

Can I use my main layout as the layout for the splitview in addition to the starting view, and other standard (non-split) views?

Does the splitview need to contain its own layout for each pane?

I can't directly navigate to "v_bill_splitview" as the page appears blank. I need to go through another basic view which navigates to the splitview when a tabstrip link is clicked - once the splitview layout is displayed, the content is still blank.

Any thoughts / guidance? Thanks.

Example structure:

<body>

<div data-role="layout" id="l_layout" data-id="l_layout" style="display:none;">
<section data-role="content"></section>
</div>


<div id="v_loader" data-role="view" data-layout="l_layout" data-show="onShow" style="visibility:visible">
<div class="center">
<p>
<object data="logo.svg" type="image/svg+xml">
<img src="logo.png"/>
</object>
</p>
<p>
Loading...
</p>
</div>
</div>


<div data-role="layout" id="l_main" data-id="l_main" style="display:none">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-click="l_main_homeOnClick" data-align="left">
<img src="logo.png" style="height: 1.8em; width: 1.8em;"/>
</a>
<span data-role="view-title"></span>
</div>
<div style="text-align: center;">
<img src="../img/logo.png" style="max-height:25px; text-align:center"/>
</div>
</header>
<section data-role="content"></section>
</div>


<div data-role="view"
id="v_search"
data-id="v_search"
data-layout="l_main"
data-model="app.models.search_criteria"
data-title="title"
style="display:none">

<ul data-role="listview">
<li>
<label>Test
<input type="text" class="km-text"/>
</label>
</li>
<li>
<label>Test2
<input type="text" class="km-text"/>
</label>
</li>
</ul>
<hr/>
<ul data-role="listview" data-bind="source: dataSources.types" data-template="tpl_types"></ul>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<a data-role="button"
data-bind="events: { click: events.searchClick }"
data-icon="search">
Search
</a>
</div>
</div>
</div>
</div>

<div data-role="splitview"
id="v_bill_splitview"
data-id="v_bill_splitview"
style="display:none"
data-layout="l_bill"
data-style="vertical">



<div data-role="pane" style="-webkit-box-flex: 4" id="main-pane" data-layout="l_bill2">


<div data-role="layout" data-id="l_bill2">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<a data-role="button" data-click="l_main_homeOnClick" data-align="left">
<img src="track_trace_logo.png" style="height: 2em; width: 2em;"/>
</a>
<span class="l_bill_title">Freight Bill 2</span>
</div>
</header>
</div>

<div data-role="view" data-title="Main Pane">
Main pane Initial view
</div>

<div data-role="view" data-title="Main Pane Bar View" id="main-bar" data-show="collapseSidePane">
Main pane Bar view
</div>
</div>

<div data-role="pane" data-initial="#view1">
<div data-role="view" id="view1" data-id="view1" data-title="Side Pane">
<h3>view1</h3>
<a data-role="button" data-target="main-pane" href="#main-bar">Bar (Main pane)</a>
</div>
</div>
</div>

SplitView

answered on 01 Aug 2017

10 answers

252 views

Is SplitView collapsible?

Hi,
Can the mobile SplitView be made collapsible?
Is it possible to define the splitview to be collapsed by default and show when a Menu button in the nav bar is touched?
The idea is to use SplitView for collapsible side menu with a list of menu options.

Or if there is a better kendo mobile widget that can be used to define a collapsible left side menu.
Please let me know.

Thanks.
B.Manohar

SplitView

answered on 23 Feb 2017

2 answers

32 views

Auto navigate the side root

Hi there,

I've tailored the splitview demo on the Kendo UI demo site.

Prior to the splitview view displaying, I have an initial view asking for some information including what default category the user is interested in.

I'm looking for a solution where I can automatically navigate the user to their selected category. I.e. #side-inbox?CategoryID=15

This is effectively mimicking the user navigating to the split view and clicking on category 15. I will still give them a facility to go "back" so they can look at the contents of other categories.

I've done the easy bit of navigating to the splitview using app.navigate("#splitview"); but I'm struggling to fire the default category.

See extract of categories view on left side of the splitview:

<div data-role="view" data-title="Categories" id="side-root" data-use-native-scrolling="true">
<ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate">
</ul>
</div>

<script id="categoriesTemplate" type="text/x-kendo-template">
<a href="\#side-inbox?CategoryID=#: CategoryID#" data-icon="mostviewed"><span class="daysfont">#: CategoryName #</span></a>
</script>

Appreciate any help,

Thanks

SplitView

answered on 26 Jul 2016

3 answers

79 views

Collapsible and Splitview

Hi,

I have tried to use collapsible inside a splitview but it was failed. Is it possible to do?

Thank you.

SplitView

answered on 24 Nov 2015

5 answers

111 views

Using SplitView layout

I've been developing a phonegap application using Kendo and overall the result has been pretty good. I've been focusing on just phone screen size, but now I'm adapting it to tablet, meaning that on some cases where there's a listview that goes to a details view, I'd like to use a SplitView to make a better use of the screen size on a tablet device.

I've developed all my screens as remote views, each one in its separate html file and each one is bound to its own viewmodel.

That being said, now I'd like to reuse my existing views in a splitview layout, but it hasn't been as easy as I thought it would be (or I haven't found the correct documentation/examples). All examples I've seen are very basic and just use a couple of views, all defined in the same file.

In a real world application, that's most likely not the case and you'll have quite a few screens that you can navigate to and that you cannot have all of them in the same file if multiple developers are working on the same app.

Issues I've found so far:

Pane navigation doesn't work as one would expect in the details pane. If the details pane screen tries to navigate to another view, the whole page navigates to that view, not just the details pane. Is there a configuration option at the pane level for this?
Another pane navigation issue. From the master pane (left side), if you select an item from a listview and use pane.navigate to display the view in the details pane, the onShow event handler for the detail view is only called once and then it's never called again. Transitions stop working too.
Loading remote views using pane.navigation breaks the view layout for some reason. I'm using the android theme which has the navigation bar at the bottom of the screen, but when I load the views in the splitview pane the navigation is shown at the top.

I've stopped developing the split view at the moment as I've found myself writing a lot of hacky code to bypass this limitations.

This could actually be a showstopper for using your framework in my application.

Are the issues I mentioned solvable? Am I missing something?

SplitView

answered on 29 Jun 2015

14 answers

124 views

Clicking a link to an external view is loaded only once

I have a SplitView with links in the left pane. All links are pointing to one external view, which is called with different parameters at the URL, so the response is always another one.

When you take the HTML code below, you will see, that the external view site is loaded only once, not taking care about the URL parameters given. Can I disable this external view load caching?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WG4 - Online visualization</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>


<div id="home" data-role="splitview" data-layout="default">
<div data-role="pane" data-layout="side-default" data-transition="slide">
<div data-role="view" data-title="WG4 - Online visualization" id="side-root">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Cluster View
<ul>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Coal  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a15635%2c%22ActualPower%22%3a6257%2c%22GaugeValue%22%3a40.019187719859290054365206268%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
6257 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas BeNeLux  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a10238%2c%22ActualPower%22%3a5227%2c%22GaugeValue%22%3a51.054893533893338542684117992%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5227 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas FR & SE  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a8635%2c%22ActualPower%22%3a5363%2c%22GaugeValue%22%3a62.107701215981470758540822235%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5363 MW
</td>
</tr>
</table>
</a>
</li>

</ul>
</li>
<li>Country View
<ul data-role="listview" data-style="inset">
<li>
<a href="/DeviceScaled/CountryMenu?country=Italy" data-role="button">
<table>
<tr>
<td>Italy  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a201%2c%22ActualPower%22%3a128%2c%22GaugeValue%22%3a63.681592039800995024875621891%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
128 / 201 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=BeLux" data-role="button">
<table>
<tr>
<td>BeLux  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a3308%2c%22ActualPower%22%3a1907%2c%22GaugeValue%22%3a57.648125755743651753325272068%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
1907 / 3308 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Netherlands" data-role="button">
<table>
<tr>
<td>Netherlands  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a351%2c%22ActualPower%22%3a231%2c%22GaugeValue%22%3a65.811965811965811965811965812%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
231 / 351 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Germany" data-role="button">
<table>
<tr>
<td>Germany  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a352%2c%22ActualPower%22%3a263%2c%22GaugeValue%22%3a74.715909090909090909090909091%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
263 / 352 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=France" data-role="button">
<table>
<tr>
<td>France  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a146%2c%22ActualPower%22%3a142%2c%22GaugeValue%22%3a97.26027397260273972602739726%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
142 / 146 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Poland" data-role="button">
<table>
<tr>
<td>Poland  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a362%2c%22ActualPower%22%3a309%2c%22GaugeValue%22%3a85.3591160220994475138121547%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
309 / 362 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Spain" data-role="button">
<table>
<tr>
<td>Spain  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a218%2c%22ActualPower%22%3a180%2c%22GaugeValue%22%3a82.56880733944954128440366972%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
180 / 218 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Greece" data-role="button">
<table>
<tr>
<td>Greece  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a100%2c%22ActualPower%22%3a86%2c%22GaugeValue%22%3a86%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
86 / 100 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

</ul>
</li>
</ul>
</div>

<div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">
<ul data-role="listview">
</ul>
</div>

<div data-role="layout" data-id="side-default" data-show="toggleBackButton">
<div data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</div>
</div>

</div>

<div data-role="pane" data-layout="main-default" id="main-pane">

<div data-role="view" data-title="Current state">
<div>
<center>
<div class="gauge-container" style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a35023%2c%22ActualPower%22%3a8597%2c%22GaugeValue%22%3a24.546726436912885817891100134%2c%22Available%22%3a1%7d); width: 90%; height: 20px; margin: 5px">
<center>
<div style="margin:5px; color: darkgray">8597 / 35023 MW</div>
</center>
</div>
</center>
</div>

</div>

<div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">
<div id="product-details">
</div>
</div>

<div data-role="layout" data-id="main-default">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>

</div>

<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">WG4 - Online visualization</div>
</header>
</section>

<style>
.infobox
{
background-color: lightgray;
vert-align: middle;
vertical-align: middle;
horiz-align: center;
mso-horizontal-page-align: center;
}

ul li, div, ul li a
{
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}

#mainView ul li
{
padding: 0 !important;
}

.small-info {
font-size: 9px;
}

ul li table tr, ul li table tr td, ul li table tr * {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
</style>

<script src="/Scripts/jquery-1.8.2.js"></script>

<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>

<script>
window.app = new kendo.mobile.Application(document.body,
{
transition: 'fade'
});
</script>

</body>
</html>

SplitView

answered on 22 Jan 2015

5 answers

109 views

Scrolling Issue

I'm encountering problems with scrolling a ListView inside a SplitView. Sometimes it works, sometimes it scrolls incomplete, sometimes it doesn't scroll. This can also be seen in the SplitView mobile demo (using iPad mini on iOS 8.0.2). Is this a known issue? Thanks.

SplitView

answered on 09 Oct 2014

1 answer

35 views

Loading new views in the main-pane when clicking a link in the left frame

Hello,

im new in mobile HTML5 development. Im trying to use the split view. When now a link is clicked on the left pane, I just want to load a new view in the left pane and additional load another view on the main pane. How can I realize that?

SplitView