Add rows in table on button click add show diffent controls and submit button

Add rows in table on button click add show diffent controls and submit button

Posted by: lalit.kakkar2407 on 6 September 2024, 12:56 pm EST

• 

  lalit.kakkar2407

  • Post Options:
  • Link
    Copy

  Posted 6 September 2024, 12:56 pm EST - Updated 6 September 2024, 1:18 pm EST

  https://stackblitz.com/edit/angular-8rw4de?file=src%2Fapp%2Fapp.component.html

  Like above i want to add rows to grid on button click and every column have inputbox or either radio button or anything. When click on add new row should be added in grid with all controls and when user click on submit button if there is any valdation that should be permomed like required field and if there is no validation error form get submitted. All this should be achieve using form array.

  Thanks in advance.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 9 September 2024, 7:45 am EST

  Hi Lalit,

  Here is an updated sample with validation check in your shared sample:

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

  You can customize the message/behavior based on your exact specific needs.

  Regards

• 

  lalit.kakkar2407

  • Post Options:
  • Link
    Copy

  Posted 13 September 2024, 11:31 am EST

  Hi Sonu Pandey, thanks for reply, this is what i was looking for but with more features like showing validation error message in cell and if i change value in value in one cell it will change value of another cell in same row, is this possible?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 16 September 2024, 5:01 am EST

  Hi Lalit,

  Sorry, I didn’t fully understand your question about displaying validation error messages in cells. In the sample I previously shared, error messages are shown when you hover over the cells. Could you clarify exactly how you want the error messages to appear in the cells?

  Regarding dynamic data updates, you can update row data based on another column’s cell value in a few ways:

  Using DataMaps: You can dynamically set DataMap values. Here is a demo example showing how to do this: https://developer.mescius.com/wijmo/demos/Grid/Columns/DynamicDataMaps/angular

  Handling the cellEditEnded Event: You can update the desired column cell or editor values in this event. For more details, refer to the API link: https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid.Flexgrid.html#celleditended

  You can also check out our demo and API links for more information on features and functionalities:
  
  Demo Link: https://developer.mescius.com/wijmo/demos/Grid/Overview/angular
  
  API Link: https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid.Flexgrid.html

  If you have any further questions or need additional assistance, please let me know.

  Regards,

• 

  lalit.kakkar2407

  • Post Options:
  • Link
    Copy

  Posted 17 September 2024, 2:51 am EST - Updated 17 September 2024, 12:55 pm EST

  Hi Sonu pandey, for validation i am looking like suppose in each cell we have text box or dripdown or checkbix etc, if did’t enter any value in textbox in cell or if i didn’t select chexkbox and clicked on save, then error message should display below text box in cell that field is required etc.

  And for second scenario, if i enter any value in text box like number and when i tabout api will call to perform some calculation and result will appear in another cell in same row and basis on that i can disable chexkbix or radio button if any exist in same row in diffrent columns.

  And using html formcontrols in grid, not wijmo elements.

  Thanks for help !!

  

  819×460 6.48 KB

• 

  lalit.kakkar2407

  • Post Options:
  • Link
    Copy

  Posted 19 September 2024, 3:41 am EST

  Hi Sonu pandey, is there any update ?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 19 September 2024, 8:07 am EST

  Hi Lalit,

  Here is a reference sample demonstrating how you can achieve both of your requirements: https://stackblitz.com/edit/angular-nzgez3?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  I’ve updated the saveDataAfterValidation method to accommodate your specific need for displaying popups when clicking the save button for all cells with validation errors (as determined by the getError method). You can further modify this logic to match your exact needs.

  For the API validation and data updates, I’ve added an input HTML element in the cell and triggered the cellEditEnding event to perform custom validation through the API. This will update the sales column data. To see this in action, simply change the Country column value, and it will reflect in the sales value, which is then used internally to enable or disable the button in the Active column.

  This sample implements the basic requirements of your use case, feel free to adjust the logic as needed to suit your specific scenario.

  Regards,

• 

  lalit.kakkar2407

  • Post Options:
  • Link
    Copy

  Posted 19 September 2024, 9:01 am EST - Updated 19 September 2024, 1:12 pm EST

  Hi Sonu Pandey, Thanks a lot for your help.

  Few additional things i am looking for

  1. There show be add button to add new row with the same code that you shared.

  2 like we are using input field, when i click on save, below the field in same cell i want to show error msg field is required if coutry is blank. Dont want to show error at initial level

  3. When i click on save, i want to save all values in table.

  Thanks for help again.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 September 2024, 5:06 am EST

  Hi Lalit,

  Sorry for the delayed response. Here is the updated sample link as per your requirement: https://stackblitz.com/edit/angular-ulecfr?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  1. I’ve added a button at the top of the FlexGrid to allow for adding a new row. You can customize the behavior to fit your specific requirements (refer to the addNewUser() function for details).

  2. From what I understand, you have a button in a cell that, when clicked, should validate the data and display an error message if necessary. You can continue using the getError function for internal validation and show a custom error popup message only when clicking the button inside the cell.

  3. You can export the FlexGrid to Excel or PDF as needed. I’ve included an Excel export button in the sample for your reference. You can find more details about the features and grid exports at the following demo link:
     
     https://developer.mescius.com/wijmo/demos/Grid/ImportExportPrint/Excel/Async/angular

  Feel free to update the sample as per your exact requirements in case you face any issues you can let us know.

  Regards,