Our flexible Kanban board for managing tasks with drag drop


Post by tmcuong »

I fill cell with html mode in taskRenderer method like

 taskRenderer({ cardConfig, taskRecord }) {
        if (taskRecord.data.taskID) {
          var attachment = [];
          var tags = "";
          var progressBar = "";
          var count = '';
          var countObject = '<div class="d-flex align-items-center mr-2"></div>';
          var avatarStr = '';

      if (that.wkSV.resourceAvatar) {
        avatarStr = `<div class="symbol-group symbol-hover justify-content-end">
                      <div class="symbol symbol-24 symbol-circle">
                        <img src="../../../assets/demos/user/user4.jpg">
                      </div>
                      <div class="symbol symbol-24 symbol-circle">
                        <img src="../../../assets/demos/user/user2.jpg">
                      </div>
                      <div class="symbol symbol-24 symbol-circle">
                        <img src="../../../assets/demos/user/user9.jpg">
                      </div>
                      <div class="symbol symbol-24 symbol-circle symbol-light">
                        <span class="symbol-label">5+</span>
                      </div>
                    </div>`;
      }

      if (that.wkSV.countObject) {
        countObject = `<div class="d-flex align-items-center mr-2">
                      <div class="d-flex align-items-center mr-3">
                        <span class="icon-mode_comment icon-18 text-dark-50 mr-1"></span>
                        <span class="text-dark-50">0</span>
                      </div>
                      <div class="d-flex align-items-center mr-3">
                        <span class="icon-check_box icon-18 text-dark-50 mr-1"></span>
                        <span class="text-dark-50">0</span>
                      </div>
                      <div class="d-flex align-items-center mr-3">
                        <span class="icon-attach_file icon-18 text-dark-50 mr-1"></span>
                        <span class="text-dark-50">` + attachment.length.toString() + `</span>
                      </div>
                    </div>`;
      }

      if (that.wkSV.progressBar) {
        progressBar = `<div class="progress mt-4" style="height: 5px;">
                        <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
                          class="progress-bar" style="width: ` + taskRecord.data.toDoPercent + `%;"></div>
                      </div>`;
      }

      if (taskRecord.data.listTags && that.wkSV.tags) {
        var listTags = taskRecord.data.listTags;
        for (var i = 0; i < listTags.length; i++) {
          tags = tags + '<span class="status-item" style="background-color: ' + listTags[i] + '"></span>';
        }
      }

      if (taskRecord.data.attachment != null)
        attachment = taskRecord.data.attachment.split(";");
    
      cardConfig.children.body.children.details = {
        class: 'details',
        html: `<div class="content-box tm-box p-3 border">
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <div class="d-flex align-items-center tm-date mr-2">
              <span class="icon-access_time icon-16 text-muted mr-1"></span>
              <span class="text-dark-50">` + that.formatDate(taskRecord.data.createdOn) + `</span>
            </div>
            <div class="text-primary mr-2">` + taskRecord.data.statusText + `</div>
            <span style="color: ` + taskRecord.data.statusColor + `" class="icon-flag icon-18"></span>
          </div>
          <div class="dropdown ml-2">               
          </div>
        </div>
        <div class="d-flex flex-column flex-grow-1 mt-3">
          <div class="d-flex flex-column flex-grow-1">
            <div class="text-dark font-weight-bold">` + taskRecord.data.taskName + `</div>
            <div class="d-flex task-status mt-3">
              ` + tags + `
            </div>
            ` + progressBar + `
          </div>
          <div class="d-flex justify-content-between align-items-center mt-4">
            ` + countObject + avatarStr + `                
          </div>
        </div>
      </div>
        `
      };

      // Color tasks by priority
      const prioColors = {
        critical: 'red',
        high: 'orange',
        medium: 'yellow',
        low: 'green'
      };

      cardConfig.class[`b-taskboard-color-${prioColors[taskRecord.prio] ?? 'blue'}`] = true;
    }

  },

So I want to refill cell with html after editing it in method

taskEdit: {
          // edit task
          processItems({ items, taskRecord, columnRecord, swimlaneRecord }) { 
          }
       }   

Can you give me a guide.


Post by mats »

No need to manually "refill" any tasks or trigger rendering. When you update the record after editing, the changes will be reflected in the UI. Most likely you are not updating the data correctly.

Never read / write to the 'data' object like this, always work on the record directly.

        if (taskRecord.data.taskID) {

Post Reply