DataTables RowActions button divider #6207

8 Answer(s)

• 

  0

  Anjali_Musmade created 5 months ago

  Support Team Support Team Member

  Hi, ABP Datatables extension does not provide the feature mentioned by you.

  but you can customize your code with the help of css. please try to add below code in global-style.css

  .dropdown-item {
    border-bottom: 1px solid black !important;    
  }
  
  

  it will result in

  please let me know if it helps you.

  Thanks,

  Save Cancel
• 

  0

  WilliamT created 5 months ago

  Hi,

  Unfortunately, that is not what I am after. Is there a better way to properly put a divider? I saw on Lepton X, that the button groups have a divider, perhaps something like that.

  Regards,

  Save Cancel
• 

  0

  Anjali_Musmade created 5 months ago

  Support Team Support Team Member

  Hello WilliamT,

  Thanks for replying with your exact requirements. I have checked the Button groups in LeptonX. It has a border, not a divider. If you want to implement it for Action dropdown, you need to add some CSS code like below in global-style.css:

  .dropdown-item {
      --bs-btn-border-width: 1px;
      border: var(--bs-btn-border-width) solid blue;
      border-radius: 5px;
  }
  

  Which will look like

  Is this what you want? Please let me know if anything else is needed.

  Thanks, Anjali

  Save Cancel
• 

  0

  WilliamT created 4 months ago

  Hi,

  I am after the following UI below taken from Lepton X demo site.

  https://x.leptontheme.com/side-menu/components/bootstrap/dropdown

  Regards,

  Save Cancel
• 

  0

  maliming created 5 months ago

  Support Team Fullstack Developer

  hi @WilliamT

  The rowAction doesn't support adding divider now. We will support it in the next version.

  https://github.com/abpframework/abp/issues/18377

  Save Cancel
• 

  0

  maliming created 5 months ago

  Support Team Fullstack Developer

  Temporary solution:

  

  {
      text: l('Edit'),
      visible: abp.auth.isGranted(
          'AbpIdentity.Users.Update'
      ),
      action: function (data) {
          _editModal.open({
              id: data.record.id,
          });
      },
  },
  {
      displayNameHtml: true,
      text: function (data) {
          return '<li><hr class="dropdown-divider"></li>';
      }
  },
  {
      text: l('Permissions'),
      visible: abp.auth.isGranted(
          'AbpIdentity.Users.ManagePermissions'
      ),
      action: function (data) {
          _permissionsModal.open({
              providerName: 'U',
              providerKey: data.record.id,
              providerKeyDisplayName: data.record.userName
          });
      },
  }
  

  Save Cancel
• 

  0

  WilliamT created 4 months ago

  Sorry for the late reply. I'll give it a try.

  Thanks.

  Save Cancel
• 

  0

  WilliamT created 4 months ago

  Actually, I did use this method but there is an unwanted hover effect and a button like behaviour.

  I did check the script that generates the action buttons and seems like the button wrapper is hardcoded. However, you did mention it will be added on the next update so all good.

  Save Cancel