Questions on Kendo UI for jQuery Forum

4 answers

239 views

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

120 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

99 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

235 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

106 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

82 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

answered on 12 Apr 2012

1 answer

214 views

Format a tooltip

The following does not work. Is it possible to use a template and still format some values?
template: "${category} - ${value:N2}"

Charts

answered on 12 Apr 2012

3 answers

2.3K+ views

How to refresh a grid with parameters

How to refresh a grid with parameters, I write that, but it's not work,pls help me ,thanks.
grid_ .dataSource.read({
url: "charge-property/resources/unit_list_data.jsp",
dataType: "json",
data: {
q: "test"
}
});
grid_.refresh();

Grid