Reducing spacing between cells in Grid

[Giorgio]

Hello everybody,

We have a grid in asp.net core using essential2. It is defined in the following way:

    <ejs-grid id="Invoiceitems"

                              toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel"})"

                              allowPaging="true"

                              allowsorting="true"

                              allowtextwrap="true"

                              allowReordering="true"

                              allowRowDragAndDrop="false"

                              height="300"

                              rowSelected="lineGridSelected"

                              dataSource="@Model.Items"

                              rowHeight="25"

                              enableHover="false"

                              enableVirtualization="true"

                              allowSelection="true"

                              actionBegin="actionBegin"

                              actionComplete="actionComplete">

                        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"

                                             showDeleteConfirmDialog="true"

                                             newRowPosition="Bottom"></e-grid-editSettings>

                        <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>

                        <e-grid-pagesettings pagesize="25"></e-grid-pagesettings>

                        <e-grid-selectionSettings persistSelection="false" type="Single"></e-grid-selectionSettings>

                        <e-grid-columns>

                            <e-grid-column field="Code" isPrimaryKey="true" textAlign="Right"

                                           visible="false"></e-grid-column>

                            <e-grid-column template="#codeconcept"

                                           textAlign="Left"

                                           allowResizing="false"

                                           allowEditing="true"

                                           width="90"

                                           edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"

                                           allowFiltering="false"></e-grid-column>

                            <e-grid-column field="ConceptCode" allowEditing=false headerText=@Localizer["Cod."].Value textAlign="Left" width="90"></e-grid-column>

                            <e-grid-column field="ConceptName" allowEditing=false headerText=@Localizer["Desc."].Value textAlign="Center" width="190"></e-grid-column>

                            <e-grid-column field="VehicleCode" allowEditing=false headerText=@Localizer["C.Veh"].Value textAlign="Left" width="90"></e-grid-column>

                            <e-grid-column template="#codevehicle"

                                           textAlign="Left"

                                           allowResizing="false"

                                           allowEditing="true"

                                           allowFiltering="false"></e-grid-column>

                            <e-grid-column field="ContractCode" allowEditing=false headerText=@Localizer["Contrato"].Value textAlign="Left" width="115"></e-grid-column>

                            <e-grid-column template="#codecontract"

                                           textAlign="Left"

                                           allowResizing="false"

                                           allowEditing="true"

                                           width="90"

                                           allowFiltering="false"></e-grid-column>

                            <e-grid-column field="Quantity" headerText=@Localizer["C."].Value editType="numericedit" 

                                           textAlign="Right"

                                           edit="@(new {@params = new Syncfusion.EJ2.Inputs.NumericTextBox() {ShowSpinButton = false}})"></e-grid-column>

                            <e-grid-column field="Discount" headerText=@Localizer["Dto"].Value editType="numericedit" width="95" textAlign="Right" edit="@(new {@params = new Syncfusion.EJ2.Inputs.NumericTextBox() {ShowSpinButton = false}})"></e-grid-column>

                            <e-grid-column field="Price" 

                                           textAlign="Right"

                                           headerText=@Localizer["Prec."].Value editType="numericedit" width="85" edit="@(new {@params = new Syncfusion.EJ2.Inputs.NumericTextBox() {ShowSpinButton = false}})"></e-grid-column>

                            <e-grid-column field="Unity" 

                                           textAlign="Right"

                                           template="#unityconcept" headerText=@Localizer["Uni."].Value  width="85" allowEditing="false"></e-grid-column>

                            <e-grid-column field="Subtotal" 

                                           textAlign="Right"

                                           headerText=@Localizer["Sub"].Value editType="numericedit" width="80" edit="@(new {@params = new Syncfusion.EJ2.Inputs.NumericTextBox() {ShowSpinButton = false}})"></e-grid-column>

                        </e-grid-columns>

                    </ejs-grid>

                    <input asp-for="Invoiceitemsjson" type="hidden" />

We have:

<script id="codeconcept" type="text/x-template">

    <button type="button" id="conceptselect" class="btn btn-primary btn-sm" onclick="showLineModal();" >

        <i class="material-icons">search</i>

    </button>

</script>

<script id="codevehicle" type="text/x-template">

    <button type="button" id="vehicleselect" class="btn btn-primary btn-sm" onclick="showLineVehicleModal();" >

        <i class="material-icons">search</i>

    </button>

</script>

<script id="codecontract" type="text/x-template">

    <button type="button" id="contractselect" class="btn btn-primary btn-sm"

            onclick="showLineContractModal();"

            >

        <i class="material-icons">search</i>

    </button>

</script>

We want to have a slightly better  less spacing between columns and we dont find in the docs where act. If you look at the picture we might 

want :

1. The spacing between line code and line desc smaller.

2. the spacing between cols C adn Dto lesser.

What can we do?

Best Regards,

Giorgio

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to reduce the space between the cells in Grid. We can achieve your requirement by passing those specific columns at initial rendering by invoking the autoFitColumns method in dataBound event of Grid. We have already discuss about this query in the following documentation.   

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#autofit-specific-columns 

Regards, 

Thavasianand S. 

[Giorgio]

Thansk looks good.

Can we this mechanism support reponsive grid  (i.e. adapt to mobile size)? Or there are other mechanism in order. Can we detect ios or android at runtime in the library?

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

Thanks for your update. 

Yes, we can use this mechanism for responsive Grid. By default, EJ2 Grid is responsive nature and work very well on different devices. Browser scroller is provided to make the grid more readable and hide the columns approach based on browser width. If you are facing any issue regard this then please share those detail. 

Regards, 

Thavasianand S. 

[Giorgio]

Thanks.

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.