Questions on Kendo UI for jQuery Forum

1 answer

92 views

Implementing an controller action for Grid paging

I think I might be missing the main documentation.

Is there documentation explaining how to implement an ajax controller handling grid data to be paged? The same for sorting and filtering? It seems like this should be clear in the docs (either here or here), but I don't see it. Am I missing the complete docs?

Basically, I need to know how to write (i.e. what parameters I should accept and what I need to return) an ajax controller action that will handle paging, sorting, and filtering. For example, what page we are on, how many pages are left, filters, etc...

I looked through the walkthrough as well, but didn't see anything handling these issues.

Thanks

Grid

answered on 12 Apr 2012

0 answers

101 views

Appending data

I want to give users an option to load n more records once they've scrolled to the bottom of a ListView. I have a very large dataset and have set serverFiltering: true, serverPaging: false, serverGrouping: true, serverSorting: true. What's the best way to approach this? My ListView is currently bound to the datasource. I'm thinking about instead declaring a local data object and using datasource's change event to append data to that local data object and purge as necessary (from the beginning once record set reaches a certain point).

Is there a more elegant approach that I am missing? It sounds as if ListView's appendOnRefresh option is going to work the opposite way that I would like (pulling down to put data on top, whereas I want to scroll down and then click to append data on bottom).

Help appreciated

Data Source

asked on 12 Apr 2012

4 answers

248 views

ListView within Scroller & Icons

Hello,

1.) i got listviews nested in buttonsgroups and i only want the lists to be scrollable (scroller) and not the entire page

<div data-role="scroller" class="scroller-content">

<ul data-role="listview">

<li>Webdesign</li>

<li>Webprogrammierung</li>

<li>Content Management Systeme</li>

<li>Barrierefreies Webdesign</li>

<li>Flash Programmierung</li>

<li>Spiele Programmierung</li>

<li>Soziale Netzwerke></li>

<li>Usability</li>

<li>Website Konzeption</li>

</ul>

<ul data-role="listview" style="display:none">

<li data-icon="custom-apple">iPhone/iPad</li>

<li data-icon="custom-android"><a>Android</a></li>

<li data-icon="custom-mobile"><a>Handy Spiele</a></li>

<li data-icon="custom-cart"><a>M-Commerce</a></li>

</ul>

<ul data-role="listview" style="display:none">

<li>Corporate Design</li>

<li>Imagebroschüre</li>

<li>Geschäftsbericht</li>

<li>Flyer Design</li>

<li>Plakat Gestaltung</li>

<li>Bildbearbeitung</li>

</ul>

</div>

but as soon as the listviews are nested inside the scroller, it isnt scrollable anymore

2.) icons next to the listitems only work when <a> is set.
how to provide a simple list (items not selectable, no anchors) with icons?

thanks

ListView (Mobile)

answered on 12 Apr 2012

2 answers

1.0K+ views

how can i get the pure json data of the selected row

I create a Grid using kendoGrid :), here is the code for getting the selected row's data

var tr = $("#productGrid").find("tbody tr.k-state-selected");

var product = $("#productGrid").data("kendoGrid").dataItem(tr);

for(var o in product){

if(product.hasOwnProperty(o)){

//do something with o ..

//Here i found o has properties like: _events,uid

/*

product

o.extend.init

_events: Object

test0: o.extend.init

test1: o.extend.init[2]

test2: "string"

test3: "string"

uid: "b5494c4b-c89d-4139-885d-b376933f17bd"

__proto__: y.extend.b

*/

//It may have trouble when i want to do something with o

}

so, what should i do to get the pure product object without the properties: _events , uid..

since my native language is not English, please forgive my grammar errors :)

Grid

answered on 12 Apr 2012

4 answers

127 views

Custom Widget Plugins questions

Greetings.

My company's flagship product is currently built on jQuery and KendoUI, with all our plugins using the standard jQuery style. I am in the process of converting them to use the KendoUI plugin style outlined in the recent blog posts, so we can take advantage of the new MVVM features. That said, the blog posts showing how to write KendoUI plugins leave out how to do the following:

Events: I assume we are supposed to use the "widgetData.bind('event', handler)" style for externally facing events. I just want to know how I should bind and trigger my custom events for my plugins? Also, for internal events should I keep using the jQuery style "scopeSelector.on('event', 'elementSelector', handler"?
Declaractive style & Data Sources: What does my plugin need in order to hook up to data-sources and references provided by "source" and "value" tags from the new declarative style of plugin initialization?

Thanks for any help you can provide.

General Discussions

answered on 12 Apr 2012

9 answers

109 views

Help with making a grid editable

I am not sure how to approach this particular case. I have a json dataset coming back from a web service and it returns the following data:

"WFP_MacroDemandForecastResponse": {

"Results": {

"@ViewName": "WFP_MacroDemandForecast",

"RowSet": {

"@ColDims": "Workforce Planning Value",

"Rows": [

{

"WorkforcePlanningMeasure": {

"@Name": "HC Demand",

"@DimName": "Workforce Planning Measure",

"@ID": "Headcount Demand",

"#text": "HC Demand"

},

"Value": "0",

"ChangeRate": "0",

"BaseYear": "0",

"ForecastDriver": "0",

"_5YearGoal": "0",

"Year1": "0",

"Year2": "0",

"Year3": "0",

"Year4": "0",

"Year5": "0"

},

{...rows node repeats...}

In order to make the grid editable, I have to supply a model and an ID, but not sure how to specify this when the data source has the ID in an child attribute element.

Here is the code:

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

transport: {

read: {

url: "http://localhost/essolve/esjson.asmx/WFP_MacroDemandForecast",

dataType: "json"

}

},

batch: true,

schema: {

data: "WFP_MacroDemandForecastResponse.Results.RowSet.Rows",

model: {

id: "WorkforcePlanningMeasure",

fields: {

WorkforcePlanningMeasure: { editable: false }, // ???????

ChangeRate: { editable: true },

BaseYear: { editable: true },

_5YearGoal: { editable: true },

Year1: { editable: true },

Year2: { editable: true },

Year3: { editable: true },

Year4: { editable: true },

Year5: { editable: true }

}

});

$('#wfp_DemandMacroProjection').kendoGrid({

dataSource: this.Data,

sortable: true,

pageable: true,

rowTemplate: kendo.template($("#row-template").html()),

columns: [

{ field: "WorkforcePlanningMeasure[\"@Name\"]", title: "Metric", width: 200 },

{ field: "ChangeRate", title: "Change Rate", width: 30 },

{ field: "BaseYear", title: "Base Year", width: 30 },

{ field: "_5YearGoal", title: "Goal", width: 30 },

{ field: "Year1", title: "Year 1", width: 30 },

{ field: "Year2", title: "Year 2", width: 30 },

{ field: "Year3", title: "Year 3", width: 30 },

{ field: "Year4", title: "Year 4", width: 30 },

{ field: "Year5", title: "Year 5", width: 30 }

],

editable: true

});

Grid

answered on 12 Apr 2012

2 answers

248 views

copy or duplicate record option in grid

sir/madam,

I want copy or duplicate record in kendo ui grid, how is it possible this option, could u help me please, next i need custom edit delete option and add new record or row come with (edit, delete) same columns,

i am expecting your reply

Thanks & Regards,
C.Vadivel

Grid

answered on 12 Apr 2012

0 answers

117 views

Setting Switch On and Off labels

Hi There,

Is there a way to set the onlabel and offlabel values as attributes on the input tag or does this have to be done using javascript?

As an aside is it possible to disable a switch as well?

Thanks!

Rob

Switch (Mobile)

asked on 12 Apr 2012

1 answer

90 views

How can we add page scrollview in splitter functionality?

Hi Guys,
When I am adding page scroll view functionality in splitter for mobile apps then its not working.

when I am adding <script src="js/kendo.mobile.min.js" type="text/javascript"></script> then scrolling is working.

But when i am removing this from html file then splitter is working and scrolling doesn't work.

attaching html file.

Please help me in resolving this.

Splitter