Questions on Kendo UI for jQuery Forum

5 answers

323 views

I am popping up a window and the opening and closing works fine, but the content while simple isn't all rendered. The DIV for the window is below. I have an ordered list with four items and 4 input buttons.

The ordered list, seems to be converted to paragraphs and the input buttons are just plain text. The H1 and the SPAN work as expected. Inspecting them in Firebug, shows that they have the UL, LI tags. The behavor is the same in IE9, Firefox, Chrome and Opera.

Thanks
Randy

<div id="winAutoSave" data-role="window">

<h1>Auto Saved Application</h1>

<p>An auto saved application has been found. <span style=" font-weight: bold; font-style:italic; color: Red;">Sample Red Text</span> This probably occured if you broswer hung or was closed without saving. At this point you may either</p>

<ol>

<li>Option 1</li>

<li>Option 2</li>

<li>Option 3</li>

<li>Option 4</li>

</ol>

<div style=" text-align: center; margin-top: 10px; padding-left: 35px;">

<input type="button" value="Option 1" />

<input type="button" value="Option 2" />

<input type="button" value="Option 3" />

<input type="button" value="Option 4" />

</div>

<div class="clearAll"></div>

</div>

Window

answered on 30 Mar 2012

1 answer

127 views

Delete command executed several times

I have a Grid binded to a DataSource.
I handle the DataSource Error event this way:

error: function (e) {

alert(e);

_ds.cancelChanges();

}

I try to delete a row that throws an Exception. The first time, it's ok ; I see the error and the row is back again.
If I try to delete the same row again, I see in Firebug that 2 requests are made, for the same Id.
It I try to delete the same row again, 3 requests are made. etc. etc.

What am I doing wrong ?

Grid

answered on 30 Mar 2012

1 answer

95 views

POST Form

jQuery Mobile supports posting <form> tags automatically using AJAX:
http://jquerymobile.com/test/docs/forms/docs-forms.html

Does Kendo UI Mobile support this? I can't find any documentation/examples. Do we have to implement our own AJAX methods for each form?

General Discussions

answered on 30 Mar 2012

2 answers

69 views

[Solved] General

Hi,

I’am currently testing Kendo UI Grid. Our product uses Telerik and would like to move towards Kendo. I have a general question on the Grid control using Row templates.

Let say I use the following row template that I would like to use with a Grid. The first cell would be bound to the “Field1” of my object. The second cell is a link that points to a URL bound to “Field2” of my object.

<script id="MyRowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>${ Field1 }</td>
<td><a href=”${Field2}”>click me</a></td>
</tr>
</script>

My question is the following. How would I insert some logic to remove the link if the “Field2” my object set is empty.
In pseudo code I would like to achieve the following.

If myObject.Field2 = “” then
Do not generate a link
Else
Show the link with the Url pointing to MyObject.Field2

In other words I’am trying to find a way to have more control on the html generated when binding fields to a grid. Not sure if using a Row template is the way to go in my case.

Thanks in advance.

Grid

answered on 30 Mar 2012

1 answer

139 views

attr help

i am trying to disable a drop down list control

here is the code

$("#payment").attr('disabled', 'disabled');

this does not seem to happen at all

here is the payment control

<label for="payments">Payment Type:   </label><input id="payment" data-bind="value: payment" name="payment" />

and the code load the datasource

$.ajax({

url: 'dsr.asmx/get_Payment',

async: true,

cache: false,

timeout: 30000,

contentType: 'application/json; charset=utf-8',

data: "{}",

type: 'POST',

dataType: 'json',

success: function (msg) {

$("#payment").val("revpay").kendoDropDownList({

index: 0,

optionLabel: "Select Payment Type",

dataTextField: "Description",

dataValueField: "Code",

filter: "contains",

suggest: true,

minLenght: 1,

change: onPayChange,

dataSource: {

data: msg.d

}

});

}

});

and the function to disable the control by another drop down list choice

function onResChange() {

var res = document.getElementById("result").value;

switch (res) {

case 'c':

alert('Canceled');

$("#payment").attr('disabled', 'disabled');

break;

case 'cb':

alert('Call Back no Sale');

break;

}

the alert's work but the .attr is never firing

General Discussions

answered on 30 Mar 2012

7 answers

382 views

Kendo MVVM Questions

Hello and thanks for the awesome controls :)

I have the following test code i am playing with right now,

<!DOCType html>

<html>

<head>

<title></title>

<script src="js/jquery-1.7.1.js"></script>

<script src="js/kendo.all.js"></script>

<link href="styles/kendo.common.css" rel="stylesheet" />

<link href="styles/kendo.default.css" rel="stylesheet" />

</head>

<body>

<div id="chart" style="height:300px; width:500px">

</div>

<input id="addData" class="k-button" type="button" value="Add Data" />

<script>

$(function() {

var data = [

{

employee: "Joe Smith",

sales: 2000

},

{

employee: "Jane Smith",

sales: 2250

},

{

employee: "Will Roberts",

sales: 1550

}];

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

data = data.concat({

employee: "Will Roberts",

sales: Math.floor(Math.random()*10001)

});

//var chart = $("#chart").data("kendoChart");

//chart.options.data = data;

//alert(data)

//chart.refresh();

});

$("#chart").kendoChart({

title: {

text: "Employee Sales"

},

dataSource: new kendo.data.DataSource({

data: data

}),

series: [{

type: "line",

field: "sales",

name: "Sales in Units"

}],

categoryAxis: {

field: "employee"

},

tooltip: {

visible: true,

format: "{0}%"

}

});

})

</script>

</body>

</html>

Now when i add more items to 'data' JSON Array I would like to see changes in the chart,
The following are in my mind right now,
1). using observable collection (kendo.data.ObservableObject) as a data source? such that when the data object changes it reflects in the control (or element) via kendo.bind but i am not sure how to implement this without the need to .refresh() everytime the collection is changed when Add Data button is clicked
2). A way where chart.options.data = data is assigned the control must automatically reflect the new chart ( in other words i am looking for a live charts control like how we do in MVVM, where the object changes and since its bound to the control it just reflects the changes ) but not sure how to implement with this scenario

could someone please help?

MVVM

answered on 29 Mar 2012

10 answers

509 views

[Solved] Grid data binding to XML

Hello,
First I want to thank you for those beautiful tools you've made to make developer's life easier.
But It seems that either I can't understand how to bind grind to XML or it's simply not working for the beta version. I look at the demo "xml-grid" but it doesn't list any items at all.

Thank you in advance.

Grid

answered on 29 Mar 2012

7 answers

383 views

Need to change column definition based on certain conditions

Hi,

I have a kendo grid. And there is a dropdown. In the grid there is a column having a date field. Now, this date column's data format should be changed according to the value chosen from the dropdown. Suppose, i choose daily or hourly in the dropdown, then i have to display date with time(in the format hh:mm:ss). Suppose i choose weekly, then i have to display date with time(in the format hh).And if i choose monthly or yearly, then only date should be displayed. I am not able to get, how can i change the column definition dynamically. And also, from the server i am getting a date object only as i also have to filter and sort on that column. I am using a template for this column to specify the format. But, depending on various conditions, how can i change the format? Please suggest.

Thanks,
Khushali

Grid

answered on 29 Mar 2012

0 answers

297 views

Grid - How to iterate the Filter options for multiple columns in the ParameterMap function?

I have set 'filterable' and 'serverFiltering' to 'true for a Kendo UI Grid.

In the 'parameterMap' function I am able to get the 'options.filter.logic' and iterate the 'options.filter.filters' array to get the filter values for a single column.

Suppose if the user tries to filter the grid on multiple columns, How can i achieve the above?

The 'options.filter' should be an array so that I could get the 'logic' for each column's filter and so on.

Or Am I misunderstanding this? Is there any other way to get the filter values of multiple columns?

Here is that code snippet.

parameterMap: function (options)
{
if (options.filter)
{

alert(options.filter.logic);
alert(options.filter.filters.length);
for(var i = 0; i < options.filter.filters.length; i++)
{
alert(options.filter.filters[i].field);
alert(options.filter.filters[i].operator);
alert(options.filter.filters[i].value);
}
}

}

Grid

asked on 29 Mar 2012

0 answers

128 views

Error when I click in cancel button in grid with inline

Hi, I have a grid with inline option, and when I edit a row, a later I click in cancel button, the data in row selected is changed.

The grid is:
$("#grid").kendoGrid({
dataSource: sharedDataSource,
toolbar: [ { "create", text: "Add new Prodduct Group" }],
editable: "inline",
change: onChange,
selectable: true,
height: 400,
sortable: true,
pageable: true,
columns: [
{ field: "strProdGroupDesc", title: "Product Group", nullable: false, filterable: false },
{ command: ["edit"], title: " ", width: "110px" }
]
})

function onChange(arg) {
var grid = this;
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
PGDesc = dataItem.strProdGroupDesc;
PGId = dataItem.intProdGroupId;
alert("Item: " + PGId + "-" + PGDesc);
});
}

Grid

asked on 29 Mar 2012