How to make read only grid cells in Blazor

[chandradev]

Hi All,

I am generating the grid header dynamically from database. But i need to make read one column. Currently it is editable. Could you please give me syntax for this ?

public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<Inspection> args)

    {

        if (args.Data.RecType.Trim() == "HEAD")

        {

            args.Cell.AddClass(new string[] { "Head1" });

          // Need the syntax for making read only cell

        }

    }

[Renjith Singh Rajendran]

Hi chandradev, 

Greetings from Syncfusion support. 

You can make a GridColumn as read only by disabling the AllowEditing property of particular GridColumn. Please refer the below documentation for more details regarding preventing the editing for the particular column in Grid.  

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#disable-editing-for-particular-column 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[chandradev]

Thanks for reply. I need for row disable syntax. 

[chandradev]

<SfGrid DataSource="@inspectGrid"

        GridLines="GridLine.Both"

        Toolbar="@(new List<string>() {"Update", "Cancel"})">

    <GridEvents OnBatchSave="BatchSaveHandler" RowSelecting="RowSelectingHandler" 

                CellSelecting="CellSelectingHandler"  RowSelected="RowSelectedHandler"

                QueryCellInfo="QueryCellInfoHandler"

                TValue="Inspection" />

    <GridEditSettings AllowAdding="true"

                      AllowDeleting="true"

                      AllowEditing="true"

                      Mode="EditMode.Batch" />

    <GridColumns>

        <GridColumn Field=@nameof(Inspection.PriInspectionId) IsPrimaryKey="true" AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn1) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn2) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn3) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn4) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn5) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn6) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn7) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn8) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.OrderNo) Visible="false" AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.RecType) Visible="false" />

        <GridColumn Field=@nameof(Inspection.MediaFileUrl) AutoFit="true" />

    </GridColumns>

</SfGrid>

<style>

    .e-grid .e-gridheader .e-columnheader {

        display: none;

    }

    .e-grid .e-gridcontent .e-rowcell.Head1 {

        background-color: lightskyblue;

        font-weight: bold;

    }

</style>

public void RowSelectingHandler(RowSelectingEventArgs<Inspection> args)

    {

        if (args.Data.RecType.Trim() == "HEAD") //we ahve prevented the row selection for order id --1004 

        {

            args.Cancel = true;

        }

    }

    public void CellSelectingHandler(CellSelectingEventArgs<Inspection> args)

    {

        args.Cancel = true;

    }

    public void RowSelectedHandler(RowSelectEventArgs<Inspection> args)

    {

        args.Cancel = true;

    }

My requirement is make the one complete row as read only or disable editable row, But i m using Mode="EditMode.Batch" in Grid. I tried the above syntax. It is not working. 

[chandradev]

<SfGrid DataSource="@inspectGrid"

        GridLines="GridLine.Both"

        Toolbar="@(new List<string>() {"Update", "Cancel"})">

    <GridEvents OnBatchSave="BatchSaveHandler" RowSelecting="RowSelectingHandler" 

                CellSelecting="CellSelectingHandler"  RowSelected="RowSelectedHandler"

                QueryCellInfo="QueryCellInfoHandler"

                TValue="Inspection" />

    <GridEditSettings AllowAdding="true"

                      AllowDeleting="true"

                      AllowEditing="true"

                      Mode="EditMode.Batch" />

    <GridColumns>

        <GridColumn Field=@nameof(Inspection.PriInspectionId) IsPrimaryKey="true" AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn1) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn2) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn3) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn4) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn5) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn6) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn7) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.Icolumn8) AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.OrderNo) Visible="false" AutoFit="true" />

        <GridColumn Field=@nameof(Inspection.RecType) Visible="false" />

        <GridColumn Field=@nameof(Inspection.MediaFileUrl) AutoFit="true" />

    </GridColumns>

</SfGrid>

<style>

    .e-grid .e-gridheader .e-columnheader {

        display: none;

    }

    .e-grid .e-gridcontent .e-rowcell.Head1 {

        background-color: lightskyblue;

        font-weight: bold;

    }

</style>

public void RowSelectingHandler(RowSelectingEventArgs<Inspection> args)

    {

        if (args.Data.RecType.Trim() == "HEAD") //we ahve prevented the row selection for order id --1004 

        {

            args.Cancel = true;

        }

    }

    public void CellSelectingHandler(CellSelectingEventArgs<Inspection> args)

    {

        args.Cancel = true;

    }

    public void RowSelectedHandler(RowSelectEventArgs<Inspection> args)

    {

        args.Cancel = true;

    }

My requirement is make the one complete row as read only or disable editable row, But i m using Mode="EditMode.Batch" in Grid. I tried the above syntax. It is not working. 

I fixed the issue using css like this

 pointer-events: none;

[Renjith Singh Rajendran]

Hi chandradev, 

Thanks for your update. 

We are glad to hear that you have achieved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith R