We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Reducing spacing between cells in Grid

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





5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team September 4, 2019 11:24 AM UTC

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.   


Regards, 
Thavasianand S. 



GI Giorgio September 4, 2019 12:22 PM UTC

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?




TS Thavasianand Sankaranarayanan Syncfusion Team September 5, 2019 10:36 AM UTC

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. 



GI Giorgio September 9, 2019 08:33 AM UTC

Thanks.


TS Thavasianand Sankaranarayanan Syncfusion Team September 9, 2019 08:45 AM UTC

Hi Giorgio, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon