Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to remove the vertical line between the specific tableNode cell (Read 4064 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
How to remove the vertical line between the specific tableNode cell
Sep 6th, 2019 at 11:52am
Print Post  
Hi All,


I am using TableNode.
In tree node creating the two cell. column span for the two cell are one for each .
1st cell adding image and Second cell adding the text.

I want to remove the vertical separator line between Image and Text.

Please find the attached screenshot of TableNodedisplay.

Please provide the solution for above scenario.

Code spinet :

let colCountForCell = colCount;
let cell3: Cell = node.getCell(colCountForCell, rowCount);
this.updateImage(cell3, item.flag);
let col = node.getColumn(colCountForCell);
//col.width = 6;
col.width = 6;
colCountForCell++;
let cell2: Cell = node.getCell(colCountForCell, rowCount);
this.updateCellProperties(cell2, item.name, Alignment.Far);


Thanks in advance.
  

TableNodeCell.png (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: How to remove the vertical line between the specific tableNode cell
Reply #1 - Sep 9th, 2019 at 5:22am
Print Post  
Hi,

This should be possible by displaying both image and text in same cell, with some left text padding added. Otherwise, new version here adds a cellStyle property that lets you change cell borders to transparent -

https://mindfusion.eu/_beta/jsdiag_cellstyle.zip

Code
Select All
table.setCellStyle(
	new MindFusion.Diagramming.Style(
		{ verticalBorderStroke: "transparent" }));
 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to remove the vertical line between the specific tableNode cell
Reply #2 - Sep 9th, 2019 at 1:04pm
Print Post  
Hi Slavcho.

Thanks for response.

Actually i tried with placing image and text in same cell but image is not getting adjusted at starting of the cell. i  tried to set with alignment but some how its not working.

Do you have any example  where image and text is place in same cell.

Thanks in advance.

Thanks,
Ashvini
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: How to remove the vertical line between the specific tableNode cell
Reply #3 - Sep 10th, 2019 at 5:02am
Print Post  
Hi,

This works for me -

Code
Select All
var cell = table.getCell(0, 0);
cell.setText("test test");
cell.setTextAlignment(Alignment.Near);
cell.text.padding = new Thickness(8, 1, 1, 1);
cell.setImageLocation("icon4.png");
cell.setImageAlign(ImageAlign.MiddleLeft);
 



ImageAlign values other than Fit or Stretch keep the actual image size, so your icon needs to be smaller or as large and row's height. 24x24 icon fits exactly the default row height in my test.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to remove the vertical line between the specific tableNode cell
Reply #4 - Oct 1st, 2019 at 11:44am
Print Post  
Hi,

I tried to set image and text in the single cell.

I am getting  as cell.text  property does not exist on cell.


cell.text.padding = new Thickness(8, 1, 1, 1);
  cell.setImageLocation(NetBase.getLinkImageIconForParameterDiagram(item.flag));
  cell.setImageAlign(MindFusion.Drawing.ImageAlign.MiddleLeft);

i tried the same code then also image is not getting set properly in the starting of the cell.
I have icon size as 24*24 only.


i tried with applying css but its not working
  $(cell.getImage()).addClass('abs')


.abs{
    position: relative;
    margin-left:0px;
    height:16px;
    width:16px;
    float:left;
}




  

cell.png (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: How to remove the vertical line between the specific tableNode cell
Reply #5 - Oct 2nd, 2019 at 4:31am
Print Post  
Code from my post above still works for me. I guess check what you've assigned to the cell variable?
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to remove the vertical line between the specific tableNode cell
Reply #6 - Oct 9th, 2019 at 1:08pm
Print Post  
hi,

Can we add two images in a single cell.

Like :
image1, imgae2, text


Thanks,

Ashvini

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: How to remove the vertical line between the specific tableNode cell
Reply #7 - Oct 10th, 2019 at 7:08am
Print Post  
Hi,

You can't out of the box. You could insert a new column for the second image instead. If you need to display only a small fixed number of rows, maybe look into CompositeNodes, adding image and text components in their grid panel.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint