Telerik Forums
Kendo UI for jQuery Forum
6 answers
453 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
203 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
63 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
450 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
618 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
3 answers
127 views
Good morning

http://jsbin.com/uqELuFo/2/edit

Shared tooltip places itself below the mouse cursor (where normal tooltip positions itself a bit off).
This makes it difficult to read sometimes and even worse: disables click on the category.
End-users can be taught to move the cursor to the left side of the category column (as the left edge of shared tooltip seems to be in the middle) but it's quite difficult if there are large number of categories i.e. narrow columns. And it's even much worse on the rightmost columns where tooltip covers it all.

The second problem is smaller. Whenever there is vertical scrollbar on the page, shared tooltip goes "below" it for rightmost columns in FF and Chrome (works ok in IE).

Is there a way to control the positioning?
Thanks.

Raido


Iliana Dyankova
Telerik team
 answered on 31 Jan 2014
3 answers
71 views
We were previously using Bootstrap 2 with KendoUI, and we just recently upgraded to Bootstrap 3. Since the switch, we just started noticing that Kendo Upload widgets were taking up tons of space. The input itself, for whatever reason, is covering hundreds of pixels of the page (see screenshot), and the only thing that seems to be causing it to be that large is the  "font: 200px monospace!important;"  style that Kendo puts on the file input. We have no custom CSS styles affecting the file input; only Bootstrap 3 and KendoUI. Is anyone else experiencing this problem?
Dimiter Madjarov
Telerik team
 answered on 31 Jan 2014
8 answers
1.4K+ views
Hi there,

I have a problem, I want to set cell background programmatically. Is there any way to pass variable to a customer helper in ClientTemplate?


grid
columns.Bound(c => c.RiskProfileLevel).ClientTemplate(RiskProfileLevelTemplate(/*RiskProfileLevel*/).ToHtmlString());

Helper
@helper RiskProfileLevelTemplate(int riskProfileLevel)
{
        if (riskProfileLevel == 1)
        {
            <div style="background-color: @CorporateSys.Website.Models.SiteUtil.RED_STYLE; width: 100%; height: 33px; margin: 0; padding: 0;"></div>
        }
        else if (riskProfileLevel == 2)
        {
            <div style="background-color: @CorporateSys.Website.Models.SiteUtil.AMBER_STYLE; width: 100%; height: 33px; margin: 0; padding: 0; "></div>
        }
        else if (riskProfileLevel == 3)
        {
            <div style="background-color: @CorporateSys.Website.Models.SiteUtil.GREEN_STYLE; width: 100%; height: 33px; margin: 0; padding: 0; "></div>
}

Thanks in advance


regards
Jerry
Alexander Popov
Telerik team
 answered on 31 Jan 2014
5 answers
262 views
I have a grid that has 100 items page size. However, my grid has visibility of 10 rows. I need to be able to select the rows that are in the invisible area (meaning when i select a row and  drag the mouse to be able to select multiple rows, so the grid needs to scroll while i am dragging the mouse and select the new visible rows.) By default this is disabled. But in some of the demos i can see the behavior i want, but i do not know how to achieve it.( http://jsbin.com/ulizuv/2/edit or http://demos.telerik.com/kendo-ui/web/grid/detailtemplate.html)

Thank you
Alexander Popov
Telerik team
 answered on 31 Jan 2014
1 answer
407 views
Hi,
    I am using plain HTML and jquery to create kendo comboboxes and bind data to it. My problem is that I want to change the datatextfield and datavaluefield of the combo based on some values. Initially what I will do is I shall initialise the combobox like this
$("#TestControl").kendoComboBox(
{
placeholder: "Select Product",
filter: "contains",
autoBind: false,
suggest: true,
minLength: 0
});

Then at some other place I wnat to assign the datatextproperty to the control something like this.

 auto = $("#TestControl").data("kendoComboBox");
 auto.setDataSource(dataSource);  // this line works
auto.options.dataValueField = autoCompleteValueField; // this line I am not sure (autoCompleteValueField is a variable which has a value)
auto.options.dataTextField = autoCompleteTextField; // this line I am not sure (autoCompleteTextField is a variable which has a value)


Can this be done or is there a way to do it? Please do help

Thanks in advance

Regards,
Vijay
Dimo
Telerik team
 answered on 31 Jan 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?