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

Text Alignment in Group & Table Summary

Thread ID:

Created:

Updated:

Platform:

Replies:

144796 May 21,2019 09:52 PM UTC Oct 21,2019 03:35 PM UTC ASP.NET Core 11
loading
Tags: Grid
Neider
Asked On May 21, 2019 09:52 PM UTC

I'm adding Columns, Groups and Summary through asp.net core code
Data Grid Columns are properly aligned except the most internal group (Bancavalor), how can I align this group.

Grid code :

 <div id="GridTWrapper" class="col-md-12 grid-container" style="display:none">
        <ej-grid id="GridT" allow-resizing="true" allow-multiple-exporting="true" toolbar-click="toolbarClick1" is-responsive="true" allow-grouping="true" enable-alt-row="false"
                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">
            <e-group-settings caption-format="{{:key}}" show-drop-area="false" grouped-columns="GroupedCols"></e-group-settings>
            <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"excelExport" })></e-toolbar-settings>
            <e-columns>
                <e-column field="ProductAndRate" header-text="@Localizer["Product"].Value" text-align="Left" width="200" template-id="#ppTemplateDetails"></e-column>
                <e-column field="PClass" header-text="ProductClass" visible="false"></e-column>
                <e-column field="ProClass" header-text="ProviderClass" visible="false"></e-column>
                <e-column field="PreviousBalance" header-text="@Localizer["Previous Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BoughtAmount" header-text=" @Localizer["Bought Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="CalculatedValuation" header-text=" @Localizer["Valuation Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="CalculatedValuationPA" header-text=" @Localizer["Valuation Amount Per Product"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="PaidRevenueAmount" header-text=" @Localizer["Paid Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="OtherIncome" header-text=" @Localizer["Other Income"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="SoldAmount" header-text=" @Localizer["Sold Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BalanceAmount" header-text=" @Localizer["Final Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="XIRR_value" header-text="@Localizer["TIR"].Value" text-align="Right" format="{0:P2}"></e-column>
            </e-columns>
            <e-summary-rows>
                <e-summary-row title="Total" show-total-summary="true" show-caption-summary="true" >
                    <e-summary-columns>
                        <e-summary-column summary-type="Sum" format="{0:N2}"  display-column="PreviousBalance" datamember="PreviousBalance" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BoughtAmount" datamember="BoughtAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="CalculatedValuation" datamember="CalculatedValuation" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="CalculatedValuationPA" datamember="CalculatedValuationPA" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="PaidRevenueAmount" datamember="PaidRevenueAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="OtherIncome" datamember="OtherIncome" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="SoldAmount" datamember="SoldAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BalanceAmount" datamember="BalanceAmount" />
                    </e-summary-columns>
                </e-summary-row>
            </e-summary-rows>
        </ej-grid>
        <br />
        <ej-grid id="GridD" create="onCreateGrid" allow-resizing="true" enable-alt-row="false"
                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">
            <e-columns>
                <e-column field="ProductAndRate" header-text="Caja disponible" text-align="Left" width="200" template-id="#ppTemplateDetails"></e-column>
                <e-column field="PreviousBalance" header-text="@Localizer["Previous Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BoughtAmount" header-text=" @Localizer["Income Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="CalculatedValuation" header-text=" @Localizer["Valuation Amount"].Value ($)" text-align="Right" format="{0:N2}" visible="false"></e-column>
                <e-column field="PaidRevenueAmount" header-text=" @Localizer["Paid Amount"].Value ($)" text-align="Right" format="{0:N2}" visible="false"></e-column>
                <e-column field="OtherIncome" header-text=" @Localizer["Other Income"].Value ($)" text-align="Right" format="{0:N2}" visible="false"></e-column>
                <e-column field="SoldAmount" header-text=" @Localizer["Outcome Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BalanceAmount" header-text=" @Localizer["Final Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="XIRR_value" header-text="@Localizer["TIR"].Value" text-align="Right" format="{0:P2}" visible="false"></e-column>
            </e-columns>
            <e-summary-rows>
                <e-summary-row title="Total" show-total-summary="true" show-caption-summary="true">
                    <e-summary-columns>
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="PreviousBalance" datamember="PreviousBalance" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BoughtAmount" datamember="BoughtAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="SoldAmount" datamember="SoldAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BalanceAmount" datamember="BalanceAmount" />
                    </e-summary-columns>
                </e-summary-row>
            </e-summary-rows>
        </ej-grid>
    </div>

Thanks for your help.

Manivannan Padmanaban [Syncfusion]
Replied On May 24, 2019 10:41 AM UTC

Hi Neider, 
 
Thanks for contacting Syncfusion Support. We are happy to assist you. 
 
Query: Data Grid Columns are properly aligned except the most internal group (Bancavalor), how can I align this group. 
 
From the shared query, we are able to understand that you have facing the alignment issue with the most internal group. But we are unable to reproduce the reported issue at our end. For your convenience we have created the sample, Kindly refer the below link. 
 
Output 
 
 
Still facing the issue please get back to us, with the following details. 
 
  1. Share the complete grid code example with template definition and GroupedCols definition.
  2. Share the Essential studio version are you using.
  3. If you are using any other additional css customization, please share the detail.
  4. Reproduce the issue in the shared sample Or share the issue reproducing sample.
 
Provided details will help us to resolve the reported issue as early as possible. 
 
Regards, 
Manivannan Padmanaban. 


Neider
Replied On May 24, 2019 01:42 PM UTC

This is the way in which I am creating the groups. I forget to add the var "GroupedCols" previously.

@{
        var GroupedCols = new List<string>() { "PClass", "ProClass" };
    }
    <div id="GridTWrapper" class="col-md-12 grid-container" style="display:none">
        <ej-grid id="GridT" allow-resizing="true" allow-multiple-exporting="true" toolbar-click="toolbarClick1" is-responsive="true" allow-grouping="true" enable-alt-row="false"
                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">
            <e-group-settings caption-format="{{:key}}" show-drop-area="false" grouped-columns="GroupedCols"></e-group-settings>
            <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"excelExport" })></e-toolbar-settings>
            <e-columns>
                <e-column field="ProductAndRate" header-text="@Localizer["Product"].Value" text-align="Left" width="200" template-id="#ppTemplateDetails"></e-column>
                <e-column field="PClass" header-text="ProductClass" visible="false"></e-column>
                <e-column field="ProClass" header-text="ProviderClass" visible="false"></e-column>
                <e-column field="PreviousBalance" header-text="@Localizer["Previous Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BoughtAmount" header-text=" @Localizer["Bought Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="CalculatedValuation" header-text=" @Localizer["Valuation Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="CalculatedValuationPA" header-text=" @Localizer["Valuation Amount Per Product"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="PaidRevenueAmount" header-text=" @Localizer["Paid Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="OtherIncome" header-text=" @Localizer["Other Income"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="SoldAmount" header-text=" @Localizer["Sold Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BalanceAmount" header-text=" @Localizer["Final Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="XIRR_value" header-text="@Localizer["TIR"].Value" text-align="Right" format="{0:P2}"></e-column>
            </e-columns>
            <e-summary-rows>
                <e-summary-row title="Total" show-total-summary="true" show-caption-summary="true">
                    <e-summary-columns>
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="PreviousBalance" datamember="PreviousBalance" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BoughtAmount" datamember="BoughtAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="CalculatedValuation" datamember="CalculatedValuation" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="CalculatedValuationPA" datamember="CalculatedValuationPA" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="PaidRevenueAmount" datamember="PaidRevenueAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="OtherIncome" datamember="OtherIncome" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="SoldAmount" datamember="SoldAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BalanceAmount" datamember="BalanceAmount" />
                    </e-summary-columns>
                </e-summary-row>
            </e-summary-rows>
        </ej-grid>

Manivannan Padmanaban [Syncfusion]
Replied On May 27, 2019 03:46 PM UTC

Hi Neider, 
 
Thanks for the detail. 
 
Query: Data Grid Columns are properly aligned except the most internal group (Bancavalor), how can I align this group.  
 
We have prepared the sample based on the shared code example, But still we are unable to reproduce the reported misalignment at our end. Refer the below link for modified sample, 
 
Still facing the issue please get back to us, with the following details. 
 
  1. Share the Essential studio version are you using.
  2. If you are using any other additional css customizationplease share the detail.
  3. Reproduce the issue in the shared sample Or share the issue reproducing sample.
 
Regards, 
Manivannan Padmanaban. 


Neider
Replied On September 9, 2019 09:45 PM UTC

Hello, but i have still a problem, the grid doesn't show correctly when the data is loaded using datamanager, that is my case. There is how i do it.

function refreshData() {
            var portfolioProductDatasource;
            //Get parameters
            var startDate_val = $("#StartDate").val();
            var EndDate_val = $("#EndDate").val();
            //var query = ej.Query().where("UserId", "equal", value);
            var query = new ej.Query().addParams("Id", '@Model.IdPortfolio');
            query.addParams("StartDate", startDate_val);
            query.addParams("EndDate", EndDate_val);

            /***********************
             * Update Products
             ***********************/
            var productsGridObj = $("#GridT").ejGrid("instance");
            var dataManager = ej.DataManager({
                url: "/Portfolios/GetPortfolioProducts/@Model.IdPortfolio" + "?StartDate="
                + startDate_val + "&EndDate=" + EndDate_val, adaptor: new ej.UrlAdaptor()
            });
            productsGridObj.element.ejWaitingPopup("show");
            var execute = dataManager.executeQuery(query) // executing query
                .done(function (e) {
                    var dataMgr = ej.DataManager({
                        json: e.result.result
                    });
                    productsGridObj.element.ejWaitingPopup("hide");
                    productsGridObj.dataSource(dataMgr);
                });


Thank you.

Manivannan Padmanaban [Syncfusion]
Replied On September 10, 2019 10:15 AM UTC

Hi Neider, 

Thanks for the detail. 

We are able to reproduce the reported issue at our end, while using the shared code example. The reported issue will occur because initially the grid data is empty and later in the refreshData function you have updated the grid data using dataSource method of ejGrid in this case the group caption summary is not updated properly. To avoid the reported issue, we suggest you to use the refreshContent method of ejGrid after dataSource update. Refer the below code example, 


<script> 
    function refreshData() {         
        var portfolioProductDatasource; 
        ……………………….. 
       productsGridObj.element.ejWaitingPopup("show"); 
        var execute = dataManager.executeQuery(query) // executing query 
            .done(function (e) { 
                var dataMgr = ej.DataManager({ 
                    json: e.result.result 
                }); 
                productsGridObj.element.ejWaitingPopup("hide"); 
                productsGridObj.dataSource(dataMgr); 
                productsGridObj.refreshContent(); // refresh the grid. 
            }); 
    } 
</script> 


Also, refer the below help documentation link. 

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 
Manivannan Padmanaban. 


Neider
Replied On September 10, 2019 02:57 PM UTC

Thank you, it works! :)

Manivannan Padmanaban [Syncfusion]
Replied On September 11, 2019 10:04 AM UTC

Hi Neider, 

Thanks for the update. 

We are pleased to hear that the reported issue has been solved. If you need further help, please come back to us. 

Regards, 
Manivannan Padmanaban. 


Neider
Replied On October 17, 2019 11:07 PM UTC

Hello, I'm facing another problem with the grid. I have a datepicker and when I change the date of this date picker my grid have to refresh the data, but, when I refresh my grid it shows shrunk, but i need that the grid shows the full height.

In addition to my code showed before, this is my datepicker and the function associated.

(Datepicker)
<div class="col-md-9">
                    <ej-date-picker id="StartDate" allow-edit="false" max-date="@ViewBag.EndDate" value="@ViewBag.StartDate"
                                    change="onchangedate" date-format="yyyy-MM-dd" enable-persistence="true"
                                    locale="@System.Globalization.CultureInfo.CurrentCulture.Name"></ej-date-picker>
                </div>

<div class="col-md-9">
                    <ej-date-picker id="EndDate" allow-edit="false" value="@ViewBag.EndDate" max-date="@ViewBag.EndDate"
                                    change="onchangedate" date-format="yyyy-MM-dd" create="onDDCreate" enable-persistence="true"
                                    locale="@System.Globalization.CultureInfo.CurrentCulture.Name"></ej-date-picker>
                </div>

(Function)
function onchangedate() {
            refreshData();
            // Creating an object to the DatePicker Element
            var startDatepickObj = $("#StartDate").data('ejDatePicker');
            var endDatepickObj = $("#EndDate").data('ejDatePicker');
            // Get a value of DatePicker
            var startDateValue = startDatepickObj.option('value');
            var endDateValue = endDatepickObj.option('value');
            // Set a value to the DatePicker
            startDatepickObj.option('maxDate', endDateValue);
            endDatepickObj.option('minDate', startDateValue);
        }

This is how the grid is showing:



Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On October 18, 2019 06:54 AM UTC

Hi Neider, 

Thanks for contacting Syncfusion Support. 

We have checked your query and we need some more additional details before proceeding your requirement. Share us the following details. 

  1. Complete Grid code example.
  2. Have you used isResponsive property in your Grid.
  3. Please share us the details whether the reported problem occurs while on Grouping action or else without Grouping.
  4. How you have refresh the Grid on refreshData method.
 
The provided information will be helpful to provide you response as early as possible. 

Regards, 
Farveen sulthana T 


Neider
Replied On October 18, 2019 03:22 PM UTC

Hi, the code of grid is in the previous conversation of this post, but i could fix the problem, the problem was due to the property "is-resposive", i had set it "true", and after change this propertiy to "false", the grid resize works fine after change the date.

Thanks.

Manivannan Padmanaban [Syncfusion]
Replied On October 21, 2019 03:35 PM UTC

Hi Neider, 

Thanks for the update. 

Based on the shared query, we are able to understand that you have facing an height issue when enable the is-responsive property. If you have enabled is-responsive property, then we have to refer the responsive css and if you want to maintain the desire height and width then we have to set the width and height using scrollsettings property of ejGrid. 

So, if you want to enable the is-responsive property. Kindly ensure whether are you referred the below css and with required scrollSettings. 
  1. responsive.css
  2. ejgrid.responsive.css

Refer the below code for scrollSetting, 

<ej-grid id="FlatGrid" ……… allow-scrolling="true"  is-responsive="true">
<e-scroll-settings width="500" height="300"> // set your desire height and width here. 
<e-columns>  
……………….. 
</e-columns> 
</ej-grid> 


Still facing an issue, please get back to us. 

Regards, 
Manivannan Padmanaban. 


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