Questions on Kendo UI for jQuery Forum

0 answers

49 views

Does the data grid support colmn resizing by the user?

Thanks

Data Source

asked on 04 Feb 2012

0 answers

96 views

Data binding to dataSource from datagrid

Could someone please explain how this works. i.e. updates to the datasource both in terms of more items add and modifications to the idems added.

Many thanks

Data Source

asked on 04 Feb 2012

4 answers

232 views

Suggestion about "select" event

In my cases, I need to assign additional field's value when user select a result from the hint list. For example,

<script>

$(function () {

$("#tCode").kendoAutoComplete({

dataTextField: "Code",

dataSource: [ { Code:"10", Name:"Jeffrey" }, { Code:"11", Name:"Jack" }]

});

</script>

<input id="tCode" /><input id="tName" />

When "10" is selected, tName's value should be "Jeffrey", when "11" is selected, tName's value should be "Jack".

Here is my suggestion: adding a select event in kendo.autocomplete.js

if (separator) {

text = replaceWordAtCaret(caretPosition(that.element[0]), that.value(), text, separator);

}

//2012-01-18 by Jeffrey Lee

//when item is selected, trigger select event with data as argument

if ($.isFunction(that.options.select))

that.options.select(data);

that.value(text);

that.current(li.addClass(SELECTED));

After adding the "select" event, it's quite easy to implement the "field-linking" by add select parameter in options:

<script>

$(function () {

$("#tCode").kendoAutoComplete({

dataTextField: "Code",

dataSource: [{ Code: "10", Name: "Jeffrey" }, { Code: "11", Name: "Jack"}],

//new "select" event triggered when hint item is selected

select: function (data) { $("#tName").val(data.Name); }

});

</script>

<input id="tCode" /><input id="tName" />

Any feedback is welcome.

AutoComplete

answered on 04 Feb 2012

2 answers

384 views

Width of the control

Hello,
is there a way to set a width to this UI control ? For long strings, it's not very good with the basic width.

I tried with CSS but it's quite buggy (and there's no width property in the documentation)

ComboBox

answered on 03 Feb 2012

5 answers

282 views

assign dataSource property of grid doesn't seem to work

The grid has been initialized, so:

$(document).ready(function()
{
$("#foo-grid").kendoGrid(
{ height: 360,
groupable: false,
scrollable: true,
sortable: true,
pageable: true,
columns:[
{
field: "id",
title: "id"
},
{
field: "baz",
title: "chosen"
}
]
});
});

And later, based on user-interaction with the page, some data are fetched in JSON format from a generic handler (ashx) and are passed to the function below, in the params object:

function populateGrid(event, params) {
// at this juncture, examination in the debugger confirms that params.data contains an array of json objects
// [ {"id":1, "baz": true }, {"id":2, "baz": true}, {"id":3, "baz": false},.{"id":4, "baz": true }]
var grid = $("#foo-grid).data("kendoGrid"); // get a handle to the grid
grid.dataSource = { data: params.data, pageSize: 25 };
}

I get a handle to the grid and then assign its dataSource object via the API, but nothing happens. Instead of instantiating the grid when the document is ready and then later trying to set its dataSource, should I wait to instantiate the grid object inside the function above and populate it all in one fell swoop? If so, how do I completely destroy the grid? The user may make multiple queries, and the grid would then have to be reinstantiated and repopulated several times.

Data Source

answered on 03 Feb 2012

2 answers

216 views

Problem with loading data do grid from remote url

Hello everybody,
i have problem with load json data to grid from url.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

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

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

<script src="scripts.js"></script>

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

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

</head>

<body>

<div class="main">

<div class="header">

<img src="styles/image/kendo-logo-big.png" class="logo" />

<h1>Kendo UI Grid</h1>

</div>

<div id="grid">

<table id="weapons">

<tr>

<th data-field="name">Name</th>

<th data-field="desc">Description</th>

</tr>

</table>

</div>

</body>

</html>

scripts.js

$(document).ready(function() {

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://dhpl.comuf.com/json.php",

dataType: "json"

}

},

schema: {

data: "results"

}

});

$("#weapons").kendoGrid({

dataSource: dataSource

});

json.php

<?php

header("Content-type: application/json");

print('{ "results" : [{ "name" : "Name1", "desc" : "Desc1" }, { "name" : "Name2", "desc" : "Desc2" }] } ');

?>



Url http://dhpl.comuf.com/json.php it's working if you want to check.

Could anybody help me
Thanks

Data Source

answered on 03 Feb 2012

0 answers

154 views

Grid inside PanelBar

Hello

I have an issue with a grid inside a panelbar's content

If a user selects items in the grid and then expands another item in the panel bar, the selections in the grid are lost (so is the scrollbar position).

Is this just a side effect of the grid being hidden?

If so I guess the solution would be to save all selections on a PanelBar click and then restore them.

Just wanted to know if there is an easier solution :)

Rgds,
Kristoffer

PanelBar

asked on 03 Feb 2012

1 answer

195 views

Bug in detail template with html table.

There seems to be a bug with the details row in a Kenodo Grid when it is created using an existing html <table>. If fails to create a column header for the expand/collapse marker and uses the first data column instead (in the example "One"). This gives me 3 column headers, but 4 data columns for each row, my 3 plus the expand/collapse column.

One --> Two --> Three
> --> 1 -> 2 -> 3

<table id="grid">

<thead>

<tr>

<th data-field="one">One</th>

<th data-field="two">Two</th>

<th data-field="three">Three</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td><td>2</td><td>3</td>

</tr>

<tr>

<td>1</td><td>2</td><td>3</td>

</tr>

</tbody>

</table>

<script>

$(document).ready(function() {

var element = $("#grid").kendoGrid({

height: 450,

sortable: true,

detailInit: detailInit

});

function detailInit(e) {

}

</script>

Grid

answered on 03 Feb 2012

0 answers

122 views

Grid Grouping Behavior - Not Collapsing and Shrinking First Column

Hi All,

I have a grid bound to local data, and am using a RowTemplate to render the results.

When I use the grouping functionality a few things happen:

I cannot collapse a group
The first column in the grid becomes very small, hiding the contents of that column.
In my real-world code the Group Name shows up as "undefined", but I can't reproduce that in the example.

I have attached a sample project. Try grouping by LastName to see what I mean.

Thanks in advance for any help!

EDIT: After a little more investigation, it seems that using the RowTemplate is causing the grouping behavior. If I take the RowTemplate out, the grouping works great (aside from the first column being shortened). In my scenario - I really think I need to use the RowTemplate. Is this a bug, or can I build my RowTemplate differently to avoid this grouping behavior?

Grid

asked on 03 Feb 2012

2 answers

497 views

Compare Old and New Values After Grid Refresh

I have a Grid instance that is being refreshed every X seconds and would like to compare the new data (remote) with the existing data, which then affect how the data is displayed within the grid. I have looked through the documentation and the forums but can't seem to find a way to compare the two. The "change" config seems to be for only inline editing... but maybe I am wrong. Any help/links would be appreciated. Here is an example of what is going on here (I would like to compare the values returned for "rate" and "high_rate"):

// KendoUI grid

var kgrid = $("#rate_grid").kendoGrid({

dataSource: {

data: get_rates(),

pageSize: 100

},

height: 360,

groupable: false,

scrollable: {

virtual: true

},

sortable: true,