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

Grouped grid rows packed by default

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>


4 Replies

NE Neider 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);
                });


AS Alan Sangeeth S Syncfusion Team 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



NE Neider November 26, 2019 04:21 PM UTC

It works, thanks a lot. 


PK Padmavathy Kamalanathan Syncfusion Team 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


Loader.
Live Chat Icon For mobile
Up arrow icon