Questions on Kendo UI for jQuery Forum

4 answers

416 views

close kendoTabStrip when clicked on removeButton

HI ,

I 'm using  "kendoTabStrip" .

I'm trying  to achieve When i click on DeleteImage , the tab should be closed (removed) . But Im unable to get same .
Please suggest me where I'm going  wrong . Following are codes I'm using :

Thanks,
Pawan

<div id="dtabstrip">

<ul>

<li class="k-state-active">First Tab

<img src="images/DeleteIcon.gif" style="padding-left: 10px; z-index: 1111" onclick='DeleteTabs(this);' />

</li>

<li>Second Tab</li>

</ul>

<div>

1111111sdffds</div>

<div>

2222ssadasfas</div>

</div>

var dtabStrip = $("#dtabstrip").kendoTabStrip({

animation: {

open: {

effects: "fadeIn"

},

close: {

duration: 200,

effects: "fadeOut"

}

});

function DeleteTabs(ImgObj) {

var aa = $(ImgObj).closest("li").text() ;

dtabStrip.remove($(obj).closest("li"));

}

TabStrip

answered on 13 Aug 2012

0 answers

120 views

Nested Grid Template Section

I think this was raised previously but I could not find it. Nested grids do not seem to have a way to handle field substition within a template region.

columns.Bound(o => o.Id).ClientTemplate("#=Id#");

If this is used within a nested grid this gets replaced prematurely by the Id of the parent row. Can anyone confirm

If there is a work around for this
If this has been fixed because I am not seeing it working in the latest version

Thanks

Grid

asked on 13 Aug 2012

1 answer

155 views

grid helper column level filter/sort

I am having a problem getting column level filtering and sorting to work when using the html helper.

I assumed the following would be a column level override, yet this doesn't disable either sorting or filtering.
columns.Bound(o => o.Id).Sortable(false).Filterable(false)

If I don't add the filterable method to the grid then filters don't show for any columns.
//.Filterable()

Yet writing the Javascript by hand it seems setting the column level works. It seems like the column level isn't rendering the correct markup through the helper. Is there a way to access an existing grid and change these options I want to try to avoid rewriting the grids in Javascript which would not only be a pain but defeat the usefulness of the html helper.

I have tried accessing the current Javascript value for a given column to no prevail

var grid = $("#grid").data("kendoGrid");
document.write(grid.columns[1].filterable());
grid.columns[1].filterable(false);
grid.refresh();

Grid

answered on 13 Aug 2012

3 answers

406 views

What are the possible types of data transports?

I've seen references to "odata" and "aspnetmvc-ajax", but what are the others? I'm specifically looking for the default type that would be called manually in: kendo.data.transports["somevalue"]

Data Source

answered on 13 Aug 2012

1 answer

162 views

Manipulate selected data point (marker) on line chart

Hello,

I'm using the series.type="line" chart. I was wondering if these are possible?

If someone clicks on a data point (marker), I was wondering if you can manipulate the colour, size, etc. The only way i could do this was by changing the properties in the DOM element itself, but then when i hover to a new point, the selected data point reverts back to the default settings. Is there no way to change colours and sizes of each data point or does it have to be a standard throughout the entire chart.

Thanks.

Charts

answered on 13 Aug 2012

5 answers

470 views

Error thrown when editing data from read-only remote source

I'm fetching data form a remote source using the DataSource transport.

The remote is read-only, so I only specify the read-object in the transport, like so:

transport: {

read: {

data: {

f:'getOrderSuggestion'

}

The data is to be edited locally in a Kendo Grid and then posted manually to another server.

The problem is, as soon as the user finishes editing a row, the Grid tries to persist the changes. The sync()-method of the DataSource is called and crashes when the RemoteTransport object crashes as it tries to fetch for the update method, which does not exists.

The error:

Uncaught TypeError: Cannot read property 'data' of undefined kendo.web.js:5038
1. Class.extend.setupkendo.web.js:5038
2. Class.extend.updatekendo.web.js:5025
3. Observable.extend._promisekendo.web.js:5339
4. f.extend.Deferredjquery.min.js:2
5. Observable.extend._promisekendo.web.js:5338
6. Observable.extend._sendkendo.web.js:5365
7. Observable.extend.synckendo.web.js:5265
8. Widget.extend.saveRowkendo.web.js:17569
9. Widget.extend.editRowkendo.web.js:17411
10. f.event.dispatchjquery.min.js:3
11. f.event.add.h.handle.ijquery.min.js:3

The code (from the GPL-version of Kendo UI):

var Remote Transport = Class.extend({

// ....

// Other stuff

// ....

setup: function(options, type) {

options = options || {};

var that = this,

parameters,

operation = that.options[type], // <<<----- undefined if transport.update isn't defined and update is called

data = isFunction(operation.data) ? operation.data() : operation.data;

options = extend(true, {}, operation, options);

parameters = extend(data, options.data);

options.data = that.parameterMap(parameters, type);

if (isFunction(options.url)) {

options.url = options.url(parameters);

}

return options;

}

});

Is there any way of making the DataSource fetch remote data, but edit only locally?

Data Source

answered on 13 Aug 2012

0 answers

189 views

Populate list view

Hi, I am new to Kendo UI. I want to populate a listview from JSON object. My JSON obj has image and image name. I want to display image and it's name under that. Where should I start ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Applicatios:</title>

<script src="../lib/script/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="../lib/script/jquery-1.7.2.js" type=""></script>

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

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

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

<script src="../js/jquery.min.js" type=""></script>

<script src="../js/kendo.web.min.js" type=""></script>

</head>

<body>

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

<div id="listView"></div>

<div id="pager" class="k-pager-wrap">

</div>

<script type="text/x-kendo-tmpl" id="template">

<div class="product">

<img src="../../${image}.png" alt="" />

<h3>${name}</h3>

</div>

</script>

<script type="">

$(document).ready(function ()

{

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "images_json.txt",

dataType: "json"

}

},

schema: {

data: "results"

}

});

$("#pager").kendoPager({

dataSource: dataSource

});

$("#listView").kendoListView({

dataSource: dataSource,

template: kendo.template($("#template").html())

});

</script>

</div>

<style type="">

.product

{

float: left;

width: 270px;

height: 110px;

margin: 10px;

padding: 5px;

}

</style>

</body>

</html>

Appreciate your help.
Thanks.

ListView

asked on 13 Aug 2012

1 answer

124 views

HierarchicalDataSource _flatData dont'work

Hi:

productsSource = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", id:"1", items: [
{ text: "Tables & Chairs", id:"11"},
{ text: "Sofas", id:"12"},
{ text: "Occasional Furniture", id:"13"}
] },
{ text: "Decor", id:"2", items: [
{ text: "Bed Linen", id:"21"},
{ text: "Curtains & Blinds", id:"22"},
{ text: "Carpets", id:"23"}
] }
]
}),

only return:

text: "Furniture", id:"1"
text: "Decor", id:"2"

then:

getByUid don't see

{ text: "Tables & Chairs", id:"11"},
{ text: "Sofas", id:"12"},
{ text: "Occasional Furniture", id:"13"}

{ text: "Bed Linen", id:"21"},
{ text: "Curtains & Blinds", id:"22"},
{ text: "Carpets", id:"23"}

thank's

TreeView

answered on 13 Aug 2012

5 answers

208 views

Panelbar Child Row Size

Does anyone now of a way to increase the row height of child elements in the panelbar? I have found that increasing the font size does increase the row height but long strings end up wrapping and this is not what I want.

Thanks,
Casey

PanelBar

answered on 13 Aug 2012

2 answers

210 views

Handling completion of LoadContentFrom()

After loading the HTML content of a Kendo().Window() from the server, I'd like to call a JavaScript function to set up event handlers for DOM elements in the content. I don't see an event definition for the completion of LoadContentFrom(). What's the best way to go about doing this?

Thanks,

--Ravi

Window

answered on 13 Aug 2012