Friday, January 31, 2014

KendoUI Mobile - selecting startup view

Take into accout the note below!

        <div data-role="footer">
            <div data-role="tabstrip" id="tabstrip">
                <a href="#tabstrip-viewnotes" data-icon="recents">View Notes</a>
                <a href="#tabstrip-addnote" data-icon="add">Add Note</a>
            </div>
        </div>

<script>
new kendo.mobile.Application($(document.body), {
     initial: "tabstrip-addnote"
});
 </script>

Where tabstrip-addnote is a view.

Source - http://www.telerik.com/forums/initially-select-tab

Note: After writing the article and implementing initial view, strange tings started to happend. Some links refused to work and after some time they fixes by nothing? I spend few hours until I realized it was caused by this initial attribute. So, better avoid its usage. It could be fixed in some moment of time, but I cant wait

KendoUI mobile - getting view's elements


<div data-role="view" id="myView">
    <a data-role="button" data-click="getContentElement">Tap here</a>
</div>

<script>
function getContentElement() {
    var view = $("#myView").data("kendoMobileView");
    console.log(view.contentElement());
}

new kendo.mobile.Application();
</script>

KendoUI Mobile - Official widget demos

There are demos for these widgets:
  • ActionSheet
  • Adaptive Widgets
  • Button
  • ButtonGroup
  • Drawer
  • ListView
  • ModalView
  • NavBar
  • PopOver(tablet)
  • Scroller
  • ScrollView
  • Switch
  • TabStrip
Telerik link to demos

Thursday, January 30, 2014

output in kendoui templates

Example:
    <script type="text/x-kendo-tmpl" id="some-template">
    <a href="#:data.href#">
        <h2>#= data.lbl  #</h2>
    </a>
    </script>

#= data.lbl  # -> this outputs data directly, without escaping of string data
#: data.lbl  # -> this outputs data transformed, performing escaping of string data

kandoui mobile - change title

    <div id="show_place" data-role="view" data-layout="home" data-native-menu="true" ninit='init_show_place();'>
      <header data-role="header">
        <div data-role="navbar" id="navbar">
          <span id="show_place_title" data-role="view-title">old title</span>
        </div>
      </header>       
        <script>
            function init_show_place(){                document.getElementById('show_place_title').innerText = "new title";
...
...

kendoui mobile template example

    <script id="javascriptTemplate" type="text/x-kendo-template">
        # for (var i = 0; i < data.length; i++) { #
            <div id="#= data[i].id #" data-role="view" data-title="#= data[i].title #" data-layout="back">
                <h2>#= data[i].text #</h2>
            </div>   
        # } #
    </script>
    <script type="text/javascript">
        //Get the external template definition using a jQuery selector
        var template = kendo.template($("#javascriptTemplate").html());
         var data = [ {
            "id" : "mima",
            "title" : "mima mima",
            "text" : "some text"
        }, {
            "id" : "rosi",
            "title" : "rositsa",
            "text" : "Some other text"
        }, {
            "id" : "marta",
            "title" : "Ema Watson",
            "text" : "Harry Potter's friend"
        }, ];
       

        var result = template(data); //Execute the template
       
        $("body").append(result); //Append the result
    </script>

Wednesday, January 29, 2014

Find object by id in array of javascript objects

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]

var result = $.grep(myArray, function(e){ return e.id == id; });
 
if (result.length == 0) {
  // not found
} else if (result.length == 1) {
  // access the foo property using result[0].foo
} else {
  // multiple items found
}
 
Source - stackoverflow.com

Monday, January 27, 2014

Free Git hosting? True for small teams. Yeah!

I looked for a cheap GIT hosting, but I encounter a better solution - free one.

Q: Is Bitbucket free for small teams?

A: Yes! Sign up for the 5 users free plan and you can have unlimited public and private repositories.

https://bitbucket.org/plans - Free git repositories for small development teams.

I will update the article, if I have got any issues with the provider :)

Tuesday, January 21, 2014

Avoid JavaScript errors with missing console object

// Ensures there will be no 'console is undefined' errors
window.console = window.console || (function(){
    var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
    return c;
})();