Telerik Forums
Kendo UI for jQuery Forum
2 answers
357 views



myHead.jsp
<head>  
    <link rel="stylesheet" type="text/css" href="css/kendo/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="css/kendo/kendo.default.min.css" />
     
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
     
    <script type="text/javascript" src="js/kendo.all.min.js"></script>
    <script type="text/javascript" src="js/kendo.culture.ja-JP.min.js"></script>
     
    <script type="text/javascript" src="js/myJs.js"></script>
     
    <sj:head jqueryui="true"/>
</head>


include.jsp
1.<div id="example" class="k-content">
2.    <div id="window">
3.        WINDOW
4.    </div>
5. 
6.    <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
7.</div>


myJs.js
$(document).ready(function() {
    var window = $("#window"), undo = $("#undo").bind("click", function() {
        window.data("kendoWindow").open();
        undo.hide();
    });
 
    var onClose = function() {
        undo.show();
    }
 
    if (!window.data("kendoWindow")) {
        window.kendoWindow({
            width : "600px",
            title : "About Alvar Aalto",
            actions : ["Pin", "Minimize", "Maximize", "Close"],
            close : onClose
        });
    }
});


Run this page  => Uncaught TypeError: Object [object Object] has no method 'kendoWindow'
kendo.all.min.js version : v2013.3.1324

I refferred this troubleshooting, but not solved.
Whats wrong. please help...
TM
Top achievements
Rank 1
 answered on 01 Feb 2014
4 answers
372 views
Hi 

I am using an editor on my page using MVC helper i.e.

 @(Html.Kendo().EditorFor(u = > ....

How do i make it so that when I open the page the cursor is blinking away in the editor ready for me to type.. At the moment I need to click on the editor to give it focus,.

I am sure there is some clever jQuery I need to be using.

Any help much appreciated

Huw Lloyd
Top achievements
Rank 1
 answered on 31 Jan 2014
2 answers
252 views
Is it possible to use WEB.API as the datasource when its cross domain and needs an Authorization header set?

I know you can do cross domain with jsonp, but I read in another thread that with jsonp you can't use the beforeSend - setRequestHeader.

var aumData = new kendo.data.DataSource({
                   transport: {
                       read: {
                           url: '<%=Common.GetAppSetting("WebApiBaseUrl") %>Portfolio/Clients/Value',
                           dataType: "jsonp",
                           beforeSend: function (req) {
                               req.setRequestHeader("Authorization", "<%= this.webApiToken %>");
                           }
                       }
                   }
                });
Michael
Top achievements
Rank 1
 answered on 31 Jan 2014
5 answers
243 views
According to

http://docs.telerik.com/kendo-ui/api/web/listview#methods-add

you can read that the method add() is adding an empty item as first item and prepares it for editing.

What I expect from the method name is to be able to add a populated item.
Is the only way of doing that to change the data source?
100%
Top achievements
Rank 1
 answered on 31 Jan 2014
2 answers
198 views
How can I have a week view that displays a 5 day work week?   I don't want to display the weekends.
Tyler
Top achievements
Rank 1
 answered on 31 Jan 2014
6 answers
476 views
We are using Kendo Image Browser to handle selecting and inserting images from our CDN. In one situation, though, we aren't using the editor as the image destination, but rather just a text area. I added a custom "select" event, and it fires, but I can't, for the life of me, get a handle on the image HTML, especially in Firefox. On the returned value, there is a property called sender, and sender at times, has container information that has the correct innerHTML. But probably 5-10 times, it doesn't have that info. I just want the HTML so I can insert it into my text area.

Is there a format/event that I should be using? Is this even possible?

Thanks in advance,
-Josh
Dimo
Telerik team
 answered on 31 Jan 2014
5 answers
207 views
Hi,

I have Kendo grid and I want to show a view in it as you see attachment.

But I could not do it? Can you send me a sample project about it?
Dimo
Telerik team
 answered on 31 Jan 2014
1 answer
67 views
With Q3 2013 SP1 & SP2, when drawing a bar chart that has both negative and positive values, with the y axis intercepting at 0, the bar chart animation for bars to the left of the y-axis originates at the left hand end of the bar. Previously, the animation originated at the y-axis for bars either side of the axis. Are there any work-arounds to reinstate the previous behaviour?

See this JSBin for a working example:

http://jsbin.com/ubixOluZ/1/edit?html,js,output
T. Tsonev
Telerik team
 answered on 31 Jan 2014
6 answers
474 views
I have seen a variety of questions centered around creating custom MVVM widgets on this forum, and have not yet seen a good answer on how exactly to create a custom widget that is MVVM aware.  Mr. Holland did a nice job with a data-source aware widget that also binds to MVVM, but it only covers a datasource aware widget and doesn't extend into other bindings that you might want to support in your own custom widgets.  I wanted to post a series of tips I've discovered with creating custom widgets that are fully MVVM aware and that function in the same manner as the Kendo widgets themselves.

In this first post, I will show how to create widget that uses simple options that are defined either from data-someoption attributes, or within the { someoption: 'myvalue'} javascript declarations.   We'll create a widget that uses markup like:
<input data-role="SimpleWidget" data-someoption="myoption" />
In order to accomplish this, let's start with the boiler plate code for a simple widget extension.
(function($) {
var kendo = window.kendo,
   ui = kendo.ui,
    
   Widget = ui.Widget;
 
   var SimpleWidget= Widget.extend({
      // custom widget stuff
   });
})(jQuery);
With the boiler plate code, we can start adding in the functionality we'll need to support this widget within the KendoUI framework.  First, we should create an init function.  Kendo will call init during the creation of the widget.
// Kendo calls this method when a new widget is created
init: function (element, options) {
    var that = this;
    Widget.fn.init.call(this, element, options);
}
The init function is the entry point for KendoUI framework to initialize our widget.  We'll need to use this skeleton of a function and add in our DOM elements creation, event bindings to handle events within the widgets, and setup of any settings or options that we need to handle during creation.  The options variable is supplied to us by kendo and contains all of the options that are set as data-option value pairs or passed in via the options attribute in a javascript declaration.  If we had an option in markup such as data-someoption, we could reference it here as options.someoption.  This value could also be passed during javascript initialization as { someoption: 'somevalue' }.  In order for options to be read and available in the options collection, we have to declare them in a property called options within our widget.
//List of all options supported and default values
options: {
    name: "SimpleWidget",
    value: null,
    width: "150",
    someoption: ""
}
By exposing this options collection, now have access to these options in the options collection of our widget.  Options will automatically be set by the framework within our options collection without any action on our part.  Each option that is declared using a data-someoption="somevalue" attribute or in the javascript as an options: { someoption: "myvalue" } that also has a corresponding options: {} declaration in our widget will be available in the options collection in the init method, and the provided value will also automatically be updated within this.options in our widget.

We can show the use of the options with a little bit of simple jQuery to set the source elements value to equal the option's value.
init: function(element, options) {
  ...
      //Options are accessible via the options
      $(that.element).val(options.someoption);
      //Our internal widget's options property has also been updated for us
      $(that.element).val(that.options.someoption);
  ...
}
We can see that both the options parameter as well as our widget's options property have been set to the value specified in the markup's data-someoption attribute.  We would also see this value from a javascript options attribute if our widget was declared from code.

This fiddle provides a working example of widget options: http://jsfiddle.net/cn172/EuNLh/

The full source code for a very basic widget with simple options support:
(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget;
 
    var SimpleWidget = Widget.extend({
        // Kendo calls this method when a new widget is created
        init: function (element, options) {
            var that = this;
            Widget.fn.init.call(this, element, options);
            //Our internal widget's options property has been updated for us
            $(that.element).val(that.options.someoption);
        },
        //List of all options supported and default values
        options: {
            name: "SimpleWidget",
            value: null,
            width: "150",
            someoption: "",
        },
    });
    ui.plugin(SimpleWidget);
})(jQuery);

In the next post, I'll cover a basic MVVM binding, the value binding.  We'll see how MVVM sets the value of widgets with a data-bind="value: someViewModelProperty" markup and how to reflect that value on our UI.
Scott
Top achievements
Rank 1
 answered on 31 Jan 2014
3 answers
644 views
Hi,

I'm a new user of Kendo UI and i have trouble to understand the lifecycle of the application with Cordova.

Here, i would like to do different actions if the user is online or offline (redirect, show different content, ...).
I can't put the code in the app.Bootstrap.show() method because the variable navigator.connection is initialized only after the deviceReady event is fired.
I try with the after-show event but that's the same : the event is fired before the deviceReady event.

How can i do this ?

Thanks a lot for your help,
Antoine.

app.js :

var app = (function (win) {
    'use strict';
  
    var onDeviceReady = function() {
        //Do some stuff
    };
  
    // Handle "deviceready" event
    document.addEventListener('deviceready', onDeviceReady, false);
  
    // Initialize KendoUI mobile application
    var mobileApp = new kendo.mobile.Application(document.body, {
        transition: 'slide',
        skin: 'flat',
        initial: 'bootstrap'
    });
  
    return {
        mobileApp: mobileApp
    };
  
}(window));

bootstap.js :

var app = app || {};
 
app.Bootstrap = (function () {
    'use strict'
     
    var bootstrapViewModel = (function () {
         
        var show = function (e) {
            // Check if user is online and do some stuff
               // By accessing navigator.connection
        };
         
        return {
            show: show
        };
         
    }());
     
    return bootstrapViewModel;
     
}());


<body>
    <!--Home-->
    <div id="bootstrap" data-role="view" data-show="app.Bootstrap.show">
        <div class="view-content">
            <h1>My app</h1>
            <div class="content"></div>
        </div>
    </div>
    ....
</body>

Kevin
Top achievements
Rank 1
 answered on 31 Jan 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?