Open Closed

DataTables RowActions button divider #6207


User avatar
0
WilliamT created
  • ABP Framework version: v7.9
  • UI Type: MVC
  • Database System: EF Core (SQL Server, Oracle, MySQL, PostgreSQL, etc..)
  • Tiered (for MVC) or Auth Server Separated (for Angular): yes
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

I have these 2 actions buttons that i've built from rowActions -> items. but how do I add a divider between these 2 buttons? does the ABP datatables extension provide that feature?


8 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    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,

  • User Avatar
    0
    WilliamT created

    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,

  • User Avatar
    0
    Anjali_Musmade created
    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

  • User Avatar
    0
    WilliamT created

    Hi,

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

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

    Regards,

  • User Avatar
    0
    maliming created
    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

  • User Avatar
    0
    maliming created
    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
            });
        },
    }
    
  • User Avatar
    0
    WilliamT created

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

    Thanks.

  • User Avatar
    0
    WilliamT created

    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.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19