Text Alignment in Group & Table Summary

[Neider]

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]

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. 

http://www.syncfusion.com/downloads/support/forum/144796/ze/SyncfusionASPNETCoreApplication11211773500.zip  

 

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]

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]

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, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETCoreApplication11931887424.zip  

 

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 customization, please share the detail.
3. Reproduce the issue in the shared sample Or share the issue reproducing sample.

 

Regards, 

Manivannan Padmanaban. 

[Neider]

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]

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. 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent 

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

Regards, 

Manivannan Padmanaban. 

[Neider]

Thank you, it works! :)

[Manivannan Padmanaban]

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]

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]

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]

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]

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.