Telerik Forums
Kendo UI for jQuery Forum
2 answers
156 views

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>
<!-- Loader Layout -->
<div data-role="layout" id="l_layout" data-id="l_layout" style="display:none;">
<section data-role="content"></section>
</div>

<!-- View Loader -->
<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>

<!-- Main Layout -->
<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>

<!-- View Search Criteria -->
<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">

<!--data-portrait-width="200"-->


<div data-role="pane" style="-webkit-box-flex: 4" id="main-pane" data-layout="l_bill2">
<!--<div data-role="layout" data-id="l_bill2">
<div data-role="header">
<div data-role="navbar">
<a id="side-pane-button" data-role="button" data-align="left" data-click="expandSidePane">Side</a>
<span data-role="view-title"></span>
<a data-role="button" data-align="right" href="#bar">Bar</a>
</div>
</div>
</div>-->

<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>

Shaun
Top achievements
Rank 1
 answered on 01 Aug 2017
5 answers
514 views

Hey team,

for IE11 specifically, works as intended in Chrome.

Experiencing the situation where when on a page, if the page needs a scrollbar to scroll for content, and you have scrolled any amount down the page, and you try to open dropdown options, the dropdown list position seems to be relative to the bottom of the page instead of being "attached" to the bottom of the dropdown div.

 

Appearance like the attachment of the post below:

http://www.telerik.com/forums/kendo-drop-down-list-positioning-issue-on-scroll-of-the-page

 

I've seen a handful of posts in 2012/2014 seeming to pertain to the same issue, but was hoping for an updated status.

I believe we are using the 2017 release and jquery 2.2 which I believe are compatible.

Ivan Danchev
Telerik team
 answered on 01 Aug 2017
12 answers
1.6K+ views
Hi,

I have a grid which is bound to client side data. I use pagesize and virtual scrolling to help with performance (more content in prod).  I am seeing an issue with the scroll position not adjusting when a filter is applied that results in less records.

I have a plunker showing the symptom, to reproduce:

Firstly scroll to bottom of the grid. 
Then apply a filter to 2011 column of greater than 10000.
Now take notice when you scroll back up the grid, the rows are not changing.
Basically the grid has reset its data page position to the first page, but the scroll bar has not updated.

http://plnkr.co/edit/ZD7MDW?p=preview


Also the same thing happens when I apply a new set of data (that has less records) to the dataSource.data() method and the scroll position is at the bottom.
Larry
Top achievements
Rank 1
 answered on 01 Aug 2017
11 answers
696 views
Is this functionality supported in the present version?  Is Security Trimming available for site maps?

Thanks,

King Wilder
Ianko
Telerik team
 answered on 01 Aug 2017
4 answers
491 views
The Bubble chart uses xField and yField and they must be numeric values to work. If I try to use a non numeric value, the chart doesn't render. Is it possible to have Something like this:



xField = id



id, description

1, A

2, B

3,C

4,D



I want A, B, C, D and not the id, but I need to use the id at the xField for the Bubble Chart to render



Is it possible even though using id as the x field, to NOT display the id value on the xAxis and show the related description instead with the Bubble Chart?



I've tried using #= dataItem.description # as the label template but it throws an exception



Data is returned back in JSON format.



Thanks







Dimo
Telerik team
 answered on 01 Aug 2017
1 answer
178 views

I have a dropdown component that allows me to customize the value template of the selected entry, however in autocomplete the same property valueTemplate does not work, I haven't found anything about this property at the docs, is this feature allowed? Should I create a a custom property that concats the values of there is a feature for that?

Att, 

Ivan Danchev
Telerik team
 answered on 01 Aug 2017
6 answers
1.3K+ views
In my save event of Kendo Grid, I'd like to clear the content of the cell being saved based on a condition.

var SALE_01_DIV_GRID = $("#SALE_01_DIV_GRID").kendoGrid(
{
   columns: [
   { title: "SAP Code", field: "SAP_CD" }
   ...
   ...
   ,save: function(e)
   {
       var editedIndex = $("#SALE_01_DIV_GRID tr.k-grid-edit-row").index();

       if(!isSapCodeValid(e.values.SAP_CD)) {
       this._data[editedIndex].SAP_CD = ""; //Doesn't Work
     }

   }
});

For some reason, setting the data of the cell I'd like to be cleared to an empty string doesn't do the job. I'm assuming this is because the save event is propagated to a different place and resetting the cell content.What's the proper way of clearing a cell within an event like this?
Curt Rabon
Top achievements
Rank 1
Veteran
 answered on 01 Aug 2017
1 answer
114 views

Hi ,

I need to use Kendo UI grid with group  header rows with check boxes.

and my grid should have upload button column for rows .

I am getting data source from SQLserver.

Can you please share code for this.

Thanks.

Preslav
Telerik team
 answered on 31 Jul 2017
1 answer
158 views
Is it possible to restrict editability of a cell to be only through the custom editor?  I tried to disable the cell, but that causes the custom editor to not show up at all.  Is it possible to disable in cell editing, but allow custom editor editing?
Nencho
Telerik team
 answered on 31 Jul 2017
4 answers
231 views
Generally speaking, is it just as performant to apply formatting and validation settings cell by cell, or is it better to apply it by range? Or are they functionally the same and there wouldn't necessarily be an operational performance difference?
Veselin Tsvetanov
Telerik team
 answered on 31 Jul 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
ContextMenu
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?