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

Grouped grid rows packed by default

Thread ID:

Created:

Updated:

Platform:

Replies:

149411 Nov 25,2019 02:56 PM UTC Nov 28,2019 04:22 AM UTC ASP.NET Core 4
loading
Tags: Grid
Neider
Asked On November 25, 2019 02:56 PM UTC

Hello, I need that my grid shows the grouped rows packed by default, when the grid is loaded.

I'll show you how i want it, that is how is showing by default:


and I want that by default the grid shows packed like this:


This is my grid code:
@{
        var GroupedCols = new List<string>() { "PClass", "ProductName" };
    }
    <div id="GridTWrapper" class="col-md-12 grid-container" >
        <ej-grid id="GridT" allow-resizing="true" allow-multiple-exporting="true" action-complete="Complete" databound="dataBound" toolbar-click="toolbarClick1" is-responsive="false" allow-grouping="true" enable-alt-row="false"
                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">
            <e-group-settings caption-format="{{:key}}" show-drop-area="false" show-grouped-column="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="ProductClass" visible="false"></e-column>
                <e-column field="ProductName" header-text="ProductName" 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="#ppTemplateAvailable"></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>


Neider
Replied On November 25, 2019 02:57 PM UTC

and the js for load the data:
(Function)
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);
                });

Alan Sangeeth S [Syncfusion]
Replied On November 26, 2019 02:07 PM UTC

Hi Neider,

 

Thanks for using Syncfusion products.

 

We have achieved your requirement using "expandCollapse" Grid method in "Databound" and "ActionComplete" grid events. Please refer the following code snippets.

 

<ej-grid id="FlatGrid" datasource="ViewBag.DataSource" databound="dataBound" action-complete="complete" allow-grouping="true">
...
</ej-grid>

<script>


    function dataBound() {

        collapseAction(this);

    }

 

 

    function complete(args) {

        if (!this.initialRender) {

            collapseAction(this);

        }

    }

    function collapseAction(gridObj) {

        var rows = gridObj.getContentTable()[0].rows;

        if (gridObj.model.groupSettings.groupedColumns.length < 2) {

            return

        }

        for (i = 1; i <= rows.length; i++)

        {

            if (i % 2 == 0) {

                gridObj.expandCollapse($(rows[i-1]).eq(0).find("td.e-recordplusexpand"));

            }

        }

    }

</script>

 

For your convenience we have created a sample that can be downloadable from below link.

Sample: https://www.syncfusion.com/downloads/support/forum/149411/ze/WebApplication4-1807141796

 

Regards,
Alan Sangeeth S


Neider
Replied On November 26, 2019 04:21 PM UTC

It works, thanks a lot. 

Padmavathy Kamalanathan [Syncfusion]
Replied On November 28, 2019 04:22 AM UTC

Hi Neider,

We are happy to hear that you have achieved your requirement. 

Please get back to us if you need further assistance.

Regards,
Padmavathy Kamalanathan


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