I am provide blank table to user. Now i want to add functionality to format a cell in table dynamically. Formatting should be like Bold, Italic, Underline, Colour to selected cell font or cell background colour.
Hi @sdholariya
how can I help you? Do you already have an idea on how to start?
Hi Aleksandra,
I have started with small demo of handsontable and i get idea how to show table with particular data. But my issue is i want to provide formatting to cell dynamically. Which i mentioned above.
Please provide me solution how can i achieve this in handsontable.
We do not have any options like this built in. I can help you to create it but I cannot do it for you. If you need my help please create a draft of i/o data or a description of the action (change of formating via menu/button/automatically after user clicks enter) as all of these options may need a different approach.
In context menu as like option of alignment add one another option like format and in this open sub menu with providing options (https://prnt.sc/jlzssw) or it is in text(Bold, Italic, Font color, Background color) and by selecting options it will affect on selected cell. I am not able show you code because i don’t know how to add extra option in context menu.
My table should like this (http://prntscr.com/jm0vdg).
Thank you for sharing the details. I have two demos that will help you to achieve it
Changing font: http://jsfiddle.net/rdu2bq2z/
Changing color: http://jsfiddle.net/d1ye98u7/ (or with submenus https://jsfiddle.net/1nt7t429/)
Hi,
Thank you for answer. But in this example we can provide only some static option (maximum 5 to 6). I f Colour picker will open for selected item then it will be good.
All options are open in every cell (like table, column, row, cell) . Can we provide option base on selected item. If cell is selected then cell colour is open.
Now if we are provide all option then on save data can we get every cell with all properties like cell colour, Font format(Bold, Italic, Underline)? Because i am using this json every where to show table after once this table created.
so If it is possible to save table data with all format then it is meaningful for me.
so If it is possible to save table data with all format then it is meaningful for me.
We only save data (for the table). If you’d like to save metadata you can call getCellMeta but it works only for a single cell.
Can we provide option base on selected item. If cell is selected then cell colour is open.
Yes, it is possible but I do not have any demo for this operation. Again, I can help you to achieve it but if you’d want me to provide a crafted example that is a commercial offer that we’d need to schedule with the dev team.
Now if we are provide all option then on save data can we get every cell with all properties like cell colour, Font format(Bold, Italic, Underline)?
Yes, this is also possible by calling the getCellMeta but I would pass all these settings like color, font via a CSS class. Then you call the getCellMeta(row, col).className.
Hi,
Thanks again for the reply and help. Actually what i want to do is, while clicking on save button, i want every cell’s properties like color etc. in a JSON format. And i want to use that JSON in “data” attribute of handsontable to generate the preview.
We do not have any logic like that built in but if you’d like to create it by your own you can check our side project at labs (http://labs.handsontable.com/#/)
When you load any XLSX and use the edit in JSFiddle you’ll get a logic that we use to pass styling.
Hi Aleksandra,
I need your help again. I have created small demo with editable headers and apply default values also to that header. but on save data that header values not getting it will give me null array. Please provide me the solution of this. I want header values as it showing in table.
here my example link : https://jsfiddle.net/Sonal_Dholariya/h03ycn2x/25/
Hi @sdholariya
What do you mean by saying save data? The
console.log(tables_preview.getData(), "data");
seem to pass the right (updated) state of headers.
Hi,
By “save data” i mean saving the data by clicking on button “Display in Console” . At present it is giving me updated values when i change the header value and hit the “Display in Console” button. But what i want is to fetch the default value of header when we run the application for the first time i.e, when you run the application, you will see header value of 3 column as “Header” in display, but in console the array will be like [null,null,null] while actually it should be [“Header”, “Header”, “Header”].
Ok, now I understand.
The 52 line that states td.innerHTML = "Header"; is only a visual representation and it doesn’t add the value to the logical set of values in the data. To add it you can call setDataAtCell method.
Hi,
I have tried with setDataAtCell. This is demo link : https://jsfiddle.net/Sonal_Dholariya/h03ycn2x/46/
. It will work fine but when i am add new column then it will added with blank header value.
And another way i am using setDataAtCell in firstRowRenderer function at the place of th.innerHTML . In this will show console error. Demo link is: https://jsfiddle.net/Sonal_Dholariya/h03ycn2x/45/
It will work fine but when i am add new column then it will added with blank header value.
Tak happens because you do not set a value for a new column. You can call the setDataAtCell for the header in the afterCreateCol hook to add it just after the new column appears.
In this will show console error
You get an infinite loop here. It happens because the hook is calling itself. The setDataAtCell triggers renderer to rerender the view and show a new value so if you call this method inside a renderer it will always crash. That is why we’ve added a possibility to replace a value with the td.innerHTML option. Here’s an updated demo Edit fiddle - JSFiddle - Code Playground
Thank you aleksandra… 
you’re welcome @sdholariya
Hi,
Can i start row number with zero rather then 1 in my previous example because first row is header so.
Yes, you’d need to overwrite the default rowHeaders. Here’s an example http://jsfiddle.net/0z5jdern/