Questions on Kendo UI for jQuery Forum

0 answers

227 views

how to add tooltip on action buttons of kendo window

Hello,

i want to add tooltip text on action buttons of kendo window (e.g. close , refresh, minimize, maximize etc) , can anyone help me in this ?

Window

asked on 23 Jun 2012

2 answers

237 views

Generic form field binding

I want to implement a generic form field binding with kendo MVVM. This means that my model shouldn't contain any hard-wired field IDs in its bindings, instead it should be able to bind to any form rendered by the server. Here is what I've got so far:

var genericModel = {};

function bindField($field) {

var viewModel = kendo.observable({

value: "John Doe"

});

$field.attr('data-bind', 'value: value');

kendo.bind($field, viewModel);

genericModel[$field.attr('id')] = viewModel;

}

$(function () {

var $inputs = $('input').not('.datetimepicker, .autocomplete');

$inputs.each(function () {

bindField($(this));

});

This code iterates through all input fields, attaches the necessary data-bind attributes to them and sets up the model binding for each field. Finally all field objects are stored in the global genericModel object.

Unfortunately, this approach doesn't seem to work - changes aren't updated in both directions. I also tried the "nested binding" approach mentioned in the docs but had no luck either. I'm using KendoUI v2012.2.531

Any idea?

Thanks,

Franz

MVVM

answered on 22 Jun 2012

0 answers

142 views

Server side push updates?

I have several people editing the same grid, and I would like their updates to push out to the everyone else as they save the grid. Do you support server push in updates?

This is a very common pattern these days with twitter feeds and such.

Grid

asked on 22 Jun 2012

1 answer

103 views

Forum Search

Am I blind or do your forums not have search functionality? This would be very helpful. I'm using google's site: search to search your forums, but have no confidence that google is truly up to date.

Thanks,
Jeff

General Discussions

answered on 22 Jun 2012

2 answers

158 views

Documentation or example for new splitview?

Not sure if this should go in the Beta Forum or here, but just downloaded the 2Q2012 beta, and would like to try out the SplitView.
I did not see anything that looked related in the Examples folder, where should I look for more information on how to use this new feature?

Thanks

SplitView

answered on 22 Jun 2012

1 answer

294 views

Change Autocomplete dataSource on the fly.

I have a problem. I want to change dataSource of my Autocomplete on the fly. Here is the problem :

I have a dropdown which has "ItemID" and "ItemName" for its element.

When i select ItemID on the dropdown, i want my autocomplete to select "ItemID" data from the server for its dataSource.

And when i select ItemName on the dropdown, i want my autocomplete to select "ItemName" data from the server for its dataSource.

Please help me..

AutoComplete

answered on 22 Jun 2012

2 answers

244 views

Changing the editor cols

I'm trying to change the Editors textarea cols property using the following

var onCollapse = function(e) {
$('#editor').attr("cols", 200);
var editor = $("#editor").data("kendoEditor");
editor.update();
};

$('#Splitter').kendoSplitter({
collapse: onCollapse,
panes: [
{ size: "300px", min: "100px", max: "300px", collapsible: true},
{ size: "400px" }
]
});

I know the event is firing and that the value is getting changed, but the editor size stays the same. Also I have try changing the editors css width property to no avail. Thanks

Editor

answered on 22 Jun 2012

0 answers

153 views

Grid - no row update with DropDownList component as editor

Hi,

First of all, let me congratulate you about these really nice set of controls, methods and properties !
Great work.

Now, about what brings me here is the following :

Situation :
One grid, inline row editing, server sorting, server paging
4 columns : 3 string, 1 bool
Straight forward.

$(document).ready(function()

{

$("#gridStatus").kendoGrid({

dataSource: {

transport: {

read: "/content/reference_tables/status/json.status.list.php",

update: {

url: "/content/reference_tables/status/json.status.update.php",

type: "POST"

},

destroy: {

url: "/content/reference_tables/status/json.status.delete.php",

type: "POST"

},

create: {

url: "/content/reference_tables/status/json.status.create.php",

type: "POST"

}

},

error: function(e) {

alert(e.responseText);

},

schema: {

data: "data",

total: "total",

model: {

id: "id",

fields: {

table_name: {

type: "string",

validation: { required: true}

},

status_name: {

type: "string",

validation: { required: true}

},

description: {

type: "string",

validation: { required: true}

},

active: {

type: "boolean"

}

},

pageSize: 10,

serverPaging: true,

serverSorting: true,

sort: { field: "table_name", dir: "asc" }

},

sortable: { mode: "single", allowUnsort: false },

pageable: true,

editable: "inline",

toolbar: ["create"],

columns: [{

field: "table_name",

title: "Table",

width: "25%"

}, {

field: "status_name",

title: "Name",

width: "20%"

}, {

field: "description",

title: "Description",

width: "35%"

}, {

field: "active",

title: "Active",

width: "100px",

template: "<div align=center>#= active #</div>"

},

{ command: ["edit", "destroy"], title: " ", width: "210px" }

]

});

Working situation :
All string columns are edited as a textbox. Works fine, row is updated, .. nice and smooth as designed.
In fireBug, on updating, I see that the update PHP page is called as it has to be.

Not working :
But the issue happens when I turn the first row editing is a drop down list

(...)

columns: [{

field: "table_name",

title: "Table",

editor: tableNameDropDownEditor,

width: "25%"

}, {

field: "status_name",

title: "Name",

width: "20%"

}, {

field: "description",

title: "Description",

width: "35%"

}, {

field: "active",

title: "Active",

width: "100px",

template: "<div align=center>#= active #</div>"

},

{ command: ["edit", "destroy"], title: " ", width: "210px" }

]

});

function tableNameDropDownEditor(container, options)

{

$.ajax({

url: "/content/reference_tables/status/json.status.table_names.php",

dataType: 'json',

success: function(items) {

$('<input id="idEditDropDown" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

dataSource: items,

dataTextField: "table_name",

dataValueField: "table_name"

});

$("#idEditDropDown").data('kendoDropDownList').value(options.model.table_name);

},

error: function(data){

console.log('error occured loading the JSON');

}

});

}

This is the JSON returned by json.status.table_names.php :
(returns the list of the database table names filtered (select * except the one starting with .. bla bla and bla bla) )

[{"table_name":"audit_create"},{"table_name":"audit_visible"},{"table_name":"links"},{"table_name":"links_activity"},{"table_name":"msg_content"},{"table_name":"msg_flow"},{"table_name":"msg_status"},{"table_name":"ratings"},{"table_name":"shortlists"},{"table_name":"site_settings"},{"table_name":"users"},{"table_name":"vendor_websites"},{"table_name":"vendors"},{"table_name":"visitors"},{"table_name":"visitors_history"}]

Looks fine as the drop down populates the list.
So far so good, list is populated.

BUT .. the problem is that when I want to UPDATE the row !

As soon as I put a drop down list component, it does not update at all !
FireBug does not event show me the update PHP page called. It acts as no data has changed so it does not trigger the update process.
I am probably missing some things in the definition of the drop down ...
I tried with fixed values instead of filling it in with JSON .. but same behavior

If you please could assist a bit. It is propably a piece of cake but this starts to drive me crazy ;-)

Any help is welcome, obviously.

Wbr,

/Olivier

Grid

asked on 22 Jun 2012

0 answers

189 views

Popup editor: Save Changes

Hi,

I am using grid with custom popup editor template. When I press UPDATE button CRUD update request is working properly. However when I keep edit the other rows it is posting all data from the previous rows. And the data is growing after every UPDATE.

If grid is posting the update request when I click the Update button on popup editor, I think it doesn't need to send the data from previous row that already updated in the server.

What do you think?

Thanks!

Grid

asked on 22 Jun 2012

1 answer

699 views

Grid Grouping - Default a group as Collapsed

Hey All
When using a Grid and a grouped Data Source; is there anyway to make a group be collapsed by default (rather than expanded).

DataSource parameter ...

group: [{ field: "DepartmentName" }, { field: "EmployeeName"}],

I would love it if there was something like

group: [{ field: "DepartmentName", status: "exp" }, { field: "EmployeeName", status: "col"}],

I could always collapse each on load, but that seems cumbersome

Grid

answered on 21 Jun 2012