Log in to start a topic

Row Drag and drop within same group only in Wijmo Flex Grid

Posted by: nnaina1997 on 27 October 2023, 5:41 am EST

  • nnaina1997

    Posted 27 October 2023, 5:41 am EST

    Hi

    How can we allow row drag drop only within the same grouped data only.

  • anirudh.verma

    Posted 29 October 2023, 9:01 pm EST

    Hi,

    You can handle the “draggingRowOver” event of FlexGrid and set the cancel parameter of the CellRangeEventArgs to null. This will prevent the drop action for the data row that is being dragged over the grid.

    To find whether an item belongs to a particular group you can use the namesMatch() method of the GroupDescription class.

    Please refer to these API links for more information:

    1. GroupDescription Class - https://www.grapecity.com/wijmo/api/classes/wijmo.groupdescription.html
    2. CollectionViewGroup Class: https://www.grapecity.com/wijmo/api/classes/wijmo.collectionviewgroup.html
    3. draggingRowOver event: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#draggingrowover

    Please refer to this sample for reference: https://stackblitz.com/edit/js-dr4s7n

    Regards

    Anirudh

  • nnaina1997

    Posted 29 October 2023, 10:52 pm EST - Updated 30 October 2023, 1:25 am EST

    Thanks, Anirudh! just one more query.

    Can you provide this code in angular.

    Also, I want the row id starts from 1 ,2,3,… for each group instead of random data.

  • anirudh.verma

    Posted 30 October 2023, 4:45 pm EST

    Hi Naina,

    I think there is a small confusion with the “Id” column present in the FlexGrid. It represents the id of the data, since it is dependent on the data and not on the position of the row in the FlexGrid.

    However, from the requirement, it seems like you need to have separate numbering for each row in a particular group. For this, please create a separate column that will contain the row number in the cells. To put the row numbers in the cells, please handle the loadedRows event and set the data in the cells using the setCellData() method of FlexGrid.

    I have prepared a sample in Angular: https://stackblitz.com/edit/angular-ivy-kz8jzv

    Regards

    Anirudh

  • nnaina1997

    Posted 9 November 2023, 5:50 pm EST

    Hi Anirudh

    I applied the row drag and drop functionality as mentioned above, but there is a scenario that is breaking.

    step-1 drag and drop the row

    step-2 One column has input when I change the value in the input

    step-3 the rows come to their old position not retaining the new collection

  • anirudh.verma

    Posted 12 November 2023, 5:24 pm EST

    Hi Naina,

    As per my understanding, the issue that you are facing is that after dragging and dropping a row if you try to enter a value in a cell then the row goes back to its original position. If this is the case, then I am not able to replicate the issue on my end.

    However, if the steps are different then could you please briefly explain the scenario in which you are facing the issue? Also, could you please share a sample replicating the issue along with a video displaying the steps required to replicate the issue that you are facing on your side? You may modify the below-shared sample to replicate the issue or create your own sample such that it replicates the issue.

    Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-tvbvaj

    Regards

    Anirudh

  • nnaina1997

    Posted 13 November 2023, 7:51 pm EST - Updated 13 November 2023, 8:43 pm EST

    I have 

      handleDraggingRow(sender, e) {
        this.sourcedRow = e.panel.rows[e.row];
      }

      handleDraggingRowOver(sender, args) {
    this.targetRow = args.panel.rows[args.row];
    // If data row is placed on the above of a GroupRow.
    if (sender.rows[args.row] instanceof GroupRow) {
      args.cancel = true;
      return;
    }
    
    if (sender.rows[args.row].dataItem.classificationId == 0) {
      args.cancel = true;
      return;
    }
    // Find the parent group row for this data row.
    for (let index = args.row; index >= 0; index--) {
      if (sender.rows[index] instanceof GroupRow) {
        this.parentGroupRow = sender.rows[index];
        break;
      }
    }
    // Prevent dropping of row to another group.
 

    if (
      this.parentGroupRow &&
      !this.parentGroupRow.dataItem.groupDescription.namesMatch(
        this.parentGroupRow.dataItem.name,
        this.sourcedRow.dataItem.categoryName
      )
    ) {
      args.cancel = true;
    }
  }

    I think the issue is in your data you have unique data in every group row but in my case same productId can be available in different groups.

    After the Row drag drop the collection is not updating. If I have simple grid it works fine but for grouping its breaking

  • anirudh.verma

    Posted 14 November 2023, 9:13 pm EST

    Hi Naina,

    I am sorry for the inconvenience caused but, even after duplicating the values in the input, I am still not able to replicate the issue on my end. So, could you please provide a working sample replicating the issue along with a video displaying the steps that are required to be performed to replicate the issue?

    You may modify the below attached sample or create a new sample as per your convenience. Also, if this issue is coming in the control then to escalate this to the DEV team I need to replicate this issue on my end. Therefore, kindly share a working sample that replicates the issue.

    Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-dilpzr

    Thank you for your understanding.

    Regards

  • nnaina1997

    Posted 15 November 2023, 7:01 pm EST

    okay, so when I update the value in any input I want to update multiple columns data.

    for example- I have two columns default qty and cart qty okay and a column that has a button add to cart then if I click on add to cart it should automatically update the cart qty input value as 1, if clicked again then 2 and accordingly.

    I am not able to update the grid data if any operation performed

  • anirudh.verma

    Posted 16 November 2023, 9:20 pm EST

    Hi Naina,

    I have prepared a sample as per the description, though I am still unable to replicate the issue.

    Could you please run this at your end and let me know if this works at your end. In case the issue only persists at your end, then it could be something specific to your application that may be causing this.

    And we would need a working sample replicating the issue that you are facing along with detailed steps required to replicate the issue. Please feel free to modify the shared sample to replicate the issue that you are facing.

    In order to investigate the root cause and to provide a solution, its essential to reproduce the issue at our end. Without a sample replicating the issue, it would be very difficult to debug the issue.

    Moreover, if there is indeed an issue with the FlexGrid Control, I would still need to reproduce this issue in order to escalate it to our Development team for further analysis.

    Please refer to this sample for reference: https://stackblitz.com/edit/angular-ivy-3udy5u

    Thank you for your understanding.

    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.