Questions on Kendo UI for jQuery Forum

1 answer

224 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

116 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

465 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

136 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

576 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

101 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

339 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

0 answers

210 views

Memory leak using Kendo Grid with Knockout JS

We are experiencing a crippling memory leak using a Kendo Grid. We are using the knockout-kendo.js library to bind a Kendo Grid to an existing Knockout observable array such that the grid responds to row insertions and removals in the array.

Attached is a stand-alone example page that demonstrates the issue. Basically, this sample binds an array of objects with observable fields, and a button removes the first item in the array. If you load it you should see the grid of test values. If you keep pressing the button and watch your Task Manager, you should see the memory usage of the browser slowly climbing (we've confirmed that it happens in IE10, IE11, and Firefox). The grid in the real app is bigger so the memory leak gets big enough to crash IE10 after a relatively small number of operations.

This is a high-priority issue, so any help you can give us would be greatly appreciated!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/kendo.all.js"></script>
    <script src="Scripts/knockout-3.2.0.js"></script>
    <script src="Scripts/knockout-kendo.js"></script>
</head>
<body>
    <script id="Row-Template" type="text/html">
        <tr data-uid="#: uid #">
            <td data-bind="text: col1"></td>
            <td data-bind="text: col2"></td>
            <td data-bind="text: col3"></td>
            <td data-bind="text: col4"></td>
            <td data-bind="text: col5"></td>
            <td data-bind="text: col6"></td>
            <td data-bind="text: col7"></td>
            <td data-bind="text: col8"></td>
            <td data-bind="text: col9"></td>
        </tr>
    </script>

   <div>
       <button data-bind="click: OnClick">Remove One</button>
   </div>

            var rows = [];
            for (var i = 0; i < 100; i++) {
                rows.push({ col1: ko.observable("test"), col2: ko.observable("test"), col3: ko.observable("test"), col4: ko.observable("test"), col5: ko.observable("test"), col6: ko.observable("test"), col7: ko.observable("test"), col8: ko.observable("test"), col9: ko.observable("test")});
            }

self.Rows = ko.observableArray(rows);

            self.OnClick = function () {
                self.Rows.remove(self.Rows()[0]);
            };
        }

ko.applyBindings(new ViewModel());
</script>
</body>
</html>

Grid

asked on 31 Dec 2014

2 answers

76 views

Grid Column Format

Hi there,

I want to format my Price columns as a currency. So I set the format option in columns to "{0:c}". Now when I update the grid data source.data, the format goes away. I can construct the whole grid again, but I want to know if there is way to do it more efficiently.

Below is snapshot of code.

Thanks in advance, Nisarg

Grid

answered on 31 Dec 2014