Implementing Checkbox Selection with Row Restrictions and Icon Replacement in Grid

[Brendton van vuuren]

Hello,

I am currently working on implementing checkbox selection in my grid, and I have a specific requirement that I'm having difficulty with.

I need to restrict checkbox selection for certain rows, and for those restricted rows, I'd like to replace the checkbox with an icon. I've reviewed the documentation, but I'm unsure about the best approach to achieve this customization.

Could you please provide guidance that might help me accomplish this? Your assistance would be greatly appreciated.

Thank you in advance for your support.

<ejs-grid id="roles-Grid" dataBound="dataBound" rowDataBound="rowDataBound" enableAdaptiveUI="false" height="100%" width="100%" load="onLoad"

          allowPaging="true" allowSorting="true" allowFiltering="false" toolbar="@(new List<string>() { "Edit","Delete", "Search" })" enablePersistence="false">

    <e-grid-editSettings allowAdding="false" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true" ></e-grid-editSettings>

    <e-grid-selectionsettings checkboxonly="true" checkboxMode="Default" type="Multiple"></e-grid-selectionsettings>

    <e-grid-loadingIndicator indicatorType="Spinner"></e-grid-loadingIndicator>

    <e-grid-pagesettings pageSizes="true"></e-grid-pagesettings>

    <e-data-manager url="/Roles/Index" removeUrl="/Roles/Index?handler=Delete" adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>

    <e-grid-columns>

        <e-grid-column type="checkbox" width="25" template="#selectTemplate"></e-grid-column>

        <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" visible=false></e-grid-column>

        <e-grid-column headerText="Name" template="#nameTemplate" width="400"></e-grid-column>

        <e-grid-column field="UserCount" headerText="Users" allowEditing=false></e-grid-column>

        <e-grid-column headerText="Created At" template="#createdStatus" allowEditing=false></e-grid-column>

        <e-grid-column headerText="Updated At" template="#updatedStatus" allowEditing=false></e-grid-column>

   </e-grid-columns>

</ejs-grid>

<script id="selectTemplate" type="text/x-template">

    ${if(Destroy)}

    <input class="e-checkselect" type="checkbox" aria-label="checkbox">

    ${else}

    <span data-bs-placement="top" data-bs-toggle="tooltip" title="" data-bs-original-title="${DestroyMessage}"><i class="fa-solid fa-lock"></i></span>

    ${/if}

</script>

function rowDataBound(args) {

    args.isSelectable = args.data.destroy;

}

[Santhosh Iruthayaraj]

Hi Brendton,

Greetings from Syncfusion Support.

Based on your query, we understand that you want to prevent specific rows from being selected in checkbox selection mode. You can achieve this by setting the "isSelectable" argument as false in the "rowDataBound" event, based on certain conditions as per your requirement. We have already discussed this in our documentation, which you can find at the following link:

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/selection/check-box-selection#prevent-specific-rows-from-being-selected-in-checkbox-selection

Additionally, to replace the disabled checkboxes with a custom icon, you can hide the default checkbox elements inside the disabled checkbox cell by utilizing respective CSS classes and setting the display property to none. To display a custom icon in place of those hidden checkboxes, you can again use the same "rowDataBound" event with the same condition to disable selection. You can create an icon element with the respective CSS and append it to the disabled checkbox cell using the row element retrieved from the rowDataBound event args.

Please find the code snippet and sample attached below for your reference:

[CSHTML]

 

<script>

    function rowDataBound(args) {

        // condition for prevent selection

        if (parseInt(args.data.OrderID) % 2 == 1) {

 

            // setting isSelectable to false for prevent selection

            args.isSelectable = false;

 

            // get the checkbox cell

            let checkBoxCell = args.row.querySelector('.e-gridchkbox').firstElementChild;

 

            // create icon element

            let iconElement = document.createElement('i');

 

            // adding icon classes to the element

            iconElement.classList.add('e-icons', 'e-close', 'disabled-check-icon');

 

            // appending the element inside checkbox cell

            checkBoxCell.appendChild(iconElement);

        }

    }  

</script>

 

<style>

    /* hide the disabled checkboxes and related elements using CSS */

    .e-rowcell.e-gridchkbox .e-checkbox-disabled > .e-checkselect,

    .e-rowcell.e-gridchkbox .e-checkbox-disabled > .e-frame,

    .e-rowcell.e-gridchkbox .e-checkbox-disabled > .e-label {

        display: none !important;

    }

 

    /* style for the icon */

    .e-rowcell.e-gridchkbox .e-checkbox-disabled > .disabled-check-icon {

        position: absolute;

        top: 8px;

        left: 3.5px;

        font-weight: bold;

        font-size: 19px;

    }

</style>

 

Result:

If this solution is helpful, please consider accepting it as the solution so that other members can locate it more quickly.

Regards,

Santhosh I

Attachment: CoreGridApp_79f34186.zip