igx grid cell spanning (cell merge)

We are using igx grid with Angular 8, and we are trying to achieve cell merge as below using igx grid and igx-column-layout.

but, I’m facing issues as below.

Kindly help us on merging cells in igx grid as in first image.

Hello Prabu,

Thank you for contacting Infragistics Support!

I believe you will find Multi Row Layout topic in our documentation very helpful for determining the best approach for configuring multi row layout for your igx-grid. In this topic you can find multiple samples and API References as well.

In none of these small applications, any misalignment issues are observed. Can you please check the way multi row layout is defined and verify that everything on your side is correct

If this is not an accurate sample of what you are trying to achieve can you please provide me with a small sample, which replicates your data structure, filled with some test records and the desired igx-grid functionalities so that I will be able to investigate it further.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Thanks for you response, The Multi Row Layout grid not supporting our requirement as I gave the image in the query,

We have Single Column, but spanning should apply only on cells not to the header,

Is it possible in Multi Row Layout, 

I couldn't find any samples as this.

The Header also having the spanning and per the header's cells are spanned, but in our scenario,

Only the cells should be spanned, not the headers. like in Excel may be.

I have tried with Layout Configurator also, but cannot produce the result as per our scenario.

Kindly give us samples if it is possible,

Hello Prabu,

I have prepared a sample project where I’m using a cell template in order to display a complex data binding. You can learn more about this approach in our official documentation. As you can observe inside of the template I’m looping through all phone numbers of a single record in order to display them below each other. Additional custom css styles can be applied in order to achieve the exact visualization as in the provided screenshot. Keep in mind that in the provided sample Multi Row Layout is used which currently not support Multi Column Headers. In case multi column headers are required, the multi row layout functionalities shouldn’t be used. If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further instigation.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Thanks for the response and sample project, It seems, we couldn't accommodate our requirement with this Multi Column grid, we are still analyzing, How to achieve our requirements. 

Hello Prabu,

Thanks for your reply!

I have prepared another sample for you, which I think you will find very helpful, demonstrating the usage of the Multi Column Headers in the described scenario. I am not familiar with your use case and your data structure that is why I tried to style it similar to the provided screenshot. Please keep in mind that templating operates at the grid rendering phase and does not affect the data in underlying data source. This means that features that operate on the data like Sorting, Filtering etc. will not considered the templated cell values. For example, in case you want to filter or sort the records in the phone/fax columns you have to implement your own custom logic.

After investigating this matter further and doing some research, the visual cell merging has been determined to be a feature request and the provided samples are just workarounds. As I mentioned I am using cell templates in order to display complex data binding. In case you don’t find them useful in order to achieve the expected behavior you can submit feature request in our GitHub repository here.

Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case.

This will give you the opportunity do directly communicate with our development team regarding the issue and get notifications whenever a new information is available. Please let me know if you need any further information.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

We really appreciate you effort, Thank you for the sample. It is really nice.

Now we get bit confident on, to accommodate our requirement by using your sample.

and I have tried to add few more features which is also we need to implement with this sample.

1. I have tried to enable to filter by [filterable]=true, since, we cannot use [allowFilter]=true, due to the design constrains. so filterable seems not working.

2. I have tried to enable the collapsible column header, and this behave in different way,

Kindly suggest me, is it possible to enable those feature in the give sample.

Thank you.

Hello Prabu,

Thanks for your reply.

• I believe you will find the Filtering topic in our documentation very helpful. As stated there the filtering feature is enabled for the Grid component by setting the allowFiltering input to true. Than using [filterable]=”false” you can disable the filtering for certain columns. Please keep in mind, you can refer to our API as well, that the default value of filterable is true and you don’t have to set it explicit as in the provided forked sample. If after this explanation you are still not allowed to set allowFiltering to true than you have to implement your own filtering logic and this is something beyond the scope of our support.
• The collapsible column groups should actually behave exactly as expected. In order to prove that I have modified the sample so that both filtering, using the approach from 1), and collapsible column groups are working fine. Note that on the forked sample you have tried to implement column hiding. If implemented by following the topic in our documentation it should behave as it is showed on the provided samples in the topic.

Please let me know if you need further information.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.