Questions on Kendo UI for jQuery Forum

15 answers

2.0K+ views

Grid programmatically select row by DataItem values -- when the item is not on the current grid page.

Hi,

I have a set of kendo widgets displaying the same underlying data.

One is a ListView, the other is a Grid. They have different PageSize.

When I select an item in my ListView, I want my grid to select the same row. I can't seem to figure out how to do this by dataitem.

I get the dataItem from my listView change event -- how can I programatically select the same item in my Grid?

This is fairly simple if both controls have the item on the selected page, but what happens when it is on a different page? How can I page my grid to the page containing my dataItem?

Thanks!
-Matt

Grid

answered on 02 Aug 2017

2 answers

118 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

5 answers

468 views

DropDownList list position offset IE11

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.

DropDownList

answered on 01 Aug 2017

12 answers

1.4K+ views

Scroll position not updating when filter applied and virtual scrolling is enabled

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.

Grid

answered on 01 Aug 2017

11 answers

579 views

Binding to SiteMap with Security Trimming on Roles

Is this functionality supported in the present version? Is Security Trimming available for site maps?

Thanks,

King Wilder

Menu

answered on 01 Aug 2017

4 answers

383 views

Different label for an x or y axis with the Bubble Chart

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

Charts

answered on 01 Aug 2017

1 answer

150 views

Is it possible to cutomize valueTemplate in AutoComplete?

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,

AutoComplete

answered on 01 Aug 2017

6 answers

1.3K+ views

Kendo Grid proper way of clearing a cell content in an event

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?

Grid

answered on 01 Aug 2017

1 answer

94 views

Kendo UI grid with upload action

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.

General Discussions

answered on 31 Jul 2017

1 answer

110 views

Restrict editing through custom editor only

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?

Spreadsheet

answered on 31 Jul 2017