How to add CSS property to disable button in flex grid cell-template

How to add CSS property to disable button in flex grid cell-template

Posted by: tushank.shingte on 13 December 2021, 7:28 am EST

• 

  tushank.shingte

  • Post Options:
  • Link
    Copy

  Posted 13 December 2021, 7:28 am EST

   { 
            binding: "Collection Page",
            header: "Collection Page",
            isReadOnly: true,
            cssClass:/** */""[b][/b],
            cellTemplate: CellMaker.makeButton({
              text: "Open",
              click: (e, ctx) => {
                if(parseInt(this.documentId) !== parseInt(ctx.item.fileId)){
                  window.open(`/collection-data?documentId=${ctx.item.fileId}&companyId=${this.companyId}`, '_blank');
                }
              },
            })
          },
  

  In the above mentioned code i am creating columns containing a button to open a page.
  
  but i don’t want all button to open the page, i want a conditional logic to make the button enable or disable.

  To make the enable disable logic on button to work, i want to have the CSS class to accept a function which in this case is only accepting string (the /* */ comment thing added is where i want the logic/work around)

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 14 December 2021, 7:27 am EST

  Hello,

  You can implement the same by calling a function that will return the string value .i.e. the CSS class name based on the conditions applied inside the function. Please refer to the sample link below demonstrating the same:

  https://jscodemine.grapecity.com/share/izNB-ilit0KQ6SIPV1zADw/

  Also, you can use the formatItem event of the FlexGrid to add and remove the CSS class from the button as per the condition.

  Regards