Multirow Merging Cells

Posted by: sc on 1 March 2018, 3:04 am EST

  • Posted 1 March 2018, 3:04 am EST

    Hi,
    We are in the process of evaluating the multirow grid with Reactjs but I am having a hard time figuring out the merging of cells. Basically, I am looking for an output like in the attached image below:


    I have looked at all of your examples about MergeManager and merging cells but I am not able to achieve the output I am after.

    I would like the data cells to be merged in the exact manner as the columnheaders are laid out. Please take a look at the image carefully and let me know on how to get an output like shown in the attached image. It doesn't matter what framework you use in your example since I am only in interested in the code for the "getMergedRange" method of the customMergeManager class.
  • Replied 1 March 2018, 3:27 am EST

    Hi,
    Thanks for evaluating Wijmo 😀

    Please have a look to the MumtiRowIntro at given below link:
    http://demos.wijmo.com/5/Angular/MultiRowIntro/MultiRowIntro/

    Here, set Layout definition from traditional to Compact/Detailed.

    Hope it helps.
    Please let us know if you have any further queries.

    ~Manish

  • Replied 1 March 2018, 4:12 am EST

    Hi Manish,

    Thanks for the quick response. I had gone through the intro earlier and had been able to lay out the grid. But maybe I was not clear in my earlier question. I have highlighted the cells in the image below:



    How do I achieve those cells in the image above? My understanding is that I have to customize the MergeManager class to achieve it. I have already looked at previous samples you have posted in the forum earlier.

    What I am looking for is a way to merge cells within a "rowgroup". Is there a rowspan property I can use? If not, how do I achieve the highlighted cells in the image above?

    Thanks
    Sunil
  • Replied 4 March 2018, 10:33 pm EST

    Hi Sunil,

    We are working on your issue. Please allow us some time to resolve this.

    ~nilay
  • Replied 5 March 2018, 9:14 pm EST

    Hi,

    You can set layoutDefinition property of multi-row.
    Please refer to following sample which implements your requirement.

    http://demos.wijmo.com/5/Angular/MultiRowExplorer/MultiRowExplorer/#/purchaseSlip

    (Refer to generateLayoutDef() method of PurchaseSlipCmp.ts , it shows the layoutDefinition used in sample)


    Regards.
  • Replied 2 September 2020, 1:33 am EST

    HI,

    I am using JS and flexgrid and I am trying to make merged cell on dynamically upto 10 cells in attached image.
    When a user creates composite units as component, the system should allow the user to update the underlying component and factor to a max limit of 10.
    for example we type class A and go on second row and typed class B then class a and b should be merged.
    Please help me on that.
  • Replied 3 September 2020, 10:11 pm EST

    Hi Deepak,

    If I understand correctly what you want you to achieve is that you want to allow users to input data in "Underlying Component" and "Underlying Ratio" columns and want to merge all other columns. To achieve this you may use the auto-merge functionality along with setting newItemCreator for collectionView. Please refer to the following sample and let us know if you face any issues:
    https://codesandbox.io/s/wijmo-starter-forked-vw5uf?file=/src/index.js
    If you had a different requirement then please explain more about your requirement so that we could assist you accordingly.

    Regards
    Sharad
  • Replied 5 September 2020, 10:23 pm EST

    Hi Sharad,

    Thanks for the response and yes I want same output as you provide in code.
    But, in my code our grid all cells is editable and auto-merging should be allow in when user already select or typed "Composite units" in Component type column and on cellEditending on "Underlying Component" its should be merged. I already tried in this
    https://codesandbox.io/s/wijmo-starter-forked-vw5uf?file=/src/index.js but not successfully.


    I really thanks to you and waiting your response.

    Regards
    Deepak Dubey

  • Replied 7 September 2020, 5:35 am EST

    Hi Deepak,

    You may refer to the following sample which demonstrates the required functionality i.e all columns are editable and "underlyingComponent" and "underlyingRatio" columns are not merged:
    https://codesandbox.io/s/wijmo-starter-forked-kfe3b?file=/src/index.js
    Please let us know if you face any issues.

    Regards
  • Replied 8 September 2020, 6:07 pm EST

    Hi Sharad,

    I think i am unable to clear the things.
    Let me clear first. I have list of component types and allowMerging functionality should be done when user select Composit Units from component types list.
    we follow below steps:-
    1. Select Composit Units form component types.
    2. Select Underline components ex - class A
    3. go to second row at column Underline components and select Class B
    4. then class A row and Class B row should be merged because in a Class A row we select "Composit Units".
    if we change the option from component types like Common Stock or other option allowmerging should not perform.

    Please help me on that case.

    Thanks
    Deepak Dubey
  • Replied 9 September 2020, 1:12 am EST

    Thank you for sharing the additional details. In this case, you need to custom merge the manager and override the getMergedRange() method of the merge manager. Please refer to the following sample which demonstrates the same and let us know if you face any issues:
    https://codesandbox.io/s/wijmo-starter-forked-udfym?file=/src/index.js
  • Replied 11 September 2020, 2:03 am EST

    Hi Deepak,

    We are sorry but we are unable to replicate the issue at our end. I've attached a gif of our observations. Could you please have a look at it and let us know if we are missing some steps to replicate the issue.


    Regards
  • Replied 21 September 2020, 11:57 pm EST

    HI Sharad,

    Yes you are right it was my end and I solve this. Thanks for your help.
    I have one query that is when merge cell apply it change json structure, means the if I create first row with common stock and second, third and fourth was composite unite its merged and json create in child level which is not expected.
    for ex:[
    {
    Sel: false
    activeFlag: true
    analystNotes: ""
    componentId: ""
    componentName: "class A"
    componentType: "Composite Units"
    endDate: ""
    investmentID: "Not Linkable"
    isError: false
    isMain: "No"
    isParticipating: "Yes"
    startDate: ""
    underlyingComponent: "common share"
    underlyingFactor: ""
    }
    {
    [
    {
    Sel: false
    activeFlag: true
    analystNotes: ""
    componentId: ""
    componentName: "class A"
    componentType: "Composite Units"
    endDate: ""
    investmentID: "Not Linkable"
    isError: false
    isMain: "No"
    isParticipating: "Yes"
    startDate: ""
    underlyingComponent: "common share"
    underlyingFactor: ""
    },
    {
    Sel: false
    activeFlag: true
    analystNotes: ""
    componentId: ""
    componentName: "class A"
    componentType: "Composite Units"
    endDate: ""
    investmentID: "Not Linkable"
    isError: false
    isMain: "No"
    isParticipating: "Yes"
    startDate: ""
    underlyingComponent: "common share"
    underlyingFactor: ""
    }
    ]
    }
    ]
  • Replied 22 September 2020, 9:07 pm EST

    Hi Deepak,

    Merging is only a UI feature, it does not modify the underlying JSON/data structure. It would remain the same. If you need to change the structure of the underlying data too then you would have to do it yourself.

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels