Is it possible to save color changes in the backend

Tags: #<Tag:0x00007f8b1dd44e50>
#1

I want to be able to change the color of a row with a color picker but I want to be able to save this information so that the data pops up again next time with the rows colored. Is this possible?

#2

For example I’ve previously made a table with a backend database value called default_color. All table rows would have that default_color based on the row id number. This could be changed by the user with a colorpicker on each row. This is what was the code:

				tbl +='<tr row_id="'+row_id+'" style="background color:'+val['default_color']+'">';

Is it possible to apply a value like default_color to all rows on a table, which white being default and other color options?

#3

Hey @sormunir

how do you pass classes? Do you generate them dynamically as mentioned at https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply ?

If you already have a class on the server I wan to add it to all of the cells just use

hot.updateSettings({
	cells: function(row, col){
  	var cp = {};
    cp.className = color
    return cp
  }
})
#4

Is it possible to distinguish this between rows? For example if in row 1 the default_color column value is blue row 1 is blue and row 2 the default_color value is red row 2 would be red? I’m just confused how to set the value without the css as that’s what I used previously when creating a table.

#5

I am not sure if I understand - you need CSS to change a color.
Maybe you can send a draft and a step-by-step scenario?

#6

Sorry for the confusion. I have a table that looks like this:

It’s getting ajax request for values in the table:

$.ajax({
    type: 'GET',
    url: "resp.php",
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
      
        var hotElement = document.querySelector('#hot');
        var hotElementContainer = hotElement.parentNode;
        var hotSettings = {
          data: data,
          columns: [
         	{
              data: 'col1',
              type: 'text'
            }, 
            {
              data: 'col2',
              type: 'text'
            }, 
            {
              data: 'col3',
              type: 'text'
            },
          ],
		  
		    
          stretchH: 'all',
          width: '100%',
          autoWrapRow: true,
          height: '80%',
          maxRows: 999999999,
          manualRowResize: true,
          manualColumnResize: true,
          rowHeaders: true,
          colHeaders: [
        	'id',
            'col1',
            'col2',
            'col3',
          ],
          manualRowMove: true,
          manualColumnMove: false, 
          contextMenu: true,
          filters: true,
          dropdownMenu: true,
          hiddenColumns: {
            columns: [0],
            indicators: false
          }
        }
        
        var hot = new Handsontable(hotElement, hotSettings);
            
        $("#save").click(function () {
            var tableData = JSON.stringify(hot.getData());
            var input = JSON.stringify({ "input": tableData });
        
            $.ajax({
                type: 'POST',
                url: "save.php",
                data: tableData,
                contentType: "application/json",
                dataType: 'json',
                success: function(response) {
                    console.log(response);
                    
                },
                error: function(response) {
                    console.log(response);
                }
            });
        });
        

    }
}).fail(function() {
  console.log('Request failed, inspect arguments for details')
});

});

ID is hidden. Each table has a unique row id (1, 2, 3, 4, etc) . The data also has a separate column called default_color for each row, with default value being white. I am not sure how to do something like this on handsontable but basically I would want the data, which is default_color to be used as a css style for each row it is on.

In the example here:
http://jsfiddle.net/anschwem/9odsv02x/1/

The color option is on the side and right clicked as you would for adding a new row but it isn’t functioning. What I would want is for a color to be picked and then marked as data for that row and then that data would in turn be used for that particular row as the color of that row. Is this doable with handsontable?

#7

Hey @sormunir

maybe something like this will work http://jsfiddle.net/zg485vbc/?

We recommend using classes instead on style attribute of an element as it is erased after render.

#8