Multirow adding one row

Multirow adding one row

Posted by: germiep.fernandez on 26 January 2022, 1:50 am EST

• 

  germiep.fernandez

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 January 2022, 1:50 am EST - Updated 3 October 2022, 12:07 pm EST

  Hi, I am currently using Wijmo Multirow grid.

  I just have a question if it is possible to create something like this using multirow?
  
  

  The “#” column is supposed to be a checkbox. And every time I will add a new row, it will be one row like 3,4 and 5.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 28 January 2022, 12:57 am EST

  Hello,

  Could you please provide some more information on the requirements for the first 2 rows in the shared image? if you want to achieve merging for the first two rows in the “#” and “Comments” columns then I would recommend you to use the FlexGrid control which is better suitable for simple layouts. Please refer to the given link below for reference:

  https://www.grapecity.com/wijmo/demos/Grid/Merging/RestrictedMerging/purejs

  Let us know if you have further queries.

  Regards

• 

  germiep.fernandez

  • Post Options:
  • Link
    Copy

  Posted 28 January 2022, 2:29 am EST

  This is the html code that I am using and the sample data

  
  <wj-multi-row [itemsSource]="data">
    <wj-multi-row-cell-group>
        <wj-multi-row-cell>
            <ng-template wjMultiRowCellTemplate [cellType]="'Cell'">
                <input type="checkbox" />
            </ng-template>
        </wj-multi-row-cell>
    </wj-multi-row-cell-group>
  
    <wj-multi-row-cell-group header="File Name" >
      <wj-multi-row-cell binding="fileName"></wj-multi-row-cell>
      <wj-multi-row-cell binding="pdfFileName"></wj-multi-row-cell>
    </wj-multi-row-cell-group>
  
    <wj-multi-row-cell-group header="File Size" >
      <wj-multi-row-cell binding="fileSize"></wj-multi-row-cell>
      <wj-multi-row-cell binding="pdfFileSize"></wj-multi-row-cell>
    </wj-multi-row-cell-group>
  
    <wj-multi-row-cell-group>
      <wj-multi-row-cell binding="comments" header="Comments"></wj-multi-row-cell>
    </wj-multi-row-cell-group>
    
    <wj-multi-row-cell-group header="Password" >
      <wj-multi-row-cell binding="filePassword"></wj-multi-row-cell>
      <wj-multi-row-cell binding="pdfPassword"></wj-multi-row-cell>
    </wj-multi-row-cell-group>
  </wj-multi-row>
  
  

  
  [
    {
      fileName: 'Test 1.xlxs',
      fileSize: '100 kB',
      filePassword: 'testpass',
      pdfFileName: 'Test 1.pdf',
      pdfFileSize: '110 kB',
      pdfPassword: 'testpass',
      comments: 'This is a test'
    },
    {
      fileName: 'Test 1.xlxs',
      fileSize: '100 kB',
      filePassword: 'testpass',
      pdfFileName: 'Test 1.pdf',
      pdfFileSize: '110 kB',
      pdfPassword: 'testpass',
      comments: 'This is a test'
    },
    {
      fileName: '',
      fileSize: '',
      filePassword: '',
      pdfFileName: 'Test 1.pdf',
      pdfFileSize: '110 kB',
      pdfPassword: 'testpass',
      comments: 'This is a test'
    }
  ]
  
  

  As you can see I am using multirow and the 0th and 1st index are for the 1 and 2 row in the image above, and the 2nd index is the one for the 3rd row. I wanted to hide the cell with fileName, fileSize and filePassword if they are blank or empty string. Is that possible with multirow? or do you have any suggestion?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2022, 9:42 am EST

  Hello,

  Yes, you can show and hide the row based on different cell data content. You may handle the formatItem event of the multiRow and check for the specified data as per your requirement and hide the desired row by setting the visible property of the Row. Also you would be required to handle the condition on data change i.e. collectionChanged event. You can toggle the visible property of the Row to show and hide the rows. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-egef99?file=src%2Fapp%2Fapp.component.ts

  Hope this works for you.

  Regards

• 

  germiep.fernandez

  • Post Options:
  • Link
    Copy

  Posted 1 February 2022, 4:04 am EST

  Hi,

  The example you provided hides the row itself, as for my case I wanted to hide the cells for fileName, fileSize and filePassword and will still show the cell for pdfFileName, pdfFileSize and pdfPassword.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 2 February 2022, 8:19 am EST

  Hello,

  I’m afraid that hiding a cell would not be possible as only hiding a specific cell would affect the multiRow layout and also would not make sense. As per my understanding, you only want to hide the cell with fileName, fileSize, and filePassword if they are the blank or empty string, if so then the above-provided solution would work for you. In the sample link above both last rows are set to visible false because of the provided data(after removing the 4th row, 5th rows data cell of fileName, fileSize, and filePassword become empty which results in 5th to hide as well).

  Please refer to the updated sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-aibbsk?file=src%2Fapp%2Fapp.component.ts

  Hope this would help.

  Regards