Questions on Kendo UI for jQuery Forum

1 answer

327 views

Server Side paging using a function call that returns the data.

Hi,

Our requirement is to implement server-side paging in Kendo Grid. I know that it can be achieved if we specify the Url in the datasource and Url will be automatically called with the proper page and pageSize. However, in our application, we don't have any specific Url. We are fetching the data using IBM Worklight adapters. We can call these adapters only using a JavaScript function. We can pass the page number and page size to these adapter javascript calls.

Is there any way to configure the grid so that a JavaScript method can be called automatically when ever the user requests for a new page?

Could you please help me.

Thanks,
Pavan.

Grid

answered on 11 Dec 2014

2 answers

93 views

[Solved] KendoUI mobile capability

Hi guys,

one question please. I have used Kendo Mobile before and built quite a big application using it. What I am interested in now is to see if I can take it further.

Basically I need to build an app and deploy to a device as a real app, possibly using AppBuilder - this is something I haven't done before.

I need access to a few functions on the mobile device. I know I can use the camera, take pictures, do something with them - I did that before.
Now I also need to be able to get the coordinates at specific locations and they need to be as accurate as possible. Can I use the GPS of the device itself to get the data I need ?

General Discussions

answered on 11 Dec 2014

2 answers

126 views

Grid Pager Issue - IE9

Hi Guys,

Have just tripped over a IE9 rendering issue whereby the grid pager crawls up and down the screen as you move the mouse over the grid rows.

To illustrate the problem open the following fragment in IE9 and move the mouse over the grid rows.

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/grid/index">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

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

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

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div id="grid"></div>

<script>

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: "odata",

transport: {

read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"

},

pageSize: 5,

group: { field: "ContactName" },

},

pageable: {

refresh: true,

pageSizes: true,

buttonCount: 5

},

columns: [{

field: "ContactName",

title: "Contact Name",

width: 400

}, {

field: "ContactTitle",

title: "Contact Title",

width: 400

}, {

field: "CompanyName",

title: "Company Name",

width: 400

}, {

field: "Country",

width: 400

}]

});

</script>

</div>

</body>

</html>

The problem appears to be related to grouping because if you remove the

group: { field: "ContactName" }

line the grid renders without problem under IE9.

Regards
Alan

Grid

answered on 11 Dec 2014

1 answer

285 views

Removing items from listview in drawer view

Hi all;

I'm using a listview in drawer navigation. What's the best way to remove items from the listview if (for example) you detect that a user is using a tablet instead of a phone? Currently I just have two lists and use jQuery to hide one based on form factor - is there a better way? I tried using .remove() but couldn't seem to get it working with a static list of items that isn't data bound.

Thanks,
Jason

ListView (Mobile)

answered on 11 Dec 2014

1 answer

102 views

Autocomplete datasource

Hi,
Everytime I change the datasource of the grid by setting the transport.options.read.url, it does not update the datasource for autocomplete of all the grid columns. Filtering and sorting used the new updated datasource url, but autocomplete does not update

Can you please let me know how I can achive updating the autocomplete datasource everytime the grid datasource is changed.

Thanks
Marcus

Grid

answered on 11 Dec 2014

4 answers

1.8K+ views

[Solved] Kendo Grid Server Paging not working

Hi all,
i'd tried the samples of kendo grid and worked on server paging and if i'd set server paging is true then the each and every page click will send to my wcf service
and return back... but it will take all the datas from the server
any one please tell me how to do on this server paging????

this is my sample code

griddatasource= new kendo.data.DataSource({

transport: {

read: function (option) {

$.ajax({

url: 'http://localhost:53788/ReportKendo.svc/getGrid',

dataType: 'json',

success: function (data) {

option.success(JSON.parse(data.d));

}, error: function (doc) {

alert("Grid load Error")

}

});

}

},

serverPaging: true,

pageSize: 15,

schema: {

model: {

fields: {

serialnumber: { type: "string" },

jobcode: { type: "string" },

mname: { type: "string" },

vouchertype: { type: "string" },

dummyvouno: { type: "string" },

dummyvoudate: { type: "string" },

voucherno: { type: "string" },

voucherdate: { type: "string" },

Createdby: { type: "string" },

amount: { type: "string" },

currencycode: { type: "string" },

trncurrency: { type: "string" },

ispaid: { type: "string" },

isiuv: { type: "string" },

isreverse: { type: "string" },

isprovisionalvoucher: { type: "string" },

voucherstatus: { type: "string" },

subcode: { type: "string" },

credate: { type: "string" },

aurthtime: { type: "string" },

billno: { type: "string" },

billdate: { type: "string" },

subledgername: { type: "string" }

}

});

$("#grid").kendoGrid({

dataSource: griddatasource,

serverPaging: true,

groupable: true,

sortable: true,

selectable:true,

filterable: true,

reorderable: true,

resizable: true,

columnMenu: true,

pageable: {

refresh: true,

pageSizes: true

},

detailInit: subgrid,

aggregate: [{ field: "amount", aggregate: "sum" }],

columns: [{

field: "jobcode",

width: 120,

title: "Job Code"

}, {

field: "mname",

width: 300,

title: "Job Name"

},

{

field: "vouchertype",

width: 120,

title: "Voucher Type",

}, {

field: "dummyvouno",

width: 130,

title: "Ref Voucher No.",

}, {

field: "dummyvoudate",

width: 150,

title: "Ref Voucher Date",

}, {

field: "voucherno",

width: 120,

title: "Voucher No.",

}, {

field: "voucherdate",

width: 120,

title: "Voucher Date",

}, {

field: "Createdby",

width: 150,

title: "Created By",

}, {

field: "amount",

width: 100,

title: "Amount", FooterTemplate: "Amount: #= sum #",

}, {

field: "currencycode",

width: 120,

title: "Job Currency",

}, {

field: "trncurrency",

width: 120,

title: "Trans Currency",

}, {

field: "ispaid",

width: 130,

title: "Is Paid/Received",

}, {

field: "isiuv",

width: 90,

title: "Is IUV",

}, {

field: "isreverse",

width: 100,

title: "Reversed",

}, {

field: "isprovisionalvoucher",

width: 165,

title: "Is Provisional Voucher",

}, {

field: "voucherstatus",

width: 100,

title: "Status",

}, {

field: "subcode",

title: "Narration",

width: 270

}, {

field: "credate",

title: "Created Date",

width: 110

}, {

field: "aurthtime",

title: "Authorised Date",

width: 130

}, {

field: "billno",

title: "Bill No.",

width: 90

}, {

field: "billdate",

title: "Bill Date",

width: 110

}, {

field: "subledgername",

title: "Subledger Name",

width: 200

}

]

});

and this is my WCF code:

public object

getGrid(){

 str =

"select serialnumber,jobcode,mname,vouchertype,dummyvouno,CONVERT(varchar,cast(dummyvoudate as date),105) as dummyvoudate ,voucherno,CONVERT(varchar,cast(voucherdate as date),105) as voucherdate,Createdby,amount,currencycode,trncurrency,ispaid,isiuv,isreverse,isprovisionalvoucher,voucherstatus,jobcode+' '+CONVERT(VARCHAR(23),trandate, 121) as subcode,CONVERT(varchar,cast(credate as date),105) as credate,CONVERT(varchar,cast(authtime as date),105) as aurthtime,billno,CONVERT(varchar,cast(billdate as date),105) as billdate,subledgername from vinfohvoucherview"

;

            ds = obj.WsQGetRecSet(str,

"vmacmvouchercontrol", ref

errormsg, registry);

return

JsonConvert.SerializeObject(ds.Tables[0]);

}

can any one tell me how to do this

Grid

answered on 11 Dec 2014

1 answer

268 views

How to achieve Excel-like grid editing?

I have a Kendo UI grid which is navigatable and editable. Using the keyboard arrows I can move between cells. When I hit enter, the cell becomes editable, I can type a value, then hit enter a second time to store the value. I may now move to another cell.

I'd really like to emulate the behaviour of Excel, thus allowing the user to type values and use the keyboard arrows to move between cells, without ever having to hit enter. Is this possible?

Grid

answered on 11 Dec 2014

1 answer

253 views

[Solved] dragging multiple rows from a listview to another listview

Hi there. I'm having trouble dragging multiple rows from a listview into another listview. Please see this plunker: http://plnkr.co/edit/FdMjVVLVHRcpHTCjhsT6?p=info for a description of what i'm working on. the listview on the bottom has little circle 'X''s that i should be able to drag into the top listview. I have 'multiple' select set for the bottom listview, so i would like to ctrl-click on the rows in the bottom list view to drag multiple, but e.draggable.currentTarget is always just an array of 1, it never shows the other rows. How do I fix this? If i have to reachback and look at the listviews currently selected rows, instead of just looking at what is dropped, i'm fine with that, but that doesn't seem to work either.

Drag and Drop

answered on 11 Dec 2014

8 answers

411 views

How to ensure xAxis ticks are on the first of every month?

I'm graphing some data with dates on the x axis. The time span may be anywhere from 3 to 30 months, and I want to always have a tick and a label on the first of each month. How can I control where the labels appear?

I'm using a scatter plot, because I need to accurately show the date of each mark, and the category chart doesn't seem to allow for that. The xField values are Javascript dates.

ALSO..... the last full tick is getting forced to the right-hand side, sometimes out of order. In the attached screenshot, when I set the xAxis.max to Nov 30, the xAxis mark for Nov 1 appears further to the right than data in late November. If I set the max to Dec 1, this is not a problem. What's the best way to resolve this?

Kendo DataViz version 2012.3.801

Charts

answered on 11 Dec 2014

1 answer

172 views

3D chart for MVC

Is there 3D chart available for MVC ? If its available then Please provide demo example.

Thanks.

Charts

answered on 10 Dec 2014