webismymind / editablegrid Goto Github PK

I have been working with Editable grid for a few hours over the weekend and I noticed that if I have more than 20 rows in my XML document the grid fails to render at all and throws a JavaScript error. [setCellRenderer] Invalid column: action
I am not sure what I should do to resolve the issue or if the loadXML function just can't handle the large amount of columns that I am presenting in the XML ( currently 18 ).

Hi there,

How to create a editable table as shown here:
http://www.wmccf.org/co_worker/co_worker.php

Now I can show the demo provided. The value can be changed, but can not be saved.

Could any one tell me how to use editablegrid to create a simple editable talbe?

Thanks.

guangshan

Hi! First of all thanks a lot for this wonderful library.

I have succeeded importing it to a django server and make it work with python. auto saving each value modification to server.

But now I'd like to append an empty row except the first column which is the index row value. Do you have a scripted example for that?

I've tried the duplicate() and the insertAfter() value. but it doesn't changes the current row values but the previous one. and also import the this.getrowvalues(this.getRowcount-1). Do you have an easy way to do that? Thanks a lot

I know guys aren't big on questions, but I am not sure what else to do

scenario:
sql joined table - TableA, TableB
two ID colums
and a grid with columns from both db-tables

how does editableGrid.getRowId(rowIndex) get to be something like editableGrid.getValueAt(rowIndex, editableGrid.getColumn("TableB ID"))

how can the ajax > data > id column be defined

it's explained better here if you're keen

http://stackoverflow.com/questions/11344155/ajax-update-to-multiple-database-tables

re - but I am not sure what else to do... I've no problem using freelancer.com et al but would like to learn where I can

Using this html (http://pastebin.com/bGFkYC4Y) as a example:

1. order by name
2. press the "Probar" link

the new row is added as the first entry in the table ;)

How do I control the width of a column?

Hi there great job with the grid, do you have any time to release enhanced version like similar to jqgrid with,

1. Form to capture input, with more table related featured for adding new rows etc...

appreciated if you could add more featured related to My SQL back end table

Favaz

I have a button inside of a cell, which I created a CellRenderer with "" code which works fine. I'd like to have it respond to a button click. I'd like the row to be deleted, but also have the rest of my code know that the row was deleted.

Any thoughts would be helpful.

In short, here's my code:

function DeleteCellRenderer(config) {
  this.init(config);
}

DeleteCellRenderer.prototype = new CellRenderer();
DeleteCellRenderer.prototype.render  = function(_cell,_value){
          $(_cell).html("<button class='btn btn-small'><i class='icon-trash'></i></button>")
              .on("click", {obj: this, cell: _cell, value: _value}, this.deleteRow); };

DeleteCellRenderer.prototype.deleteRow = function(evt) {
  var row =  evt.data.obj.editablegrid.getRowIndex($(evt.data.cell).parent().attr("id").split("_")[1]);

// I can remove the proper row here, but need to notify the rest of my program that the data was deleted.

              };

Hi,
double datatype column is showing comma(,) as the decimal separator.
Is it fixed or can we change that ?
My local machine regional settings are as per English, New Zealand, so ideally it should show period as the decimal.

also I would like to show cubic meters as unit of the value, is it possible to do that ?

I used below line as metadata:
{"name":"12-06am","label":"12 July 06:00 a.m.","datatype":"double(2)","bar":false,"editable":true,"values":null},

Thanks !
Sunny

If you use E{nnn} as row id in the html table (instead of the numbers you used) the demo throws an "tr is null" error and doesn't delete the row when you click on the action column.

Look here for a complete html example [http://tinypaste.com/d2182]

I was wondering if I could get some help (code) in :

1. to have a row at the end of the table with textboxes and dropdowns for the respective cells and an insert button instead of the delete button, so if i write values in those textboxes and click the insert button, the row gets inserted with auto ID. just like somewhat the ASP.NET gridview.
2. Is there any support for JSON data type. I mean binding the table to JSON Data.
3. the grid does not support multiple choice values. it only supports single choice with dropdown. Are you considering this in your next version.

I would like to pass a value into an editablegrid, hence change the sql in the grid.However, no matter GET or POST method, i found it doesn't work.

Retrieving values(utf-8_unicode_ci) from database and it turns up as ?????.
but when i edit that value on the EditableGRid, with the respective language, it will turn up as unreadable value.
let's say Japanese, すし(sushi). if sushi is store in data base, it showed up as ???? on EditableGrid
if sushi is stored into database using EditableGrid, then it will appear as "��" in database.

please help me

Where is your Wiki section with samples, tutorials, screen snapshots, etc.
This would be FANTASTICALLY helpful :-)

Hi

I am trying to do grouping of row based on one column. Say if i have a table with 5 columns (address, city, state, country, pincode) and i want to group all the rows which has the same state in tree like view.

can you please suggest an idea to implement the same using your plugin.

I am new to github so dont know where to post the query so placing it under issue. sorry for that.

Thanks.

I see you haven't done any docs yet (when?) but there is a note at the bottom of the readme.txt referring to a "totals line". How can I perform column or row based calculations like a total?

When I add a new row, I would like to invalid some cells to let the user know that she needs input data there.
How do I add a validator for IPV4 addresses?

Thanks,

ltlu

In trying to write my own converters (convertTo for display, convertFrom for model update) I found that the applyEditing method updated the display prior to updating the model (and calling the modelChanged event).
In my attempts to emulate a to (render) and from (editor) converter, this seems logically backwards.

My recommendation would be to use the editableGrid.getValueAt method to get the previousValue first, then update the model if the value is different, and then call the setValueAt method. It would seem to flow more logically from a programmatic perspective.
(Note: this method I believe starts on line 158 of the editablegrid_editors.js)

I'm currently using this with bottlepy and python and I am linking it to a sqlite3 database.
I've written code that can generate XML code based on the data I need from the database and I can display this very easily.
I also have code written for generating data from XML code.

The issue now is how do I get new XML code if the user changes the data. I know there is a function in php but for some reason I can't get that to work. And I don't know how I would be able to interface that with the rest of my python code to send it back to the database.

Please let me know if there is already a way. I am willing to contribute to this project if there is no current way to do this. Let me know what path I can follow to get this to work.

Thanks

I have a grid with a column of date/times. Visually, I have the date printed in standard form and then the time as a clock icon (the time is less important), which I've generated in a custom renderer. I would like to be able to click on the date to get a date picker (much like the default is) and then the clock to edit the time.

Looking a the source code, the actual target element is lost in the mouseClicked function of EditableGrid and only the row and column is captured. It seems like to get the functionality, I could override this method to capture the clicked element. Any other thoughts?

Hi,
I need to highlight the edited values until user hits a save button. Is it possible using editable grid ? if yes, then how ?

Also I need to disable sorting of all the columns in my grid, I tried to use below metadata to disable sorting but this doesn't work. : "enablesort":false

{"name":"12-06am","label":"12 July 06:00 a.m.","datatype":"double(,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null,"enablesort":false},

Thanks a lot for your time !
Sunny

In callback tableSorted any parameters regarding the sorted column.

in editablegrid.js row 1219, this change:

// callback
tableSorted(columnIndexOrName, descending);

(PS: how do I update the file compressed with this change?)

thanks

Editable grid has a memory leak when rendering a table. I tried to trace this down a little, and I think the problem is that _renderGrid (which creates the table) is called twice:

1. renderGrid -> _renderGrid
   2).renderGrid -> setPageIndex -> refreshGrid -> _renderGrid

I suspect that there is already an event attached to the first table created which prevents it from being freed by the garbage collector when the 2nd table overwrites it.

I'm not sure if it's a good idea to create the table twice to begin with, but if it is necessary, need to remove the events or whatever is keeping the reference to it.

Since this is done internally in renderGrid, there is no way to bypass it from the outside by removing the table (i.e. $("#tableid").empty() ).

Just wondering why actually modelChange is not triggered when we use setValueAt() method :)

Anyway to implement a password protect in order to edit cells?

Hi,

Is it possible to change the onclick, onblur, and other events to addEventListener?
I use this for greasemonkey, which does not support setting on* due to xpcnativewrapper

thanks, love the lib

Hello webismymind,

This script is very good.I am able to make changes to my database using code given in editablegrid-mysql-example
but I want to display pagination and filter. please add code for that in editablegrid-mysql-example.

Thank You.

Please provide - in the source code - better documentation.
For example, the class EditableGrid.php...

1. why is this needed?
2. what is the primary API?
3. where in the "process" is this server functionality used?

When I define a metadata entry for a field (eg. "double" and give it a "values" property, the renderer handles the display of certain options properly (in my case, "thousands_separator" and "decimal_point"). However, when the field needs to be edited, instead of a text editor as I expect, I'm provided a select dropdown with the values contained in the "values" property in addition to my original value. It seems to me that this may be an issue with the SelectCellEditor incorrectly being triggered for the columns containing a "values" property. This seems to be occurring not only in the snapshot download but the development version as well. The documentation for defining a column's value formatting isn't exactly clear about how this should be done.

this may be a bug [hard to imagined it being designed this way]

with enablesort true, plus a infoheader alert, the column header is displayed
with enablesort false, plus a infoheader alert, the column header is not displayed

replicated in the 'full demonstration'

While looking at EditableGrid.php I found that most of the code relates to XML and JSON generation.
PHP provides some facilities for this like simplexml and json* functions. Is there any technical reasons for not using them ?

Hi

Removing more 20 rows starts becoming very slow - the call to refresh the grid after every remove seems to be the culprit. I have added a removeMulti function and edited the remove function to allow for suppressing the refreshGrid when removeMulti calls remove().

You can view this at
https://github.com/dineshcooper/editablegrid/commit/dfc1a9456004616005df412c1777c6529c95cd1c

Seems to work well for me but would like to see if you have a more elegant solution.

Thanks

its posible to make editableGrid responsive?

Hi, I need to align the data towards the centre of the corresponding cells.
Please suggest how I can align the column text including the headers to the centre of their corresponding cell ?

Hi,
is it possible to mark a column non-editable in editable grid ?
I have a requirement where the first column will have static information and that should not be allowed to change.
Thanks!
Sunny

So, looking at this demo --

http://www.editablegrid.net/editablegrid/examples/json/index.html

it all works fine. However, it seems to work fine only because of the way the sample data was set up. In particular, part of grid.json looks like this --

    {"id":1, "values":{"country":"uk","age":33,"name":"Duke","firstname":"Patience","height":1.842,"email":"[email protected]","lastvisit":"11\/12\/2002"}},
    {"id":2, "values":["Rogers","Denise",59,1.627,"us","[email protected]","","07\/05\/2003"]},

processJSON() allows you to specify data either as a list of columns or as an associative array. Looks like the sample data was given this way so we can see both methods. (Very nice.)

However, the list of columns only works as long as an associative array had been processed previously.

If the first data point processed is a list of columns, you get a

"Uncaught ReferenceError: cellValues is not defined"

error.

The fix seems quite simple. In editablegrid.js, add this line --

            var cellValues = {};

before this line

            // row values can be given as an array (same order as columns) or as an object (associative array)^M

In some situations, when sort is enabled, HTML table rendering is misbehaving.
The table is auto-sorted, although the header row was not clicked. However, when I came to edit a filed by clicking it, the input of the field was reverted to the original value before the table sort. If I wouldn't edit the value, the value that will be shown is the original one, but modelChanged function was not called.

You can see it here:
http://www.editablegrid.net/editablegrid/examples/attach/index.html
For example, in the country row click on France field. you will get Belgium automatically.

When I attach EditableGrid to existing HTML table and in some cell there are & amp; entities, Grid replaces ampersand with & so it becomes & amp;amp; and in browser I see & amp; instead of &.

Second problem is that, when i start to edit some cell where are some &, in input i get & and it is annoying.

First problem I temporarily solved by creating cellRenrerer where i do cell.innerHTML = value.replace('& amp;amp;', '& amp;');

But the second one is still remains.

Please fix it.

When testing the "mysql" example but using editablegrid.js from git master I encoutered this failure.
Including editablegrid_utils.js after (or before, even if it does not make sense) does not change anything.

You sort on a column so that it changes the rows order, and now try editing some cell, it gives wrong value in the cell to edit - not the value of the cell after sorting, but value of that cell before sorting (initial load).

In version-2.0.1. The AttachHtml example also exhibits this issue (http://www.editablegrid.net/editablegrid/examples/attach/index.html).

Same issue was reported 9 months ago (issue # 23), it still exists.

I think an AUTHORS file (with at least one email address) + a LICENCE file would be a must-have in the repository.
On a side note the changelog may get its order reversed as it's usually the case.

When editable grid is inside a div that has a scroll bar, the editor location doesn't account for the scrollbar position.
In other words, if the div scroll bar is 100px down, the editor shows 100px below the cell location.

I wonder if the current version can lock the cells so that can not be edited.

In the readme I have not seen anything about it.

Thank you very much!

Hi

the value of the cell you edit is wrong when you attach to an html table and sort a column.

To reproduce, go to :

http://www.editablegrid.net/editablegrid/examples/attach/index.html

the first line is :

Duke Patience 33

Sort by Name,

the first line is now :

Belletoise André 31

if you edit the first line age (31) the value is changed to 33 in the field

It seems that after sorting a column, the data are still the ones from the unsorted table

It would be nice to have checkboxes to select witch columns are shown on large tables. =)

Columns can be declared of type "json".

The values in these columns will be automatically evaluated in Javascript.

Of course, such columns would probably need a specific renderer and editor.

Personal note: use this in Timetrack (theoretical amount) and NewsOn (contact lists).

When making a json request the content-type should be set to json. It currently doesn't appear to set content type.

Hi,

Is it possible to make maxlen configurable?
It defaults to 255, this is a bit short for my purposes, I have to change the source to make it bigger
function TextCellEditor(size, maxlen, config) { this.fieldSize = size || -1; this.maxLength = maxlen || 255; if (config) this.init(config); };

thanks

It'd be great addition if we can define date and time format to use (for editing and validations), not just US/EU but in detail like: yyyy-MM-dd'T'HH:mm:ssZZ

We could use configs of java.util.Date, if possible.

Thanks.

Hello,

it seems like there is no way of extracting all data - is there some "opposite" of loadJSON(.)? Eg
editorGrid.getJSON() -> Returns current values as JSON?

Thanks, yanosz