Questions on Kendo UI for jQuery Forum

9 answers

124 views

[Solved] 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

271 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

132 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

107 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

244 views

[Solved] 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.4K+ 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

answered on 12 Apr 2012

1 answer

434 views

Disabling one or multiple options

Hi,

Is there any way to disable/enable particular item(s) in the dropdown list?

Regards,
Khushali

DropDownList

answered on 12 Apr 2012

1 answer

227 views

Using a custom icon for the validator

Hi, how can I replace icon in the invalid message with my own icon?

Validation

answered on 12 Apr 2012

1 answer

723 views

Clearing a MVVM bound Kendo ComboBox value doesn't update the viewModel

I've setup a combobox with a viewmodel / kendo MVVM binding, however when using the clear method as mentioned in the API, the viewmodel is not updating.

Example source code below, to reproduce just click the clear button, the combobox will show "None", i.e. placeholder value, but the bindings don't update the viewModel's selectedId value.

Also, if the initial viewModel's selectedId is set as null, when picking a different value in the combobox, the selectedId will show '
[object Object]' instead of the set dataValueField value on the combobox. Is there a way to have the combobox correctly handle a transition from null > the selected item's id?

Source:

<body>

<div id="example" class="k-content">

<pre>

{

selectedId: <span data-bind="text: selectedId"></span>,

textbox: <span data-bind="text: textboxValue"></span>

}

</pre>

<input id="products" data-bind="value: selectedId"/>

<input id="textbox" data-bind="value: textboxValue"/>

<button id="clear" class="k-button">Clear</button>

</div>

<script>

$(document).ready(function() {

var viewModel = kendo.observable({

//selectedId: null,

selectedId: 2,

textboxValue: "lorem ipsum"

});

kendo.bind($("#example"), viewModel);

var data = [

{text: "12 Angry Men", value:"1"},

{text: "Il buono, il brutto, il cattivo.", value:"2"},

{text: "Inception", value:"3"},

{text: "One Flew Over the Cuckoo's Nest", value:"4"},

{text: "Pulp Fiction", value:"5"},

{text: "Schindler's List", value:"6"},

{text: "The Dark Knight", value:"7"},

{text: "The Godfather", value:"8"},

{text: "The Godfather: Part II", value:"9"},

{text: "The Shawshank Redemption", value:"10"},

{text: "The Shawshank Redemption 2", value:"11"}

];

$("#products").kendoComboBox({

dataTextField: "text",

dataValueField: "value",

placeholder: "None",

dataSource: data

})

.closest(".k-widget")

.attr("id", "products_wrapper");

$("#clear").click(function() {

$("#products").data("kendoComboBox").value(null);

});

</script>

</body>

ComboBox

answered on 12 Apr 2012

4 answers

469 views

[Solved] Using standard INPUT with Kendo Mobile Style

Hi,

I am trying to use standard input controls such as type=text and the standard select drop downlist with kendo mobile and the default styles seem to place them in various non in-line places (i.e. text box over on right of screen down a bit and no outline etc), what is my best practice?

e.g. in a standard view div (I have also tried putting this into a listview li to see if it helps)

<div id="amountdiv">
                    Enter Amount :
                    <input type="text" id="amounttextbox" value="testing" /><a href="" data-role="button"
                        data-click="amounttextbox_click" data-icon="add">Save</a>
</div>

Do I have to sit down and work out how the mobile UI CSS is applied for each input and override them for each case?

Some of the output from firebug is -

.km-ios input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-ios select:not([multiple]), .km-ios .k-dropdown-wrap {

background: none repeat scroll 0 0 transparent;

border: 0 none;

color: #385487;

font-size: 1.1rem;

min-width: 6em;

outline: 0 none;

padding: 0.4em;

}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-root select:not([multiple]), .km-root .k-dropdown {

margin-top: -0.95em;

right: 0;

}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-root select:not([multiple]), .km-root .k-dropdown {

-moz-appearance: none;

font-size: 1.2rem;

}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), .km-root select:not([multiple]), .km-root .k-dropdown {

line-height: normal;

margin-top: -0.5em;

position: absolute;

right: 0.8em;

top: 50%;

z-index: 1;

}

.km-root input {

-moz-user-select: text;

}

.km-root * {

}

.km-ios, .km-ios .km-button {

font: bold 0.9rem HelveticaNeue,sans-serif;

}

Or do I have to wrap them in a certain Mobile UI container or should I be using the Web UI Suite in conjunction with mobile somehow?

Hopefully I am missing something simple as still very new here :)

Thanks
Matt

General Discussions

answered on 12 Apr 2012