Forums

Grid Widget Cancel

1. Mason Ambery

   

   67 posts
   Registered:
   19 Nov 2021
   03 Aug 2022

   Link to this post

   Anyone have any advice or recommendations on how I can disable, hide or display an alert on the Add button associated with the Grid Widget when a record already exists for the contact.  I have some entities in CRM that are limited to a single record per contact/account so in my prior portal I just used a java script to display an alert when the table row count was > 1.  It's proving a bit harder to do with the kendo grid because the button isn't a true button.  
   
   When the Grid is empty I want the Add button to display but when a record already exists, I want to prevent the user from submitting a second record.
2. Bhargavi Mahal

   

   14 posts
   Registered:
   16 Dec 2020
   03 Aug 2022

   Link to this post

   Hello Mason,
   
   Thank you for posting your query.
   
   The above functionality can be possible with some custom code. Please make necessary changes. 
   
   function disableButton(gridFieldName, numberofRecords){
   var grid = tpc.find(gridFieldName);
   if(grid !== null){
   if(numberofRecords >= 1){
   $("#gridFieldName_element a.k-button.k-grid-tpcadd").addClass('k-state-disabled');  //instead of gridFieldName_element place the id associated to the grid
   }
   else{
   $("#gridFieldName_element a.k-button.k-grid-tpcadd").removeClass('k-state-disabled'); //instead of gridFieldName_element place the id associated to the grid
   }
   }
   else{
   console.error("Grid" + gridFieldName + "not found");
   }
   }
   $(document).on("tpc:ready", function (event, tpcObject) {
        tpc.forms[0].gridFieldName.get_grid().bind("dataBound",function(e){ //instead of gridFieldName use the field name associated to the grid
        var length = tpc.forms[0].gridFieldName.get_grid().dataSource.data().length; //instead of gridFieldName use the field name associated to the grid
       disableButton("gridFieldName",length); //instead of gridFieldName use the field name associated to the grid
   });
   disableButton("gridFieldName",length); //instead of gridFieldName use the field name associated to the grid
   });
   
   Please try this code and let us know if you have any questions.
   
   Thank you,
   
   Regards,
   Bhargavi Mahal.
   
   
   
   
   
   
3. Mason Ambery

   

   67 posts
   Registered:
   19 Nov 2021
   03 Aug 2022 in reply to Bhargavi Mahal

   Link to this post

   Thank you, I'll let you know if I can it working.
4. Mason Ambery

   

   67 posts
   Registered:
   19 Nov 2021
   Answered

   03 Aug 2022

   Link to this post

   Can you elaborate on the comments contained with the code.  I think the first one should be #TPCGridModel but I have no idea what the second reference is.  I’m using the widgets OOB with no custom names or classes.
   
   //instead of gridFieldName_element place the id associated to the grid
   
   //instead of gridFieldName use the field name associated to the grid
   
   This is what we came up with which seems to work well enough since we only allow adding adn editing of records.
   
   $(document).on("tpc:ready", function() {
     var grid = tpc.find("TpcGridModel").get_grid();
     if(grid !== null) {
       console.log('grid found');
       numOfDataItems = grid.dataSource.data().length;
       
       addButtons = document.getElementsByClassName('k-button k-button-icontext k-grid-tpcadd');
       if(addButtons.length >= 1) {
         if(numOfDataItems >= 1) {
           addButtons[0].classList.add('k-state-disabled');
           console.log('hid add button');
         }
         else {
           addButtons[0].classList.remove('k-state-disabled');
         }
       }
     }
     console.log('grid check complete');
   });