Item style

[josemiUD]

HI, I need to put a background to the items that according to a type changes color. This color can be modified by a database so I can't do it by classes.

Could you put a style property on the item or is there a way to wait for the kanban to finish loading to be able to go through the cards and assign a style to it?

[xscode-auto-reply[bot]]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/riktar/jkanban

[marcosrocha85]

The way I have implemented that back in the day was changing it with jQuery (on document ready). Or creating dynamic css classes that could be attached to an item. Even if you're using reactive programming that is possible. If you need, I can create a jsFiddle to show you up how I did that.

[josemiUD]

Yes, I would appreciate it

[Brecht272727]

The way I have implemented that back in the day was changing it with jQuery (on document ready). Or creating dynamic css classes that could be attached to an item. Even if you're using reactive programming that is possible. If you need, I can create a jsFiddle to show you up how I did that.

Is it possible to show a fiddle how to do? I have the same issue here...

So far i have this in a function:

function test() {
  var titles = document.getElementsByClassName("kanban-title-board");
  if (titles.length == 0) {
    return;
  }

  for (var column = 0; column < titles.length; column++) {
    var currentColumn = titles[column];
    let boardId = currentColumn.parentElement.parentElement.dataset.id;
    var nodes = kanban1.getBoardElements(boardId);
    var t = [];
    nodes.forEach(function(value, index, array) {
      t.push({
        "color": $(value).data("class"),
        "id": $(value).data("eid")
      })
    });    

    t.forEach(function(value, index, array) {

      console.log(value.color)
      console.log(value.id)
      //kanban1.findElement(value.id).css("background-color", value.color);            //This is not working here
    });

  }
}

test();

[Brecht272727]

I found out myself how to do:

      function change_background_colors_items() {
        var titles = document.getElementsByClassName("kanban-title-board");
        if (titles.length == 0) {
          return;
        }

        for (var column = 0; column < titles.length; column++) {
          var currentColumn = titles[column];
          let boardId = currentColumn.parentElement.parentElement.dataset.id;
          var nodes = kanban1.getBoardElements(boardId);
          var t = [];
          nodes.forEach(function(value, index, array) {
            t.push({
              "background_color": $(value).data("background_color"),
              "id": $(value).data("eid")
            })
          });    

          t.forEach(function(value, index, array) {
            //$(kanban1.findElement(value.id)).css("background-color", value.background_color);       //You can use this or ... 
            $(kanban1.findElement(value.id)).addClass(value.background_color);       //define the background colors in your stylesheet
          });
        }
      }

      change_background_colors_items();

You have to define the background colors in your stylesheet if you want to use $(kanban1.findElement(value.id)).addClass(value.background_color);

.light {
  background: #d1d9f7;
  color: #fff;  
}

.dark {
  background: #0f1526;
  color: #fff;  
}

OR you can use the other option $(kanban1.findElement(value.id)).css("background-color", value.background_color); Then you don't have to use your stylesheet but add p.e. red in your database.

Add also the extra option to your JSON dataset for the items: background_color