Telerik Forums
Kendo UI for jQuery Forum
1 answer
43 views

Hi

i use Kendo Mobile Tabstrip It doesn't show me any results

dojo tabstrip

result for me

Preview result image

This problem also exists in other kendo mobile controls

pls help me

thank you

 

Martin
Telerik team
 answered on 22 Mar 2023
1 answer
170 views

Dear Team,
I have problem with kendo scheduler agenda view in mobile devices. End time in k-scheduler-timecolumn shows incorrect value (it equals to Start time value). Could you please answer how can I fix it?

Dimitar
Telerik team
 answered on 17 Dec 2021
1 answer
105 views

Hello support,

We are looking for documentation about this demo:

https://demos.telerik.com/kendo-ui/m/index?&_ga=2.87831967.627147470.1612949974-420973595.1604377799#mobile-listview/hierarchical-databinding

And more specific about how to use: hierarchical-listview.

Please let us know if any questions.

Kind regards,

Roel Alblas

Aleksandar
Telerik team
 answered on 12 Feb 2021
5 answers
83 views

Hello everybody,

ref: Kendo Mobile Listview (Scroller): visibleScrollHints

Is it somehow possible to change the visibility of the y-scrollbar at runtime? 

 

Thanks for your help

axel

Petar
Telerik team
 answered on 13 Jul 2020
7 answers
46 views

I've been chasing down an elusive problem for some time now and I've narrowed it to a logic change in the ListViewItemBinder.refresh() method between Kendo UI versions 2015.2.902 and 2015.3.930 (the issue happens on every version since 2015.3.930).  We have a mobile list view that is bound to a data source.  The template for the ListView creates a Touch widget and a tap handler for each list item.  The tap events and event handlers are working just fine, within this tap handler we change several properties on the data items within the DataSource.  The issue is that in v2015.2.902 these property changes cause the ListView to refresh itself and properly reflect those property changes, but in 2015.3.930 the ListView does *not* refresh itself even though the code has not changed on our end.

I finally managed to isolate the issue to a logic change within ListViewItemBinder.refresh() between the two versions, specifically within the first "if" block.  Here's the logic in 2015.2.902:

if (action === "itemchange" && !listView._hasBindingTarget()) {
  item = listView.findByDataItem(dataItems)[0];
  if (item) {
    listView.setDataItem(item, dataItems[0]);
  }
  return;
}

In 2015.2.902, action === "itemchange" resolves to true and !listView._hasBindingTarget()) resolves to false, so this block is skipped.  The code eventually drops to the following if/else if/else blocks and eventually calls the very last "else" block which actually triggers the kendo code that re-executes the template and replaces the HTML content (comment is mine):

if (action === "add" && !groupedMode) {
    var index = view.indexOf(dataItems[0]);
    if (index > -1) {
        addedItems = listView.insertAt(dataItems, index);
        addedDataItems = dataItems;
    }
} else if (action === "remove" && !groupedMode) {
    addedItems = [];
    listView.remove(dataItems);
} else if (groupedMode) {
    listView.replaceGrouped(view);
}
else if (prependOnRefresh && !listView._filter) {
    addedItems = listView.prepend(view);
    addedDataItems = view;
}
else {
    listView.replace(view); // <-- This is where the template is re-executed
}

However, in v2015.3.930, the first "if" block I listed earlier was re-written as follows:

if (action === "itemchange") { // action is indeed "itemchange"
    if(!listView._hasBindingTarget()) { // This evaluates to false
        item = listView.findByDataItem(dataItems)[0];
        if (item) {
            listView.setDataItem(item, dataItems[0]);
        }
    }
    return; // We hit this return statement, thus the "refresh" block is never called
}

As I mentioned in the comments, this logic change causes us to immediately hit the "return" statement and we never drop into the lower if/else if/else block where the template gets re-executed.  My questions then are as follows:

  1. What exactly was the purpose of this change?
  2. Is the scenario I've laid out actually exposing a bug, or is there something that I'm doing incorrectly that I can resolve within my own code?

I've tried to mock up this scenario in the Dojo but as of yet haven't quite been able to do it, hence the long post.  Thanks for taking a look!

Boyan Dimitrov
Telerik team
 answered on 05 Jul 2019
3 answers
67 views
I am trying to implement some crud operations in a mobile listview. I came across this code library: http://www.kendoui.com/code-library/mobile/listview/listview---mvvm-crud-operations.aspx

The problem I'm running into is I am using endless scroll in my listview, so the item that is clicked on to be edited is not always in the datasource of the listview. Are there any examples of CRUD operations with endless scroll enabled on the listview?
Tsvetina
Telerik team
 answered on 14 Aug 2018
1 answer
61 views

Hi,

we have been building an SPA using Vue2 that also will be serves as mobile application (wrapped using Cordova). we need Grouped list item with fixed group header (exactly the same functionality as Mobile Listview - Fixed Header). AFAIK i cannot achieve that using Kendo Listview Vue Wrapper.

is it possible to use Kendo Mobile UI especially Mobile ListView inside of Vue application, because i cannot find any reference about this in telerik documentation & the forum.

Plamen
Telerik team
 answered on 07 Feb 2018
1 answer
978 views

Thought I'd post this for anyone who has a similar issue. And also for kendo staff to see and fix (if it is indeed a bug).

Note: all references to input are in regard to type=checkbox and type=radio, not text input areas

I was adding input boxes to a mobile listview and found that if any tag is added outside of the label tag holding the input, the input doesn't work. It also appears that an input without a label container doesn't seem to function properly either. Whereas a input defined inside a label inside a mobile listview will have extra classes and an ::after appended to it, none of these show up in the case noted in the first sentence of this paragraph. I finally got it to work with a workaround after observing "correctly working" inputs and what kendo injects into the html for those items.

IT policy at my work prevents me from creating a code snippet, so I pasted the code below, which is a modified version of http://demos.telerik.com/kendo-ui/m/index#popover/index:

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
<div data-role="view" data-title="Tag this photo" id="popover" data-use-native-scrolling="true">
    <div data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-rel="popover" href="#popover-people" data-role="button" data-icon="contacts"></a>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
        </div>
    </div>
 
    <div data-role="content" style="text-align: center;">
        <img src="../content/mobile/shared/faces.jpg" />
    </div>
 
    <div data-role="popover" id="popover-people" data-popup='{"height": "20em", "width": "20em"}'>
        <div data-role="view" data-title="People">
            <div data-role="header">
                <div data-role="navbar" class="km-light">
                    <span data-role="view-title"></span>
                    <a data-role="button" data-align="right" data-click="closeParentPopover" data-icon="close"></a>
                </div>
            </div>
            <ul data-role="listview" data-click="clickit">
              <li><label>Isabella Anderson<input type="checkbox" checked="checked" class="km-widget km-icon km-check"></label><span>Test</span></li>
                <li><input type="checkbox" checked="checked"></li>
                <li><label>Linda Anderson<input type="checkbox"></label></li>
                <li><label>Oliver Anderson<input type="checkbox"></label><a></a></li>
                <li><div></div><label>James Williams<input type="checkbox"></label></li>
                <li><label>Barbara Williams<input type="checkbox"></label></li>
            </ul>
        </div>
    </div>
 
    <div data-role="popover" id="popover-location" data-popup='{"width": "20em"}'>
        <div data-role="view">
            <ul data-role="listview" data-click="clickit">
                <li><label>Sydney, Australia <input name="location" type="radio"></label></li>
                <li>New York, USA <input name="location" type="radio"></li>
                <li><input name="location" type="radio"><div>Test</div></li>
            </ul>
        </div>
    </div>
 
    <div data-role="footer">
        <div data-role="navbar">
            <a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Location</a>
        </div>
    </div>
</div>
<script>
    function clickit(e) {
      console.log(e.item.find('input').prop('checked'));
    }
</script>
 
<script>
    var app = new kendo.mobile.Application(document.body, { skin: "nova" });
</script>
</body>
</html>

Note the modified lines in the listviews where I remove labels in a few of them and in others I add random html tags before and after the </label>. It didn't matter if they were empty or had content in them.

I also tried modifying the 'checked="checked"' values via jQuery and also through data-binding with a ternary operator like one of your admins showed in this forum thread: http://www.telerik.com/forums/dynamically-creating-checkbox-listview-doesn-t-allow-selecting. While the value shows to be checked, and a $(elem).prop('checked') will return true/false correctly, the box doesn't show the checkbox when 'checked="checked"' is present in the input element (see the 'clickit' function and 2nd item of listview with checkboxes in the code snippet).

The thing that finally worked was to use jQuery to set the $(elem).prop('checked', true/false) ANDmanually add the classes I note were added automatically to inputs that 'work properly' : km-widget km-icon km-check. Note the very first listview item with checkboxes in the code snippet.

Now the question for staff: Why doesn't kendo automatically add these classes to listview inputs except in cases where it's <label>TEXT<input type="radio/checkbox" /></label> ? Is this a bug? Or if it's intended, why? In more complicated templates, such as the one in my code, it requires workarounds with setting the listview's data-click AND adding those three above classes to all my inputs if they're not exactly in a format that "works" (it also seems all kendo examples of inputs in listviews follow that exact formatting, which leads me to assume this issue is known...just uncommonly crossed upon by users). It's not a big deal once I figured it out, but the time spent wondering what was wrong and stepping through my code and all the possibilities was time consuming.

Or am I just doing things in the most horribly wrong way?

P.S. Out of curiosity, why was there a need to override/prevent the default behavior of the checkbox and radio inputs? Just for aesthetic purposes?

Stefan
Telerik team
 answered on 26 May 2017
4 answers
280 views

How do I grab items beyond the currently defined "$('#listview').data('kendoMobileListView').dataSource.data()"?

I'm writing a feature to do a batch action with selected items of a mobile listview. The kendo.data.Datasource has data loaded in remotely, and we define the following:

serverPaging: true,
pageSize: 10

The schema.total in my test case is 55. Each dataItem has a property 'Select' that has defaultValue: undefined, and is set to true/false defined by whether user selects or de-selects the item on click. I want to avoid having to create a list to hold objects and add/remove items based on whether a user selects/deselects said items, which is why i wanted to just toggle this property back and forth on click. I want the user to be able to scroll through all 55 items and select items as desired. I also want to do a 'select all' feature where the all items on the listview are selected/deselected and also allow individual toggling post 'select/de-select all' with the same 'Select' property modification in mind. Then only when the user selects to do the batch action, detect all dataItem's Select value and send those items to the function that handles the batch action.

My observations (correct me if I'm wrong):

(var dataItemList = $('#listview').data('kendoMobileListView').dataSource.data() for the purpose of brevity)

1)  dataItemList is redefined every 1/2 pageSize. So initial list is dataItemList[0] thru dataItemList[9], then next time it is defined (the return value of $('#listview').data('kendoMobileListView').dataSource.data()), it's dataItemList[5] thru dataItemList[14] (obviously where dataItemList[5] is at index 0 and dataItemList[14] is at index 9 of the new list), and so on...

2) property modifications of an item in dataItemList are retained, even after dataItemList is redefined. This leads me to believe all items in the datasource are saved somewhere and I just don't know how to access it. For example if i set dataItemList[0].Select = true, then scroll to a point on the list where dataItemList[0] isn't on dataItemList, then scroll back (so I can read it's properties), dataItemList[0].Select == true versus the default 'undefined' value.

3) I can save items to a manually generated object with key-value pair and use the key to remove or add the object to the list when a click is detected, or if the 'select all' button is clicked, load in new items to the list with itemChange event, but this will be a clumsy implementation at best for the manual select/deselect functionality post-'select all' for items outside of ones currently represented by dataItemList.

To clarify on my question:

I want to access those dataItems on the kendoMobileListView that aren't returned by dataSource.data(), but I have to keep virtual scrolling and the datasource is loaded from a remote source. Is this possible? If so, how?

Let me know if you need further clarification/example. Thanks in advance.

Gary
Top achievements
Rank 1
 answered on 24 May 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?