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:
In order to accomplish this, let's start with the boiler plate code for a simple widget extension.
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.
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.
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.
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:

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.

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 :


bootstap.js :

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

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?

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

Helper

Thanks in advance


regards
Jerry

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

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

Hi,

we've built a two-column grid where only the cells in the second column should be editable.
The text in the cells of the first column cannot be edited, but the row can be selected as well as the cells in the first column can be accessed by mouse and keyboard which is very annoying as the should be ignored when navigating by keyboard and not selectable by mouseclick.

They should behave like let's say a cell in the table header as it cannot be clicked and selected.

Is there a way to achieve this?

I've enclosed a screenshot to describe in detail what the problem is... the column with the red arrow is not editable und should therefore be not selectable and thus white,  and the cells in the red brackets are editable.

Cheers,
Heike

Hi,

I need to be able to diagram relational objects and would obviously prefer to stay within the Telerik fold for consistency sake but I can't find a means of showing relationships between objects (like in the attached image - example from here http://familyshow.codeplex.com/).  I need to be able to customise the lines representing the relationships and also customise the object shapes and appearance (i.e. similar to RadDiagram).

I need to be able to provide this functionality web-based and on any device.

Are there any plans to provide this functionality either with Kendo UI or with the web-based RadControls?

If not, can we get something added to the road map.

If not, does anyone have any ideas how I can deliver on this requirement?


Thanks,
Martyn

Hello, I´m new using kendo mobile and I´m trying to invoke a wcf rest service, using xml.

For instance, this login invocation:
            
             var username = "admin";
             var password = "admin";

             var remoteDataSource = new kendo.data.DataSource({
                type: "xml",
                schema: {
                    type: "xml",
                    data: function (response) {
                        return response;
                    }
                },
                transport: {
                    read: "http://localhost/MyService.svc/Security/Login?" +
                        "user=" + username + "&password=" + encrypted,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                }
            });

            remoteDataSource.fetch();

Where service response has this structure:

<UserData>
    <IsSuccess>true</IsSuccess>
</UserData>

That code is executed in a button event and when debugging, success and error functions are never reached.
This call remoteDataSource.fetch() raises an unhandled exception: "Javascript exception: object has no method 'slice'"

Any help is appreciated about using DataSource when response is xml data.

Thanks in advance.