Telerik Forums
Kendo UI for jQuery Forum
2 answers
245 views
hello there!
i have 3 views "menu", "details" and "cart" which have a header and a footer. The tabstrip only has 2 tabs : "menu" and "cart". 

<div data-role="view" id="menu" data-title="Menu"  data-layout="myLayout" data-model="viewModel">
   here i have a listview with the category names and when i click on an "li" it goes to the #details view where products are filtered by the category name
</div>

<div  id="details" data-role="view" data-title="Details" data-layout="myLayout" data-transition="slide:left" data-model="viewModel" >
    <h3 class="item-title">#: name #</h3>
    <p class="item-info">#: description #</p>
    <a data-role="button" data-item-id="#:id#" class="details-link fa"  data-icon="cart" data-bind="click: addToCart" >#: price # lei</a>
</div>

the footer from myLayout looks like this:

<footer data-role="footer">
<div data-role="tabstrip" id="badgeIcon">
    <a href="#menu" class="fa" data-icon="home">Menu</a>
    <a href="#cart" class="fa" data-icon="cart" >Cart</a>
</div>
</footer>

i have onInit function which works and initializes the badge:

function onInit(e) {
 var tabstrip = e.layout.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
 tabstrip.badge(1,0);
}

And the addToCart function is this
function addToCart(e) {
var tabstrip = $("#badgeIcon").data("kendoMobileTabStrip");
tabstrip.badge(1, +tabstrip.badge(1) + 1);

....rest of function which works perfectly...
}

The app loads in the #menu view from where it goes to #details view,  and then,  when i click on a #li it crashes and gives me an error on the " tabstrip.badge(1, +tabstrip.badge(1) + 1); " line

Uncaught TypeError: Cannot call method 'badge' of undefined 

If i load the app in the #details view ( index.html#details ) with all the items shown, it works and updates the cart badge, but i want to filter them and thats why i have the #menu view first.

I'm using the latest kendo latest release with jQuery1.9.1

Please give me your input and thanks in advance :)








Radu
Top achievements
Rank 1
 answered on 20 Dec 2013
1 answer
95 views
The online demo for listiew editing (here)  lists the following code:


function listViewInit(e) {
    e.view.element.find("#list-edit-listview").kendoMobileListView({
        dataSource: dataSource,
        template: $("#itemTemplate").html()
    })
    .kendoTouch({
        filter: ">li",
        enableSwipe: true,
        touchstart: touchstart,
        tap: navigate,
        swipe: swipe
    });
}
   touchstart: touchstart,            
    tap: navigate,
    swipe: swipe
})}
However there is no documentation for the the filter parameter in the api documentation.  Please provide some documentation for it.


Alexander Valchev
Telerik team
 answered on 20 Dec 2013
1 answer
956 views
I am implementing an Endless Scrolling list view.  I would like to persist the list data items and position when I navigate to a detail view and return.  This works.  I would also like to be able to completely reset the Endless Scrolling list view when I go back to the main app view and return to the Endless Scrolling ListView, just like I had set the Endless Scrolling view itself to data-reload="true".  This is not working for me.

I can reset and clear a normal ListView like this;

contactListSource = new kendo.data.DataSource.create({data:[]});
$("#contacts_list_search_results").kendoMobileListView({
dataSource: contactListSource,
template: $("#contact_list_item_template").html()
});


The paging functionality complicates the clear with the Endless Scrolling list and causes issues when I try to reset the ListView.  The next time I come back to the Endless Scrool List the display starts in the middle of the list, and the first records from the list often don't get displayed. This is what I have so far to clear and rest (it only works if I have not scrolled on the original list, so I believe the issue has to do with a persisted scroll position):

                    $(".km-scroll-container").css("-webkit-transform", "");
                    $("#contacts_list_search_results").data("kendoMobileListView").dataSource.data([]);
                    $("#contacts_list_search_results").data("kendoMobileListView").dataSource._page=1;
                    $("#contacts_list_search_results").data("kendoMobileListView").dataSource._skip=0;

How is it possible to completely clear and reset and Endless Scrolling list view?

Thanks,
Derrick
Alexander Valchev
Telerik team
 answered on 20 Dec 2013
3 answers
307 views
I am using MVC style API to test and develop these tools.
I am using a range slider

    @(Html.Kendo().RangeSlider()
         .Name("yearRange")
         .Min(2000)
         .Max(DateTime.Today.Year)
         .SmallStep(1)
         .LargeStep(5)
         .Values(new double[] { 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2010, 2011, 2012, 2013 })
)

but I cannot see the property to set the initial value of this control.

can someone help me please :)
Hristo Germanov
Telerik team
 answered on 20 Dec 2013
1 answer
261 views
Good day

I have the following task at hand.

I have a datasource which contains my data. I have more data then in the simple example but for explaining it will do.

For example

Name
Phone number
Shoe size
Age

At the moment I get the data from my SQL server by Web API returning JSON and I use a template to display the data on one view.

Now to make the icenium app a bit more userfriendly (I get more daten then in the example) I want to split the data over multiple views and use a tabstrip footer.

so views would be 

view-name
view-phone
view-shoe
view-age

I have no problem implementing the views, tabstrip footer and so on. 

What I don't know is how to split the data into 4 templates to bes used on 4 views . I want to make only one trip to the database of course.

Is this possible?

Markus

Here is the real code I am using at the moment.

Function is called from another view and redirects to the one view at the moment.

function getDetails(userID) {
     
    app.navigateTo("#view-firmen-details") ;
     
    var dataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: {
                url: "http://mobile.mydomain.com/api/T_users/GetUserByID/?id=" + userID,
                data:{
                    Accept: "application/json"
                }
            }
        },
   
      });
 
    $("#notfilterable-details").kendoMobileListView({
        dataSource: dataSource,
        template: $("#firmen-details-template").text(),
        dataBound: function(e) {
            
                 $("#User_text1").html($("#User_text1").html().replace(new RegExp("../images/kunden", "g"), 'http://www.zuol.ch/images/kunden'));
                 },
              
    });
  
}

This is a how I display the data at the moment

<div data-role="view" id="view-firmen-details"  data-layout="drawer-layout-back-firmen-details" data-title="Gewählte Firma" >
 
    <div data-role="content"  class="view-content" >
        <div id="notfilterable-details">
 
        </div>
    </div>
    <script type="text/x-kendo-tmpl" id="firmen-details-template">
        <h2>#=User_firmaname#</h2>
        <h4>
            Adresse & Kontakt
        </h4>
        <p>#=User_strasse# <br /> 
            #=User_plz# #=User_ort# <br /><br />
           Jetzt anrufen: <a href="tel:#=User_telefon#">#=User_telefon# </a><br /><br />
           Seite öffnen:  <a href="javascript:window.open('#=User_internet#','_blank','location=yes');" target="_blank">#=User_internet#</a>  <br /> </p>
        <h4>
            Ã–ffnungzeiten
        </h4>
 
        <table style="width:90%;margin-left:5%;font-size:0.9em;">
            <tr>
                <td>
                    <b>Montag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_montag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Dienstag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_dienstag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Mittwoch</b>
                </td>
                <td>  </td>
                <td>
                    #=User_mittwoch#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Donnerstag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_donnerstag#
                </td>
            </tr>
 
            <tr>
                <td>
                    <b>Freitag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_freitag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Samstag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_samstag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Sonntag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_sonntag#
                </td>
            </tr>
        </table>
        <p>
            <span id='User_text1'>#=User_text1#</span>
        </p>
 
    </script>
 
</div>


What I basicly want is to spread the content of 

firmen-details-template

on 4 views.


--------------

Hope someone can understand what I am trying to do :-)

Markus

Alexander Valchev
Telerik team
 answered on 20 Dec 2013
5 answers
127 views
My tabstrip should be fixed to the bottom of the screen and stay behind the keyboard when the keyboard opens up, instead it moves up with the keyboard.  As a workaround, I tried doing this when the keyboard opens:

$('#tabstrip-tablet').css('display', 'none');

Then showing it again when the keyboard closes.  This works in the icenium simulator but does not work on the ipad itself.  Why the inconstancy and what is the correct way to handle this?

Kiril Nikolov
Telerik team
 answered on 20 Dec 2013
0 answers
165 views
Hy

-----
Looks like an issue with my Internet Explorer. I've testet it on several other computers with the same configuration and it's working fine!
-----

We generate the html for the panel bar on the server side. For preselecting the right item, we set the k-state-active style on the selected li element. 
This works fine in all browsers except when the bootstrap theme is used in combination with internet explorer (I have tested it with ie11, win8, It works with ie11 and win7!)

If you open the following jsfiddle Bootstrap theme in firefox, or chrome, the page renders correctly (panel bar with preselected item Submenu 2/Item2 and the table with borders). If you open the same jsfiddle in internet explorer, then the table will lack the borders (you can hover the table and the borders will appear). 

If you change the kendo ui theme to something different then bootstrap (e.g silver, jsfiddle With Silver Theme) then the table renders correctly in all browser (including ie!). 

When you remove the preselecting in the panel bar using the css-classes (k-state-active), the table renders correclty, too!

Could you please investigate this behavior?

Kind Regards
Raphael
Top achievements
Rank 1
 asked on 20 Dec 2013
1 answer
84 views
This did not use to happen and has just started with the new releases of Kendo UI Mobile.

Even after implementing the fix described here:
http://docs.icenium.com/troubleshooting/known-issues
[NEW] When you build and deploy the Kendo UI Mobile or Kendo UI DataViz project templates on iOS devices, you might experience the following issues.When you rotate the device, the tabstrip disappears.When you tap an input box, the keyboard might overlay input box even if the Keyboard plugin is enabled.Workaround: Use the following code.

document.addEventListener("orientationchange", fixViewResize);

document.addEventListener('deviceready', function () {
navigator.splashscreen.hide();
fixViewResize();
}, false);

function fixViewResize() {
if (device.platform === "iOS") {
setTimeout(function() {
$(document.body).height(window.innerHeight);
}, 10);
}
}

Here's a link to another customer having the same problem:
http://www.kendoui.com/forums/kendo-ui-mobile/tabstrip/ipad-tabstrip-moving-with-the-keyboard-visible-even-if-display-none.aspx

And this link really describes the hack needed to keep the Tabstrip from floating up:
http://www.icenium.com/resources/forums/icenium-general-discussion/click-on-input-levels-up-the-footer-on-the-keyboard-whitout-change-the-view-!-


Please see attached screenshot.
KSBA Techie
Top achievements
Rank 1
 answered on 20 Dec 2013
0 answers
50 views
Test
Quinn
Top achievements
Rank 1
 asked on 19 Dec 2013
5 answers
117 views
I have an existing .net web application for my customers.  I would like to make some of the functionality available to them on their smart devices.  I've looked at a few of the kendo ui mobile demos and don't see how to add mobile capability to my existing web.  It appears that the demos are creating new applications, not modifying existing ones. Can someone point me in the right direction?  Thanks
Markus
Top achievements
Rank 2
 answered on 19 Dec 2013
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
MultiColumnComboBox
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
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?