Expand hierarchical grid of a row when a button is clicked

[Frédéric Peyronnin]

Hi,

I have a hierarchical grid like this :

<ej-grid id="FlatGridEchantillons" allow-grouping="true" enable-persistence="false" enable-touch="true" show-column-chooser="true" databound="databound" action-complete="actioncomplete" allow-reordering="true" allow-resize-to-fit="true" allow-resizing="true" allow-paging="true" action-failure="OnActionFailure" allow-filtering="true" allow-sorting="true" load="onLoad">
    <e-edit-settings allow-editing="true" allow-deleting="true" edit-mode="Normal" show-confirm-dialog="true" show-delete-confirm-dialog="true"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"edit","delete","update","cancel", "search" }' />
    <e-datamanager json="ViewBag.datasource" update-url="/Logged/EchantillonsListCellEditUpdate" remove-url="/Logged/EchantillonsListCellEditDelete" adaptor="remoteSaveAdaptor" />
    <e-columns>
        <e-column field="iECH_ID" header-text=@GetMsg("LIBID_ECHANT_ID") is-primary-key="true" text-align="Right" width="5" allow-editing="false"></e-column>
        <e-column field="strECH_Libelle" header-text=@GetMsg("LIBID_ECHANT_LIBELLE") width="40" validation-rules='new Dictionary<string, object>() { { "required",true} }'></e-column>
        <e-column header-text="">
            <e-column-commands>
                <e-column-command type="Details">

                    <e-button-options click="customButton" text="Details"></e-button-options>
                </e-column-command>

            </e-column-commands>
        </e-column>
    </e-columns>
    <ej-grid query-string="iECH_ID" datasource="ViewBag.datasourceANA" allow-paging="false" query-cell-info="onQuerycellInfo" allow-reordering="true" action-begin="begin" record-double-click="recordDblClick" before-batch-save="BeforeBatchSave">
        <e-edit-settings allow-editing="false" edit-mode="Batch" show-confirm-dialog="true" show-delete-confirm-dialog="true"></e-edit-settings>
        <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> { "edit", "update", "cancel", "search" }' />
        <e-datamanager url="/Logged/EchantillonsListCellGetANA" adaptor="@AdaptorType.UrlAdaptor" batch-url="/Logged/AnalysesEchantillonsListCellEditUpdate" update-url="/Logged/AnalysesEchantillonsListCellEditUpdate" remove-url="/Logged/AnalysesEchantillonsListCellEditDelete" />
        <e-columns>
            <e-column field="iECH_ANA_ID" header-text=@GetMsg("LIBID_ECHANT_ID") is-primary-key="true" text-align="Right" width="5" allow-editing="false"></e-column>
            <e-column field="strANA_LibelleParam" header-text=@GetMsg("LIBID_ANALYSE_LIBELLEPARAM") width="40" allow-editing="false"></e-column>
editing="false"></e-column>
        </e-columns>
    </ej-grid>
</ej-grid>

And in my custom button function, i have :

function customButton(args) {
//$("#FlatGridEchantillons").ejGrid("expandCollapse");
//this.expandCollapse(args.row.find('.e-detailrowcollapse'));
//this.expandCollapse(args.row.find('td:first'));
//$("#FlatGridEchantillons").ejGrid("expandCollapse", args.row.find('.e-detailrowcollapse'));
}

I would like in this function to expand only the row corresponding with the customButton i clicked, and i would like to get the content of the ID field (wich is"iECH_ID"), so i can send it to an ajax post.

I spent a lot of time to read the forum and documentation but i did not find where the solution is, in ASP NET CORE code.

Thx by advance,

Fred.

[Thavasianand Sankaranarayanan]

Hi Frédéric, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to expand or collapse the Grid when we click in custom command button. We can achieve your requirement in the click event of custom command button. 

Refer the below code example. 

<ej-grid id="FlatGridEchantillons" allow-grouping="true" enable-persistence="false" enable-touch="true" show-column-chooser="true" allow-reordering="true" allow-resize-to-fit="true" allow-resizing="true" allow-paging="true" allow-filtering="true" allow-sorting="true"> 

 

      ---- 

 

    <e-columns> 

         

         ---- 

 

        <e-column header-text="" width="90"> 

            <e-column-commands> 

                <e-column-command type="Details"> 

             <e-button-options click="customButton" text="Details"></e-button-options> 

                </e-column-command> 

            </e-column-commands> 

        </e-column> 

    </e-columns> 

 

    <ej-grid query-string="EmployeeID" allow-paging="true" query-cell-info="onQuerycellInfo" allow-reordering="true" action-begin="begin" record-double-click="recordDblClick" before-batch-save="BeforeBatchSave"> 

         

          --- 

 

        <e-columns> 

             

           --- 

 

        </e-columns> 

    </ej-grid> 

</ej-grid> 

                

<script type="text/javascript"> 

 

    function customButton(args){ 

        var obj = $("#FlatGridEchantillons").ejGrid('instance'); 

        var trElement = this.element.closest('tr'); 

        if ($(trElement).find('td.e-detailrowexpand').length == 0) 

            obj.expandCollapse($(trElement).find('td.e-detailrowcollapse > div')); // for expanding the corresponding row 

        else 

            obj.expandCollapse($(trElement).find('td.e-detailrowexpand > div')) // for collapsing the corresponding row 

    } 

 

</script> 

  

We have prepared a sample for your convenience and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/137270/ze/WebApplication1-1533117528.zip 

Refer the help documentation. 

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

Regards, 

Thavasianand S.