Additional space problem

[Krunoslav]

Hi,

I'm using in DataGrid template for editing. Inside template is Tab component. On few tabs I have additional DataGrid. Few is in separate Razor component and one is directly in TabItem. For all I have problem that header and columns/rows show additional empty space. Please look in attached image. Space I mark with yellow color. Bellow the edit dialogue is visible base DataGrid that displayed correctly.

Below is part of code that show how I configure edit template.

<GridEditSettings Mode="EditMode.Dialog" AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowEditOnDblClick="true" ShowDeleteConfirmDialog="true">
    <HeaderTemplate>
        @{
            var text = localizer.GetHeader((context as WorkOrderExDto).Id);
            <span>@text</span>
        }
    </HeaderTemplate>
    <Template>
        @{
            var dataModel = (context as WorkOrderExDto);
            if (dataModel.WorkOrder.Id == Guid.Empty)
            {
                dataModel.WorkOrder.Id = Guid.NewGuid();
                dataModel.WorkOrder.WorkOrderTime = DateTime.Now;
                dataModel.WorkOrder.StartTime = DateTime.Now;
                dataModel.WorkOrder.EndTime = DateTime.Now;
                dataModel.WorkOrder.IsNew = true;
            }
            dataModel.UserId = userId;
 
            <FluentValidator></FluentValidator>
 
            <SfTab Height="@dialogHeight" Width="@dialogWidth">
                <TabItems>
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Osnovni podaci"></TabHeader>
                        </ChildContent>
 
                        <ContentTemplate>
                            <WorkOrderBasic dataModel="@(dataModel.WorkOrder)"></WorkOrderBasic>
                        </ContentTemplate>
                    </TabItem>
 
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Opis"></TabHeader>
                        </ChildContent>
 
                        <ContentTemplate>
                            <SfRichTextEditor Height="@dialogRtfHeight" Width="100%" @bind-Value="@(dataModel.WorkOrder.Description)">
                                <RichTextEditorToolbarSettings Items="@EditTools" />
                                <RichTextEditorImageSettings SaveFormat="SaveFormat.Base64"></RichTextEditorImageSettings>
                            </SfRichTextEditor>
                        </ContentTemplate>
                    </TabItem>
 
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Djelatnici"></TabHeader>
                        </ChildContent>
 
                        <ContentTemplate>
                            <WorkOrderTechnicians WorkOrderId="@(dataModel.Id)" Height="@dialogGridHeight" DataSource="@(dataModel.WorkOrderTechnicians)"></WorkOrderTechnicians>
                        </ContentTemplate>
                    </TabItem>
 
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Oprema za ugradnju"></TabHeader>
                        </ChildContent>
 
                        <ContentTemplate>
                            <WorkOrderItems WorkOrderId="@(dataModel.Id)" Height="@dialogGridHeight" DataSource="@(dataModel.WorkOrderItems)"></WorkOrderItems>
                        </ContentTemplate>
                    </TabItem>
 
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Povijest statusa"></TabHeader>
                        </ChildContent>
 
                        <ContentTemplate>
                            <div style="height: 100%; width: 100%;" class="mt-3">
                                <SfGrid Height="@dialogGridHeight" Width="100%" TValue="WorkOrderStatusJournalDto" AllowFiltering="false" AllowSelection="true"
                                        AllowReordering="true" AllowResizing="true" AllowPdfExport="true" AllowExcelExport="true" PrintMode="PrintMode.AllPages" ClipMode="ClipMode.EllipsisWithTooltip"
                                        Toolbar="@(new List<string>() {"Search"})"
                                        ContextMenuItems="@(new List<string>() {"Add", "AutoFit", "AutoFitAll"})"
                                        AllowSorting="true" EnableHover="true" AllowPaging="true" EnableAutoFill="true"
                                        DataSource="@(dataModel.WorkOrder.WorkOrderStatusJournals)">
 
                                    <GridPageSettings EnableQueryString="true"></GridPageSettings>
                                    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
 
                                    <GridSortSettings>
                                        <GridSortColumns>
                                            <GridSortColumn Field=@nameof(WorkOrderStatusJournalDto.LocalTime) Direction="SortDirection.Descending"></GridSortColumn>
                                        </GridSortColumns>
                                    </GridSortSettings>
 
                                    <GridEvents TValue="WorkOrderStatusJournalDto" QueryCellInfo="@QueryCellInfoHandlerJournal"></GridEvents>
 
                                    <GridColumns>
                                        <GridColumn Field=@nameof(WorkOrderStatusJournalDto.Id) HeaderText="Id" Visible="false" ShowInColumnChooser="false" IsPrimaryKey="true"></GridColumn>
                                        <GridColumn Field=@nameof(WorkOrderStatusJournalDto.LocalTime) HeaderText="Vrijeme" Width="180"></GridColumn>
                                        <GridColumn Field=@nameof(WorkOrderStatusJournalDto.FullName) HeaderText="Korisnik" HideAtMedia="(min-width: 600px)"></GridColumn>
                                        <GridColumn Field=@nameof(WorkOrderStatusJournalDto.StatusName) HeaderText="Status" HideAtMedia="(min-width: 500px)"></GridColumn>
                                    </GridColumns>
                                </SfGrid>
                            </div>
                        </ContentTemplate>
                    </TabItem>
                </TabItems>
            </SfTab>
        }
    </Template>
</GridEditSettings>

Could you please tel me what I must set that I get DataGrid without additional empty spaces?

Regards,

Kruno

Attachment: Grid_additional_space_problem_bfcf4d61.zip

[Jeevakanth Palaniappan]

Hi Krunoslav, 

 

Greetings from Syncfusion support. 

 

We have validated your query and we suggest you to use the below styles to achive your requirement.  

 

<style> 

    .e-edit-dialog .e-gridform .e-table{ 

        border-spacing:0px !important; 

    } 

</style> 

 

Please refer the below sample for your reference. 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid224273997  

Regards, 

Jeevakanth SP. 

[Krunoslav]

Hi,

This work. Thank you.

Regards,

Kruno

[Renjith Singh Rajendran]

Hi Kruno, 

Thanks for your update. 

We are glad to hear that the provided suggestion helped you in achieving this requirement. Please get back to us if you need further assistance. 

Regards, 

Renjith R