search

webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
796 stars 271 forks source link

double datatype column show comma as the deicmal separator #51

Closed SunnyMittal closed 9 years ago

SunnyMittal commented 10 years ago

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},

untitled

Thanks ! Sunny

webismymind commented 10 years ago

Hello,

In the column type you can fully specify how to render the numerical values in that column:

will display values like this : 19,456.05 m³

Regards, Louis

2014-07-11 0:30 GMT+02:00 SunnyMittal notifications@github.com:

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},

[image: untitled] https://cloud.githubusercontent.com/assets/8129184/3546308/b49dcfe6-0881-11e4-8536-0ecce9168b82.jpg

Thanks ! Sunny

— Reply to this email directly or view it on GitHub https://github.com/webismymind/editablegrid/issues/51.

SunnyMittal commented 10 years ago

Cool, thanks it worked almost fine for me thanks :) Just that the m³ doesn't work. it shows it with a diamond sign with question mark in it..

webismymind commented 10 years ago

This is a character encoding issue that should be easily fixed. Do you use JSON or XML ? Can you show us how you produce the grid metadata (i.e. the description of columns) ?

2014-07-14 7:32 GMT+02:00 SunnyMittal notifications@github.com:

Cool, thanks it worked almost fine for me thanks :) Just that the m³ doesn't work. it shows it with a diamond sign with question mark in it..

— Reply to this email directly or view it on GitHub https://github.com/webismymind/editablegrid/issues/51#issuecomment-48866742 .

SunnyMittal commented 10 years ago

I am using JSON data format and below is the sample metadata

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

Below is how it looks when displayed in chrome and IE both untitled

webismymind commented 10 years ago

How do you load the metadata ? Can you provide us with the full source code ?

It's just a matter of using a correct character encoding.

2014-07-15 2:09 GMT+02:00 SunnyMittal notifications@github.com:

I am not sure but below is the sample metadata

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

Below is how it looks when displayed in chrome and IE both [image: untitled] https://cloud.githubusercontent.com/assets/8129184/3578958/40720912-0bb4-11e4-9ec0-6f2e123a57d1.jpg

— Reply to this email directly or view it on GitHub https://github.com/webismymind/editablegrid/issues/51#issuecomment-48975941 .

SunnyMittal commented 10 years ago

Sure, I am using below code to populate the editable grid. Also below that is the value of string r returned from the server at runtime. I got your point that it could be because of encoding as the value of r doesn't show m3 properly. Any suggestion how I can get it to work... ?

window.onload = function () { editableGrid = new EditableGrid("GridJSON", gridConfig); editableGrid.tableLoaded = function () { this.renderGrid("tablecontent", "editableGrid"); }; callPage("GetJSONData", null, function (r) { editableGrid.loadJSONFromString(r); editableGrid.renderGrid("tablecontent", "editableGrid"); });

    // Register for listening to row selected event to render the chart.
    editableGrid.rowSelected = editableGridRowSelected;

    // Register the function that will handle model changes.
    editableGrid.modelChanged = editableGridChanged;
    ////callPage("SaveJSONCellData", [String(editableGrid.getRowId(rowIndex)), String(columnIndex), String(oldValue), String(newValue)], function (r) {
    ////    // reset old value if failed
    ////    if ((r + "") != "") editableGrid.setValueAt(rowIndex, columnIndex, oldValue);
    ////});
}

r = "{"metadata":[{"name":"damname","label":"DAM NAME","datatype":"string","bar":true,"editable":false,"values":null,"decimal_point":".","thousands_separator":","},{"name":"17-07-2014-12-00","label":"17 Jul 12:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"17-07-2014-18-00","label":"17 Jul 06:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-00-00","label":"18 Jul 12:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-06-00","label":"18 Jul 06:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-12-00","label":"18 Jul 12:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-18-00","label":"18 Jul 06:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"19-07-2014-00-00","label":"19 Jul 12:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"19-07-2014-06-00","label":"19 Jul 06:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"19-07-2014-12-00","label":"19 Jul 12:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null}],"data":[{"id":"1","values":{"damname":"abc","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"2","values":{"damname":"qaz","17-07-2014-12-00":"0,0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"3","values":{"damname":"wsx","17-07-2014-12-00":"0.5","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"4","values":{"damname":"edc","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"5","values":{"damname":"rfv","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.5","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"6","values":{"damname":"tgb","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"7","values":{"damname":"yhn","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"8","values":{"damname":"ujm","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"9","values":{"damname":"ikk","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}}]}"

webismymind commented 10 years ago

Hi,

I expected the full source code (including your "GetJSONData" action) in order to test it myself, but your data ("r") is not correctly JSON-encoded.

It should look like that (simplified version with 2 columns), notice the UTF8 code for the special "cube" character:

{"metadata":[{"name":"damname","label":"DAM NAME","datatype":"string","bar":true,"editable":false,"values":null},{"name":"17-07-2014-18-00","label":"17 Jul 06:00 p.m","datatype":"double(m\u00b3,2, dot, comma, 0, n\/a)","bar":true,"editable":true,"values":null}],"data":[]}

How do you produce the "r" variable ?

You have to: 1/ use a valid JSON encoding function (eg. in PHP or whatever you use) 2/ this function expects the text to be encoded in UTF8

Regards, Louis

2014-07-16 23:47 GMT+02:00 SunnyMittal notifications@github.com:

Sure, I am using below code to populate the editable grid. Also below that is the value of string r returned from the server at runtime. I got your point that it could be because of encoding as the value of r doesn't show m3 properly. Any suggestion how I can get it to work... ?

window.onload = function () { editableGrid = new EditableGrid("GridJSON", gridConfig); editableGrid.tableLoaded = function () { this.renderGrid("tablecontent", "editableGrid"); }; callPage("GetJSONData", null, function (r) { editableGrid.loadJSONFromString(r); editableGrid.renderGrid("tablecontent", "editableGrid"); });

// Register for listening to row selected event to render the chart.
editableGrid.rowSelected = editableGridRowSelected;

// Register the function that will handle model changes.
editableGrid.modelChanged = editableGridChanged;
////callPage("SaveJSONCellData", [String(editableGrid.getRowId(rowIndex)), String(columnIndex), String(oldValue), String(newValue)], function (r) {
////    // reset old value if failed
////    if ((r + "") != "") editableGrid.setValueAt(rowIndex, columnIndex, oldValue);
////});

}

r = "{"metadata":[{"name":"damname","label":"DAM NAME","datatype":"string","bar":true,"editable":false,"values":null,"decimal_point":".","thousands_separator":","},{"name":"17-07-2014-12-00","label":"17 Jul 12:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"17-07-2014-18-00","label":"17 Jul 06:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-00-00","label":"18 Jul 12:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-06-00","label":"18 Jul 06:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-12-00","label":"18 Jul 12:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"18-07-2014-18-00","label":"18 Jul 06:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"19-07-2014-00-00","label":"19 Jul 12:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"19-07-2014-06-00","label":"19 Jul 06:00 a.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null},{"name":"19-07-2014-12-00","label":"19 Jul 12:00 p.m.","datatype":"double(m�,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null}],"data":[{"id":"1","values":{"damname":"abc","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"2","values":{"damname":"qaz","17-07-2014-12-00":"0,0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"3","values":{"damname":"wsx","17-07-2014-12-00":"0.5","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"4","values":{"damname":"edc","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"5","values":{"damname":"rfv","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.5","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"6","values":{"damname":"tgb","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"7","values":{"damname":"yhn","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"8","values":{"damname":"ujm","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}},{"id":"9","values":{"damname":"ikk","17-07-2014-12-00":"0.0","17-07-2014-18-00":"0.0","18-07-2014-00-00":"0.0","18-07-2014-06-00":"0.0","18-07-2014-12-00":"0.0","18-07-2014-18-00":"0.0","19-07-2014-00-00":"0.0","19-07-2014-06-00":"0.0","19-07-2014-12-00":"0.0"}}]}"

— Reply to this email directly or view it on GitHub https://github.com/webismymind/editablegrid/issues/51#issuecomment-49232111 .

SunnyMittal commented 10 years ago

Ok sure, I use action method to get the data. I checked and found that JObject.Parse() returns tableData and table data object shows that questionmark symbol, which is wrong.

I need to change it to tableData object because i need to further process the data before returning it to the client browser. But I think the problem creeps in at the time when I use JObject.Parse()

I am using MVC .net 4.5 on server side. Appreciate your help and effort.

public static object GetJSONData() { string jsonFilePath = Utility.GetLocation(@"demo.json"); dynamic tableData = JObject.Parse(File.ReadAllText(jsonFilePath)); return JsonConvert.SerializeObject(tableData); }