Questions on Kendo UI for jQuery Forum

0 answers

92 views

Hi, exists some way for using a grid where the fields for edition some distinct to fields for adding?
I need a grid with editing popup with some fiels for update, and other fields are for adding.

Thanks

Grid

asked on 13 Apr 2012

4 answers

1.8K+ views

Refresh Template When Local Data Changes

I am using a simple template and rendering the html using $("#main").html(kendo.render(template, repairs));. Since I am just dealing with local data, I felt there was no need for a datasource, but when I add an item to the repair array I would like to have it update the html via the template. I am using $("#main").html(kendo.render(template, repairs)); again to do that right now, but is there a better way? Thanks.

Wade

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

<div id="content">

<div id="RepairNum">

Repair:#= RepairNum #

Customer:#= CustomerName #

</div>

</script>

<script>

function Repair(repairNum,customerName) {

this.RepairNum = repairNum;

this.CustomerName = customerName;

}

var repairs = new Array();

repairs.push(new Repair("111111","Test1"));

repairs.push(new Repair("222222","Test2"));

repairs.push(new Repair("333333","Test3"));

$(document).ready(function() {

var template = kendo.template($("#template").html());

$("#main").html(kendo.render(template, repairs));

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

//Attempt to get the customer name

var repairNum = $("#repairnum").val();

$.get('/app/json.mx', {RepairNum : repairNum},

function(data)

{

repairs.push(new Repair(repairNum,data));

$("#main").html(kendo.render(template, repairs));

});

$("#repairnum").val("");

$("#repairnum").focus();

});

</script>

Templates

answered on 13 Apr 2012

1 answer

628 views

Kendo UI Grid not firing destroy or add events

Hi, I'm using the kendo UI grid without using the dataprovider(including the transport object) because we are using server sides pushed data.

All I want to do is when i click delete on the grid, or add, catch that event and do some stuff.

however I can't get the listener to kick off. Iv'e tried 2 methods outlined in the docs, but I think its because i'm not using the data provider?

$("#grid").kendoGrid({

columns: [

"Id",

"HostName",

"BaseUri",

{ field: null,command: "destroy"}

],

editable: true,

remove: function(row) {alert("removed");}

});

and

$("#grid").kendoGrid({
     remove: function(e) {
         // handle event
 });

have not been working for me

This is how i'm refreshing the data

$("#grid").data("kendoGrid").dataSource.data(message).read();

I also had the same issue using the toolbar[] to define the destroy button.

Looking at my console it looks like its trying to call destroy in the data provider but again i'm not using that

o.extend.getkendo.all.min.js:11
h.extend._modelForContainerkendo.all.min.js:11
h.extend.removeRow <- there's the event i'm trying to catchkendo.all.min.js:11
h.extend._editablekendo.all.min.js:11
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.i

Grid

answered on 13 Apr 2012

0 answers

44 views

Script is executed inside window's <div> during window creation

Hello,

I have a code like this:

<div id="wnd1">

<div>Click me!</div>

<script type="text/javascript">alert('executed 1');</script>

</div>

<script type="text/javascript">

(function ($) {

$("#wnd1").kendoWindow({

height: "500px",

width: "400px",

modal: true,

draggable: true,

resizable: false,

visible: false

});

})(jQuery);

</script>

And in this case alert is executed twice. First time because of initial script rendering and second when window is initialized.
Should it be such case and how to prevent it?

Also I can see this window during the second alert, is it ok that window shows and hides when "visible: false"?

Vladimir

Window

asked on 13 Apr 2012

1 answer

285 views

Grid filtering - pre-defined options

I've had a request come in for a client for this feature and wondering on the best way to implement this with the Kendo Grid. I know the demos actually show this, but not actually within the filtering selectable options.

What I'd like is potentially a custom filter (say a customName instead of number/string etc) that I can create, then call on each column to pre-populate certain row data and somehow call this into the Grid API to filter on the selected value. Such as, say, a number will allow you to select a number, a customName attribute will allow you to select from a dropdown list of certain elements.

Is this possible if I delve into the nitty gritty of the Grid API?

Grid

answered on 13 Apr 2012

0 answers

56 views

Unable to view grid data component in firefox 3.0.19 version.

Unable to view grid data component in firefox 3.0.19 version.
i am using Kendo UI v2011.3.1129 version.

Please assist me.

Thanks in Advance.

Grid

asked on 13 Apr 2012

0 answers

114 views

Datasource.add and observableObject overridden

Hi,

I've been using the last version with the MVVM and new DataSource, and I have a problem when adding an entity to a remote DataSource.

After sending the ajax request for adding a new entity, the response is merged with the entity.
This is done in dataSource._accept :

  if (type !== "destroy") {

                    models[idx].accept(response[idx]);

But the Model.accept will extends the model and will override all observable fields by the response from the server.
I have to modify the Model.accept method like this :
if (that instanceof ObservableObject) {
that.init(data);
} else {
extend(that, data);
if (that.idField) {
that.id = that.get(that.idField);
}
}

After the modification, my code works but I strongly believe it's not the good way.

Thanks in advance,

Laurent.

Data Source

asked on 13 Apr 2012

0 answers

68 views

Unable to display Grid data component in firefox 3.0.19 version.

Unable to display Grid data component in firefox 3.0.19 version.
i am using Kendo UI v2011.3.1129 version.

Please assist me.

Thanks in Advance.

Grid

asked on 13 Apr 2012

0 answers

78 views

Kendo grid blowing up when properties have spaces

Hello-

I'm trying to use Kendo grid and so far it's pretty good. The one thing I don't heart about it is that when you do

$("#mydiv").kendoGrid( { dataSource: myJsonObjects })

it takes the explicit property name. For a good user experience, CamelCasing isn't awesome. Instead, I'd like to have my columns in English, so I would not want
"AccountName" and "ThisIsAColumnThatIsHardToRead"
but rather
"Account Name" and "This Is a Column That Is Easy To Read".

So I walk my JSON objects and insert spaces in the property names (this is unusual but 'legal' in Javascript). But when I hand this revamped object list to Kendo, I get an error:

Invalid template: '<tr><td>#=Account

Name"</td><td>#=This Is A Column That Is Easy To

Read</td></tr>'enerated code:'var

o,e=kendo.htmlEncode;with(data){o='<tr><td>'+(Account Name)

+'</td><td>' + (This Is A Column That Is Easy To Read) +

'</td></tr>';>return o;'

Grid

asked on 13 Apr 2012

6 answers

244 views

Model Documentation

Is there any documentation on the Model? I see it for DataSource, but I know there are things involved, but I cannot find a good source of info on it. Such as things we can decorate the individual fields with...

Data Source

answered on 13 Apr 2012