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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Reducing spacing between cells in Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

147162 Sep 3,2019 12:49 PM UTC Sep 9,2019 08:45 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Giorgio
Asked On September 3, 2019 12:49 PM UTC

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 [Syncfusion]
Replied On 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. 


Giorgio
Replied On 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?



Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Giorgio
Replied On September 9, 2019 08:33 AM UTC

Thanks.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon