Author Topic: Indent string of a volumn as much as value of the another column  (Read 413 times)

STEVE

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Dear paramvir,

First column is level, secon column is task.  I want to know how to indent the string of the task column according to the value of the level column.    I guess there is some similiar codes.  Would you give me the best example for the indent the text string with the related value?

Code: [Select]
columnTemplate: {
render: function(ui){
if( !ui.rowData.pq_gtitle && ui.colIndx < this.option('groupModel.dataIndx').length ){
return "<p style='text-indent:20px;'>"+ui.cellData+"</p>";
}
}
},

Best Regards,
Steve

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Indent string of a volumn as much as value of the another column
« Reply #1 on: July 12, 2022, 11:28:10 am »
Indent is added to a cell by using 'text-indent' css.

Please share a jsfiddle or a screenshot of your requirements to get more specific help.

STEVE

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Re: Indent string of a volumn as much as value of the another column
« Reply #2 on: July 12, 2022, 07:03:05 pm »
It is important for reviewers to read the data from the grid with ease and comfort.
Please see below my example of what I wanted to do.

Code: [Select]
Suppose there are only 2 columns, level, and task.
----------------------------------------------------------------------------
       level             task
----------------------------------------------------------------------------
         1         You are a genius.
         2                you are a genius.
         3                       you are a genius.
         4                              you are a genius.   
----------------------------------------------------------------------------
 if level 1 then indent 1 tab
 if level 2 then indent 2 tab
 if level 3 then indent 3 tab
 if level 4 then indent 4 tab


I hope everything is clear to understand about this each other.     

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Indent string of a volumn as much as value of the another column
« Reply #3 on: July 13, 2022, 01:43:27 pm »
you can add this render to task column

Code: [Select]
render: function(ui){
return {
style: {'text-indent':  (ui.rowData.level * 3) + "px"}
}
}