Aligning text in columns to the center of cells.

[SunnyMittal]

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 ?

[webismymind]

Well, this is simple CSS.

If you need all cells to be centered juste use ("editableGrid" is assumed to be the CSS class you pass to renderGrid, as I saw in a previous mail of yours):

.editableGrid th, .editableGrid td { text-align: center; }

If you need this only for some columns, you have to declare a cell renderer on the column that will add a CSS class to the cells, eg.

grid.setCellRenderer("colname, new CellRenderer({ render: function(cell, value) { CellRenderer.prototype.render.call(this, cell, value); $(cell).addClass('centered'); } }));

and define the CSS class:

td.centered { text-align: center; }

Hope this helps, Louis

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

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

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

[SunnyMittal]

Thanks a lot Louis !

[SunnyMittal]

Hi Louis, below code doesn't work :(

grid.setCellRenderer("colname, new CellRenderer({ render: function(cell, value) { CellRenderer.prototype.render.call(this, cell, value); $(cell).addClass('centered'); } }));

Below is my actual code:

editableGrid.setCellRenderer(0, new CellRenderer({ render: function (cell, value) { CellRenderer.prototype.render.call(this, cell, value); $(cell).addClass('left'); } }));

Above code doesn't work even if I specify column name. Below is the message.

[webismymind]

Hello,

This has been commited some days ago: https://github.com/webismymind/editablegrid/commit/12e48889fe6f2d17d6f09567e996bd7557496c60#diff-d41d8cd98f00b204e9800998ecf8427e I did this to allow hiding columns, but it will also fit your purpose.

Regards, Louis

2014-08-24 8:05 GMT+02:00 Todd Henderson notifications@github.com:

Louis,

I had a similar need, and was able to get your solution to work for me. However, it takes quite a bit of code to add a unique class name to each of my columns' headers and data cells. Also, I've found that implementing such a custom header renderer conflicts with the default sorting function applied to columns. I haven't been able to get both to work simultaneously.

Is there a way to modify EditableGrid to provide class names (== to the column name, I suggest) for headers and cells in each column by default? That would greatly ease using CSS and plugins for tooltips, etc., without conflicting with other EditableGrid features.

Todd

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

[thenderson]

Indeed, I discovered that only after writing my comment, which I then deleted. Looks like I didn't delete it fast enough! Sorry for the hassle. And: Thanks for EditableGrid. Love it!

[SunnyMittal]

Thanks Louis, I tried again with the latest code, and sadly its not working. I wanted first column of my grid to be left aligned and rest to be center aligned.

I used google Closure compiler from this page to compile all the latest js classes into one minified js file. But even after using the latest js and css files, it doesn't work. Still shows the message that can't find the column.

The new minified file is 67 kB in size. I can see the last released version editablegrid minified file is smaller compared to this. Can you also suggest which way is best to generate minified files ?

Best Regards, Sunny

[webismymind]

Hello,

Keep in mind that the CSS class applied to all header and body cells is "editablegrid-".

Here is the latest deployed (ie. minified) version I use : https://www.dropbox.com/s/dr8g699j9md8l0x/editablegrid-2.1.0-b17.tar.gz?dl=0

Regards, Louis

2014-08-31 6:56 GMT+02:00 SunnyMittal notifications@github.com:

Thanks Louis, I tried again with the latest code, and sadly its not working. I wanted first column of my grid to be left aligned and rest to be center aligned.

I used google Closure compiler from this page to compile all the latest js classes into one minified js file. But even after using the latest js and css files, it doesn't work. Still shows the message that can't find the column.

The new minified file is 67 kB in size. I can see the last released version editablegrid minified file is smaller compared to this. Can you also suggest which way is best to generate minified files ?

Best Regards, Sunny

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

[SunnyMittal]

Thanks Louis, it looks like the zip file is corrupt, can you please update the zip. I tried downloading 2 - 3 times.