How to Selection or Clickable with RowTemplate

[Nguyen Tom]

Hi, I could not make the grid Click on the row for Editing when using rowtemplate.

Here is my code

 <SfGrid ID="Order_ThongTinNhanDonHang" DataSource="@dataObjects" AllowSorting="true" AllowSelection="true"

         EnableAdaptiveUI="true" RowRenderingMode="RowDirection.Vertical"

         Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="100%" Width="100%" AllowPaging="false">

     <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>

     <GridTemplates>

         <RowTemplate>

             @{

                 var ThongTinNhanDonHang = (context as ThongTinNhanDonHang);

                 <table style="width:100%">

                     <tbody>

                         <tr style="width:100%">

                             <td style="font:700;color:brown;">@ThongTinNhanDonHang.TenSanPham</td>

                         </tr>

                         <tr style="width:100%">

                             <td>Ngày Đặt: @ThongTinNhanDonHang.OrderDate</td>

                         </tr>

                         <tr style="width:100%">

                             <td>Giá Giao: @ThongTinNhanDonHang.GiaGiao </td>

                         </tr>

                         <tr style="width:100%">

                             <td>SL:<a style="font-size:larger;font-weight:500"> @ThongTinNhanDonHang.Sl </a> </td>

                         </tr>

                     </tbody>

                 </table>

             }

             <GridColumn Field=@nameof(ThongTinNhanDonHang.Id) IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" Visible="false"></GridColumn>

         </RowTemplate>

     </GridTemplates>

 </SfGrid>

[Naveen Palanivel]

Hi Nguyen,

Row template feature is not compatible with all the features which are available in datagrid and it has limited features support. So it is not possible to  RowSelect while click the row in RowTemplate. Kindly refer the UG documentation for your reference.

https://blazor.syncfusion.com/documentation/datagrid/row-template#limitations

Kindly get back to us if you have further queries.

Regards,

Naveen

[Nguyen Tom]

Thanks Naveen Palanivel, is there any chance to make Clickable grid looks like in the picture with the top row remove column header or totaly remove header column in Vertical Grid

[Naveen Palanivel]

Hi Nguyen,

we would like to inform you that it is not possible to render dialog in rowtemplate. We removed column header in Vertical Grid by using CSS style . Please refer the code snippet and sample for your reference

Sample : https://blazorplayground.syncfusion.com/embed/BNhUiiVUoPSzTgOL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<style>

     .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before{

        display: none;

    }

 

    .e-bigger.e-grid.e-row-responsive .e-table td:not(.e-hide){

        padding-left:0px;

    }

 

</style>

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Nguyen Tom]

Thank you, it works perfectly