Log in to start a topic

Multirow Merging Cells

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

  • sc

    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.

  • manish.gupta

    Posted 1 March 2018, 3:27 am EST

    Hi,

    Thanks for evaluating Wijmo :grinning:

    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

  • sc

    Posted 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

  • grapecity

    Posted 4 March 2018, 10:33 pm EST

    Hi Sunil,

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

    ~nilay

  • abhishek.dutta

    Posted 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.

  • deepak.dubey

    Posted 2 September 2020, 1:33 am EST - Updated 3 October 2022, 6:30 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.

    923×83 22.4 KB

  • sharad.tomer

    Posted 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

  • deepak.dubey

    Posted 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

  • sharad.tomer

    Posted 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

  • deepak.dubey

    Posted 8 September 2020, 6:07 pm EST - Updated 3 October 2022, 6:30 am 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

    1340×189 6.98 KB

  • sharad.tomer

    Posted 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

  • deepak.dubey

    Posted 9 September 2020, 6:54 pm EST

    Thanks Sharad,

    In given link cell merging only done in first row. and after cell merging we can’t select other options of component type in second row.

    I am very happy to see that. please give me one more solution.

    Thanks

    Deepak Dubey

  • sharad.tomer

    Posted 11 September 2020, 2:03 am EST - Updated 3 October 2022, 6:30 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

  • deepak.dubey

    Posted 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: “”

    }

    ]

    }

    ]

  • sharad.tomer

    Posted 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

  • deepak.dubey

    Posted 2 October 2020, 11:38 pm EST

    Hi Sharad,

    I have new issues here,

    Our DA made data format in excel sheet and copied the data and paste on flexgrid.

    So, issues is that we have some valdation on data which is run on cellEditEnded event but in case of copy paste cellEditEnded not triggered, So how can we triggerd cellEditEnded or have other options to achieve that.

    I tried also

    pastedCell:function(s, e) {

    },

    Please help me on that.

    Deepak Dubey

  • sharad.tomer

    Posted 4 October 2020, 11:25 pm EST

    Hi Deepak,

    Could you please elaborate on the exact issue that you are facing while using the pasted cell event? Also please explain your requirement with the validation.

    Regards

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.