How to allow CRUD operations for specific columns in a Grid but disallow on others

[JimN]

I am using a Grid (or is is DataGrid? I find documentation under both names) to display items in a "to do list" and I want to allow the user to mark an item (represented by a row in the Grid) as "Complete" using a checkbox. I then want to be able to save manually (by way of a Save button) or to post automatically (which I believe a data manager will do). So I need to know if it is possible to make some columns read-only and some columns editable.

As part of this, I would also like to be able to make columns editable (or not) using .NET Authorization. So if an Administrator is logged in, certain columns can be edited and saved, but is a User is logged in, then they are restricted to editing a sub-set of columns.

This is for an ASP.NET Core web app with Razor pages (NOT MVC!)

[Pavithra Subramaniyam]

Hi Jim, 

Query #1:  I then want to be able to save manually (by way of a Save button) or to post automatically (which I believe a data manager will do) 

 

You can achieve your requirement by using column template feature so you can render checkbox component in the column and you can also send the POST request to the server by using Ajax class. We have prepared simple sample based on your query. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

 

[index.chtml] 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" dataBound="dataBound" rowDataBound="rowBound" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 

    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 

    <e-grid-columns> 

        .   .   . 

        <e-grid-column headerText="Completed" template="#temp" width="150" allowEditing="false"></e-grid-column> 

        <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script>    

    function dataBound(e) { 

        var ele = document.getElementsByClassName("e-grid")[0] 

        ele.addEventListener('click', function (args) {       //click event for command button 

            if (args.target.classList.contains('e-details')) { 

                 

                var rowObj = grid.getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid')); 

                var value = rowObj.data; 

                // getting the checkbox state 

                value.Verified = grid.getRows()[1].getElementsByClassName('e-tchk')[0].ej2_instances[0].checked; 

                var options = new ej.base.Ajax(); 

                options.url = "/Index?handler=Update"; 

                .   .  . 

                options.send();  // Ajax send for update the check state 

 

           } 

        }); 

    } 

    function rowBound(args) { 

        //  rendering the checkbox in template column based on the completed value 

        var targetEle = args.row.getElementsByClassName('e-tchk')[0]; 

        var checkBoxObj = new ej.buttons.CheckBox({ checked: args.data['Verified'] }); 

        checkBoxObj.appendTo(targetEle); 

 

    } 

 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns.html#column-template  

                              https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#databound 

                             https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#rowdatabound  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Razorpages-212859048  

Query #2: I need to know if it is possible to make some columns read-only and some columns editable. 

 

You can enable/disable the Editing for a particular column by using  setting the column.allowEditing property. You can check the condition in the load event of Grid and set the column.allowEditing property for required columns. Please refer to the below code example and Documentation link. 

 

[index.chtml] 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" dataBound="dataBound" rowDataBound="rowBound" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 

    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> 

        <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 

    <e-grid-columns> 

        .   .   . 

   </e-grid-columns> 

</ejs-grid> 

 

<script>    

     

    function onLoad() { 

        //  you can check the condition here 

        index.forEach((e) => { 

            this.columns[e].allowEditing = false; 

        }) 

         

</script> 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html#load  

                              https://ej2.syncfusion.com/documentation/grid/api-column.html?lang=typescript#allowediting  

Regards, 

Pavithra S.