Questions on Kendo UI for jQuery Forum

2 answers

93 views

[Solved] Slider in angularjs is not properly bound to the ng-model property

Hi

In a specific context where a set of sliders are hosted in different kendo tabs,
only the sliders contained in the tab that is accessed first will have their cursors initialized at their proper
position. The sliders in all other tabs will be set at 0.

This plunk illustrates the issue
http://plnkr.co/edit/FP8c5o?p=info

Each tab has a slider with 100 positions, each should be initialized a 75. Click on Tab1 at first, position is correct but Tab2's slider is wrong,
Do the reverse and the roles will switch.

This issue seems to have appeared around Kendo 2014 Q2 SP1 (2014.2.903) and can be seen in all subsequent versions.

In the plunk's index.html file, if you revert back to Kendo 2014 Q2 ( 2014.2.716 ) all the sliders start to behave as I would expect.

Thanks

Mathieu

Slider

answered on 02 Jan 2015

1 answer

633 views

Allow Duplicate Items

Is it possible to allow duplicate items in a Multi Select? If it is not, will that feature be included?

Here is my use case.

I want to create a Route of Flight option that will allow people to select airports they have been to on a trip. They can visit the same airport multiple time on the same trip.

The following is a valid route of flight:

AUS, HYI, AUS, T74, AUS

Out of the box, once the user selects AUS the first time, it is no longer an option.

Any suggestions on how to make this work?

Thanks

MultiSelect

answered on 02 Jan 2015

1 answer

229 views

Httpnotsupportedmediatypee exception on read with json using spring

http://www.coderanch.com/t/644227/Spring/Httpmedianotsupported-type-exception-kendoui#2962270

If you check my thread there

<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%> <%@taglib prefix="demo" tagdir="/WEB-INF/tags"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="spring" uri="http://www.springframework.org/tags" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <%@include file="jspf/meta.jspf" %>  <title><spring:message code='APPNAME' text='Martinez' /> - <spring:message code='ASSETS' text='Assets' /></title>  <link rel="stylesheet" type="text/css" href="<spring:url value='/assets/kendoui/styles/kendo.common.min.css'/>"> <link rel="stylesheet" type="text/css" href="<spring:url value='/assets/kendoui/styles/kendo.material.min.css'/>">  <script type="text/javascript" src="<spring:url value='/assets/sm/js/jquery.js'/>"></script> <script type="text/javascript" src="<spring:url value='/assets/kendoui/js/kendo.all.min.js'/>"></script> </head> <body> <spring:url value="/secure/assets/list" var="transportReadUrl" /> <kendo:grid name="grid" selectable="single" pageable="true" groupable="true" sortable="true" filterable="true"> <kendo:grid-columns> <kendo:grid-column title="Name" field="name" /> <kendo:grid-column title="Quantity" field="quantity" /> <kendo:grid-column title="Dimensions" field="dimensions" /> </kendo:grid-columns> <kendo:dataSource pageSize="5" serverPaging="true"> <kendo:dataSource-schema data="assets" total="total"> <kendo:dataSource-schema-model> <kendo:dataSource-schema-model-fields> <kendo:dataSource-schema-model-field name="name" type="string" /> <kendo:dataSource-schema-model-field name="quantity" type="number" /> <kendo:dataSource-schema-model-field name="dimensions" type="number" /> </kendo:dataSource-schema-model-fields> </kendo:dataSource-schema-model> </kendo:dataSource-schema> <kendo:dataSource-transport> <kendo:dataSource-transport-read contentType="application/json" type="POST" url="${transportReadUrl}"> </kendo:dataSource-transport-read> <kendo:dataSource-transport-parameterMap> <script> function parameterMap(data, type) { if(type =="read") { return JSON.stringify(data); } return JSON.stringify(data); } </script> </kendo:dataSource-transport-parameterMap> </kendo:dataSource-transport> </kendo:dataSource> </kendo:grid> </body> </html>

@RequestMapping(value = "/list", method = RequestMethod.POST,headers="Accept=application/json",consumes = MediaType.APPLICATION_JSON_VALUE, produces = "application/json; charset=UTF-8") @ResponseBody public String listAssetsJSON(@RequestBody DataSourceRequest request) { System.out.println("ttttt "); System.out.println("ttttt "+request.getPage()); System.out.println("ttttt "+request.getPage()+" "+request.getPageSize());

On datasourcerequest i keep getting
org.springframework.web.HttpMediaTypeNotSupportedException: Content type
'application/json;charset=UTF-8' not supported

Grid

answered on 02 Jan 2015

1 answer

127 views

Grid "dataItem" Field

Hi there,

Does a grid dataitem have its own field "id"? Because I have an "id" field in my data, but when I get a dataitem they have different id.

Thanks in advance, Nisarg

Grid

answered on 02 Jan 2015

2 answers

1.1K+ views

How to catch delete event of an item?

We can catch the events save, edit, change but we cannot understand why event is triggered? We especially need it to catch delete event.
Many thanks.

Scheduler

answered on 02 Jan 2015

3 answers

478 views

Grid serverpaging

I done serverpaging, how can I get the parameters on the call of url?

i am using spring framework, everytime the page and pagesize are null.

@RequestMapping(value = "/list", method = RequestMethod.POST, produces = "application/json; charset=UTF-8")
    @ResponseBody
    public String listJSON(@RequestParam(value = "page", required = false) Integer page, @RequestParam(value = "pageSize", required = false) Integer pageSize) throws Exception {
        Iterator<Obj> iterator;
        if (page != null && pageSize != null) {
            PageRequest pageReq = new PageRequest(page, pageSize);
            iterator = repo.findAll(pageReq).iterator();
        } else {
            PageRequest pageReq = new PageRequest(0, 5);
            iterator = repo.findAll(pageReq).iterator();
        }

<kendo:grid name="grid" selectable="single" pageable="true" groupable="true" sortable="true" filterable="true">
                        <kendo:grid-columns>
                            <kendo:grid-column title="Name" field="name" />
                            <kendo:grid-column title="Quantity" field="quantity" />
                            <kendo:grid-column title="Dimensions" field="dimensions" />
                        </kendo:grid-columns>
                        <kendo:dataSource pageSize="5" serverPaging="true">
                            <kendo:dataSource-schema data="assets" total="total">
                                <kendo:dataSource-schema-model>
                                    <kendo:dataSource-schema-model-fields>
                                        <kendo:dataSource-schema-model-field name="name" type="string" />
                                        <kendo:dataSource-schema-model-field name="quantity" type="number" />
                                        <kendo:dataSource-schema-model-field name="dimensions" type="number" />
                                    </kendo:dataSource-schema-model-fields>
                                </kendo:dataSource-schema-model>
                            </kendo:dataSource-schema>
                            <kendo:dataSource-transport>
                                <kendo:dataSource-transport-read contentType="application/json" type="POST" url="${transportReadUrl}"/>
                            </kendo:dataSource-transport>
                        </kendo:dataSource>
                    </kendo:grid>

Grid

answered on 02 Jan 2015

1 answer

138 views

[Solved] Strange results with baseUnit fit

Hi,

I'm trying to take advantage of the "baseUnit" property, but while it works as expected in many cases, it fails in some other, and I can't explain myself why. I have an interval selector that allows to select hour, day, week, month or year interval. In some cases, if my date are 1st January, 1st February, 1st March, 1st April, 1st May, and select baseUnit=fit with a maxDateGroup of 24, then it will decide to render as week, hence rendering some dates with a value of 0 (as I don't have data in those points).

How does the algorithm work exactly? For now, I'm forced to explicitly pass the selected interval to kendo, but the problem is that when the interval is explictly set, maxDateGroups no longer work! Is there a way to use maxDateGroups with other step than fit?

Thanks!

Charts

answered on 01 Jan 2015

6 answers

585 views

AngularJS Jasmine Unit Testing Support

My projects are built using AngularJS and therefore I write my unit tests using Jasmine. I've been trying to write very simple unit tests for testing the kendo directives and they are all failing at a specific point. I've attached below a very simple test (taken from the kendo-labs code base).

describe("basic tests", function () {
    beforeEach(function () {
        module("kendo.directives");
    });

    // kendoCalendar
    it('should create kendoCalendar widget', function () {
        inject(function ($rootScope, $compile, $timeout) {
            var element = $compile('<div><input id="calendar" kendo-calendar></div>')($rootScope);
            $rootScope.$apply();
            $timeout.flush();
            var dataRole = element.find('#calendar').data('role');
            expect(dataRole).toBe('calendar');
        });
    });
});

When I try to run this test, I get this error: TypeError: 'undefined' is not a function (evaluating 'i.is("select")') (line 42).

Can somebody help me? If I am doing something wrong, could somebody give me a simple example using Jasmine.

General Discussions

answered on 01 Jan 2015

4 answers

107 views

Using a Kendo UI DataSource with IBM Worklight Adapter

I am building a mobile app using Kendo UI, Angular and IBM Worklight. I am required to use IBM Worklight Adapters to retrieve data from a REST Service. The overall design of the app is following the example at Tutorial: Building applications with Kendo UI Mobile and AngularJS. I can't seem to get the view to get populated with the data from the Worklight Adapter properly. Some code snippets are below. Please advise on the recommended approach to make this work. Thanks.

index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>My Mobile App</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<!--

<link rel="shortcut icon" href="images/favicon.png">

<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

-->

<link rel="stylesheet" href="css/main.css">

<link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="js/libs/kendoui/js/jquery.min.js"></script>

<script src="js/libs/angular/1.3/angular.min.js"></script>

<script src="js/libs/kendoui/js/kendo.all.min.js"></script>

<script src="js/app.js"></script>

<script src="js/controllers/controllers.js"></script>

<script src="js/controllers/accounts.js"></script>

<script src="js/controllers/metrics.js"></script>

</head>

<body style="display:none;" kendo-mobile-application k-hash-bang="true" ng-app="myApp">

<kendo-mobile-view id="accounts" k-title="'Customer Accounts'" k-layout="'default'" ng-controller="AccountsController">

<kendo-mobile-list-view id="accountslist" class="item-list"

k-template="templates.accountsTemplate" k-data-source="myAccounts.accountsDataSource">

</kendo-mobile-list-view>

</kendo-mobile-view>

<kendo-mobile-layout k-id="'default'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<kendo-view-title></kendo-view-title>

<!--                    <kendo-mobile-button class="about-button" k-align="'right'" href="views/about.html">About</kendo-mobile-button> -->

</kendo-mobile-nav-bar>

</kendo-mobile-header>

<kendo-mobile-footer>

<kendo-mobile-tab-strip>

<a href="#!accounts" data-icon="home">Home</a>

<a href="#!" data-icon="organize">View All</a>

<a href="#!" data-icon="more">More</a>

</kendo-mobile-tab-strip>

</kendo-mobile-footer>

</kendo-mobile-layout>

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

<kendo-mobile-button data-item-id="{{dataItem.custno}}">

{{ dataItem.custname }}

</kendo-mobile-button>

</script>

<script src="js/initOptions.js"></script>

<script src="js/main.js"></script>

<script src="js/messages.js"></script>

<script type="text/javascript">

WL.Logger.debug("Loading main page");

</script>

</body>

</html>

controllers.js

myApp

.run(['myAccounts', function(myAccounts){

myAccounts.init();

}])

.service('myAccounts', function() {

this.init = function() {

// the application DataSource

this.accountsDataSource = new kendo.data.DataSource({

data : [{custname: 'JK',custno:'123'},{custname: 'DH',custno:'1234'}]

});

// invoke adapter to get data

var invocationData = {

adapter : 'AccountsAdapter', // adapter name

procedure : 'getAccounts', // procedure name

parameters : [] // parameters if any

};

WL.Client.invokeProcedure(invocationData,{

onSuccess : function(result) {

// REST service results data is in result.invocationResult.customers

},

onFailure : function(result) {

WL.SimpleDialog.show("Error","The service is temporarily not available. Please try again later.",[{text: "OK"}]);

}

});

// observable array that will be used to store accounts that user has selected

this.added = new kendo.data.ObservableArray([]);

// field that will hold reference to the last selected account (used for displaying the details)

this.currentItem = null;

};

this.setCurrentItem = function(id) {

this.currentItem = this.accountsDataSource.get(id);

};

})

.factory('templates', function() {

return {

accountsTemplate: $("#accountsTemplate").html()

};

});

accounts.js

myApp

.controller('AccountsController', ['$scope', 'myAccounts', 'templates',

function($scope, myAccounts, templates) {

$scope.myAccounts = myAccounts;

$scope.templates = templates;

}]);

Data Source

answered on 01 Jan 2015

9 answers

344 views

Child Grid data source action never called

Hello,
I am having a grid which will show the driver detail and if the use expands one row then I want to show the some information of that driver in another grid.

Below is my code
<%: Html.Kendo().Grid<PrimeWebInterface.Views.ViewModels.DriverViewModel>()
.Name("DriverRoute")
.Columns(columns =>
{
columns.Bound(e => e.Code);
columns.Bound(e => e.Name);

})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("Bind_Drivers", "DriverRoute"))
)
.Events(events => events.DataBound("dataBound"))
%>

<script id="template" type="text/kendo-tmpl">
<%: Html.Kendo().Grid<PrimeWebInterface.Views.ViewModels.DriverRouteGrid>()
.Name("DriverRoute_#=Code#")
.Columns(columns =>
{
columns.Bound(o => o.RouteDate);
columns.Bound(o => o.ItinaryCode);
columns.Bound(o => o.RouteID);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("Bind_Itinary", "DriverRoute", new { code ="#=Code#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
%>
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}

</script>
</asp:Content>

Code (string type) is the primary field. With the above code I can able to see the parent records (Driver) and the child grid not showing any records.

Since I am new to this , I might have missed some setting. So, Could you please guide me to solve this issue.?

Thanks and Best Regards
Muthuraja

Grid

answered on 31 Dec 2014