Questions on Kendo UI for jQuery Forum

1 answer

60 views

Kendo UI Q3 2013 Release date

I would like to know when will be the Kendo UI Q3 2013 release date.

Thank you.

General Discussions

answered on 21 Oct 2013

1 answer

161 views

How can I move the busy indicator to the left in RTL mode?

Hi,

I'm using the Autocomplete control in a multi-language website. For the LTR languages the text is left adjusted and while autocomplete is waiting to get the list of words from server it shows a busy indicator on the right which is as expected. But for RTL languages that text is positioned on the right side the busy indicator still appears on the right over the typed word and makes it hard to read.
Is there a way to move the busy indicator to the left when needed? If not how can I at least turn it off?

Thanks
Ron

AutoComplete

answered on 21 Oct 2013

5 answers

252 views

Hover , click , right click data point

Hi ,
What is the best way to detect data point Hover , click , right click events ?
I want to be able not only to bind to the series event but to the data points themselves

thx
Sagi

Charts

answered on 21 Oct 2013

3 answers

373 views

Client-side Kendo Grid Paging with In-Line Editing

Kendo Version 2013.2.716
Kendo MVC Wrappers

I currently have a grid that has InLine editing enabled, and also makes use of a pager whose ServerOperation is set to false (meaning all the sorting, paging, etc happens client side rather than re-poll the server).

When creating a new record InLine, if the user selects another page in the pager (without actually saving the new record first), and then returns to the original page that the new record had been inserted, it displays an empty row as though it had been saved.

I have tried looking into the DataBound event, but I cant find any indicator on that event that tells me whether it is as a result of a page action, a filter action, etc. Clearing the edit mode in the DataBound event interrupts the Create or Edit functions, as those also trigger DataBound.

The question is: is there a way to instruct the grid to clear the edit mode any changes when the pager or filter options are used and not insert an empty row?

Grid

answered on 21 Oct 2013

3 answers

465 views

Chart Legend items grouping

Hi,

As I could see the legends in any Kendo Chart, all the legend items are placed one by one (according to the available space and placment). Is it possible to group them in a tabular format so that we can specify the legend area to be 3 x 2 or 2 x 3, to get more professional look & feel. I have attached a sample to explain the same.

Best regards,
Suresh

Charts

answered on 21 Oct 2013

1 answer

788 views

dynamically generated anchor need to have onclick event

<!DOCTYPE html>
<html>
<head>
    <title></title>


    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.mobile.min.js"></script>

    <script>
        var app = new kendo.mobile.Application($(document.body));    </script>
</head>
<body id="body">
    <div data-role="layout" data-id="search-layout">
    </div>
    <div id="searchView" data-role="view" data-layout="search-layout">
        <ul data-template="ul-template" data-bind="source: serviceTypeView">
        </ul>
        <script id="ul-template" type="text/x-kendo-template">
             <li>
                    Name: <span data-bind="text:ProductName"></span><br/>
                    ID: <span data-bind="text: ProductID"></span><br/>
                    Click here : <a id="button1" data-click="GetDistinct">#=ProductName#</a><br/><hr/><br/>
            </li>
        </script>
    </div>
     <div data-role="layout" data-id="result-layout">
    </div>
    <div id="resultView" data-role="view" data-layout="result-layout">
        <ul data-template="ul-template" data-bind="source: resultTypeView">
        </ul>
        <script id="res-template" type="text/x-kendo-template">
             <li>
                    Name: <span data-bind="text:ProductName"></span>
                    ID: <span data-bind="text: ProductID"></span>
                    <a id="button1" data-click="GetDetail">#=ProductName#</a>
            </li>
        </script>
    </div>
    <script>
        var serviceTypeDataSource;
        var viewModelService;
        $(window).load(function () {
            serviceTypeDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products"
                    }
                },
                change: function () {
                    viewModelService = kendo.observable({
                        serviceTypeView: [],
                        serviceTypeValue: {},
                        serviceTypeDisplayValue: function () {
                            return kendo.stringify(this.get("serviceTypeValue"));
                        }
                    }); //end of viewModel

                    viewModelService.serviceTypeView = serviceTypeDataSource.view();

                    kendo.bind("#searchView", viewModelService);
                }
            }); //end of DataSource

            serviceTypeDataSource.read();
        });

        var resultTypeDataSource;
        var viewModelResult;

        function GetDistinct(e) {
            resultTypeDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products"
                    }
                },
                change: function () {
                    viewModelResult = kendo.observable({
                        resultTypeView: [],
                        resultTypeValue: {},
                        resultTypeDisplayValue: function () {
                            return kendo.stringify(this.get("resultTypeValue"));
                        }
                    }); //end of viewModel

                    viewModelResult.serviceTypeView = resultTypeDataSource.view();

                    kendo.bind("#resultView", viewModelResult);
                }
            }); //end of DataSource

            resultTypeDataSource.read();

        }

        function GetDetail(e) {
            alert("detail");
        }
    </script>
</body>
</html>

In my above example I am trying to achieve the following.
1) I am first rendering the list of products inside a template which is under "search-layout". During this time I am generating anchor tags.
2) On clicking these anchor tag I want to generate another list using the function "GetDistinct()" and show them inside another layout "result-layout".

I have 2 problems.
1) Dynamically generated anchor tags does not emit click event and call GetDistinct function
2)How do I show the result of GetDistinct function inside "result-layout"
I have my code in http://jsbin.com/ebuhOLU/1/edit
Please help
jsbin.com/ebuhOLU/1
Thanks
Subbu

Button (Mobile)

answered on 21 Oct 2013

2 answers

211 views

"SCRIPT16386: No such interface supported" when calling splice on array

Hi,

I have an observable object that contains an array which is binded as a source to a div:

<div data-bind="source: Fields" data-template="field-template"></div>

where field-template looks like this:

<script id="field-template" type="text/x-kendo-template">

<div>

<div data-bind="text: FieldName"></div>

<button data-bind="events: { click: removeField }">Remove</button>

</div>

</script>

When I try to remove an element from an array by calling splice, kendo.web.js breaks in IE at line 6753. Apparently I would say the problem is at the source binding because at the specified line, element.children.length is 0 but this happens only in IE. In Chrome and Firefox element.children contains template instances for each element from the array. Why Internet Explorer breaks?

The MV looks as follows:

var SectionVM = function (section) {

var self = this;

this.Fields = [];

if (section.Fields) {

var fieldIndex = 0;

$.each(section.Fields, function () {

var field = this;

var fvm = new FieldVM(field); // FieldVM is similar with this VM

self.Fields.push(fvm);

});

}

this.removeField = function

(e) {

           var FieldIndex = self.get("Fields").indexOf(e.data);

var removedItem = self.get("Fields").splice(FieldIndex, 1);

}

self = kendo.observable(this);

return self;

}

and finally the binding:

var secVM = new SectionVM(someSection); // someSection it's an object comming from the server and matches the VM structure

kendo.bind($(".section"), secVM); // .section is a div wrapping the div with the source binding

Thank you!

<script id="field-template" type="text/x-kendo-template"><br> <div><br> <div data-bind="text: FieldName"></div><br> <div><br> <button data-bind="events: { click: removeField }">Remove</button><br> </div><br> </div><br></script>

MVVM

answered on 21 Oct 2013

5 answers

133 views

[Solved] edit data-views on drawer

I have a drawer with a default list of data-views. after a user signs in, I would like to add additional views to this list. how can i accomplish that?

EDIT:

a) sorry this is in the wrong forum.

b) I used data-before-show="prevent" to hide it at the onset. now, how do I get it to appear?

EDIT 2:

I would have thought: $("#left_drawer").data("kendoMobileDrawer").show(); would do the trick, but that doesn't do anything.

General Discussions

answered on 21 Oct 2013

1 answer

112 views

[Solved] Bootstrap 3 + Kendo UI CSS Issue in IE 8

Good morning,

When using the attached MVC 4 project, IE 8 will shift the layout in a very visible and jarring way when loading each page in the application.

If the Kendo UI styles are commented out, then the shift no longer occurs.

What can be done to work around this to be able to use Bootstrap 3 and Kendo UI together?

Note: the nuget packages were not included in the zip to keep the file size down.

Thanks,
Calvin

General Discussions

answered on 21 Oct 2013

4 answers

665 views

[Solved] Radio and data-change : event not triggered

Hi guys,

My code is live here:
http://www.semiconductorconnect.org/kendo/#categorylist

I want to use data-change along with a radio button, but the JS function is not triggered, see the abbreviated code below:

<div id="categorylist" data-role="view" data-title="Category List" data-layout="checklayout">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Category List

<ul>

<li>

<label>

<input name="categorylistradio" type="radio" value="1" data-change="categoryswitch" />

<div style=

"height: 8px; width:8px; background: #67e667; border:1px; border-style:solid; float:left; margin-right: 3px; margin-top: 7px;"

></div>Academic </label>

</li>

</ul>

</li>

</ul>

</div>

<script>

function categoryswitch(e) {

alert('test');

}

kendo.init($("#categorylist"));

</script>

Regards

Application

answered on 21 Oct 2013