Disable elements inside div in function of user's role

[Manolo]

Hi,

I need disable/enable all controls inside div un function of user role.

For disable editors control I've do this:

$("#panelBI :input").attr("disabled", true);
$("#panelBI .e-input").parent().addClass("e-disable").css("pointer-events", "none");

But the grids are not disabled.

 how can i disable the grid?

Thanks

[Venkatesh Ayothi Raman]

Hi Manolo, 

Thanks for contacting Syncfusion support. 

We have prepared a sample based on your requirement which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/BasicMVCSample-1707540249 

In this sample, we can render the Grid with two normal buttons which is named as Disable and Enable. If we click the Disable button, then Grid control disabled and click the Enable button then grid control comes to normal using customizing CSS class. Please refer to the code example, 

Code example: 

@buttons 

<button  onclick="disable()">Disable</button> 

<button onclick="enable()">Enable</button> 

 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

         

            .AllowPaging() 

 

            .Columns(col => 

            { 

                   . . . 

            }) 

         

        ) 

 

@CSS 

<style> 

 

    .disabled { 

    opacity: .5;    

    pointer-events: none; 

} 

</style> 

@button click events 

 

<script type="text/javascript"> 

    function disable() { 

        $("#FlatGrid").addClass("disabled"); //disable the Grid control 

 

    } 

    function enable() { 

        $("#FlatGrid").removeClass("disabled");    //enable the Grid control 

 

    } 

</script> 

Regards, 

Venkatesh Ayothiraman. 

[Manolo]

My doubt is other.

I need enable-disable all grids. I can do it disabling one by one, but I like do it with a jquery expression.

Similar at disabling all drop down list

$("#panelBI .e-input").parent().addClass("e-disable").css("pointer-events", "none");

[Manolo]

And other question. How can I get disable apparence similar at bootstrap and with icon not allow

I attach an image



I've tried set not allowed icon, but it doesn't work
    .disabled {
        opacity: .5;   
        pointer-events: none;
        cursor:  not-allowed;
    }
    .disabled:hover {
        cursor:  not-allowed;
    }

[Venkatesh Ayothi Raman]

Hi Manolo, 

Thanks for the update. 

Query #1:” Disable the all grid in a page” 

Yes, you can disable/enable the all grids in single page use same button click. But we can mention the “e-grid” class instead specific grid id. Please refer to the code example, 

Code example: 

@buttons 

<button  onclick="disable()">Disable</button> 

<button onclick="enable()">Enable</button> 

 

 

@CSS 

<style> 

 

    .disabled { 

    opacity: .5;    

    pointer-events: none; 

} 

</style> 

@button click events 

 

<script type="text/javascript"> 

    function disable() { 

        $(".e-grid ").addClass("disabled"); //disable the Grid control 

 

    } 

    function enable() { 

        $(".e-grid").removeClass("disabled");    //enable the Grid control 

 

    } 

</script> 

In above “e-grid” class is a common class for all Grid controls. So we suggest you to use this class for disable/enable the grids. 

Query #2:” Render the ban-circle when hovering the disabled grid element” 

We went through your code example that you have shared for us and found that you are using pointer-event: none and cursor:not-allowed for same element. But this is not recommended way and we can’t use those CSS in same element. Please refer to the online forum, 

http://stackoverflow.com/questions/25563725/cursor-resets-to-default-after-adding-pointer-eventsnone-in-firefox 

If we misunderstood your query, then could you please share more details about your requirement with screenshots? 

Regards, 

Venkatesh Ayothiraman.