In child grid when clicking checkall or uncheckall not select before selected rows

[Ixlos Botirov]

Hello my name is Ikhlos. I have some questions

1. In grid have child grid. In child grid have 11 column, one column type checkbox.This checkbox has field name(from API come true or false). When  clicking in child grid selectall or unselectall column checkbox NOT select false row. How i do this

2. How to use ref in child grid?

Thanks in advance

child grid:

this.childGrid = {
    ref: childG => this.childGridRef = childG,
    queryString: 'material_purchase_application',
    rowSelected: this.rowSelect.bind(this),
    rowDeselected: this.rowSelect.bind(this),
    rowDataBound: this.childRowDataBound.bind(this),
    selectionSettings: { checkboxOnly: true },
    checkBoxChange: this.checkBoxChange.bind(this),
    load() {
        this.parentDetails.parentKeyFieldValue = this.parentDetails.parentRowData['id']
    },
    columns: [
        { field: 'id', headerText: t('ID'), textAlign: 'Center'},
        { field: 'tocontract', textAlign: 'Center', type:'checkbox'},
        { field: 'material_name',  textAlign: 'Center'},
        { field: 'color_name', textAlign: 'Center'},
        { field: 'amount',  textAlign: 'Center'},
        { field: 'm_unit_name',  textAlign: 'Center'},
        { field: 'planned_cost', textAlign: 'Center'},
        { field: 'notes',  textAlign: 'Center'},
        { field: 'signer_name',  textAlign: 'Center'},
        { field: 'sign_time',  textAlign: 'Center'},
        { field: 'distribution_time',  textAlign: 'Center'},
    ],
};





parent Grid
<GridComponent 
    dataSource={this.state.applications} 
    childGrid={this.childGrid} 
    allowSorting={true}
    detailDataBound={this.detailDataBound.bind(this)}
    ref={g => this.grid = g} >
    <ColumnsDirective>
        <ColumnDirective
            field={'id'}
            headerText={'ID'}
            //visible={false}
            isPrimaryKey={true}
        />
        <ColumnDirective
            field='factory_name'
            headerText={t('TEST')}
            textAlign='Center'
        />
        <ColumnDirective
            field='warehouse_name'
            headerText={t('TEST')}
            textAlign='Center'
        />
        <ColumnDirective
            field='arriving_date'
            headerText={t('TEST')}
            textAlign='Center'
        />
        <ColumnDirective
            field='applicant_name'
            headerText={t('TEST')}
            textAlign='Center'
        />
        <ColumnDirective
            field='notes'
            headerText={t('TEST')}
            textAlign='Center'
        />
        <ColumnDirective
            field='currency_name'
            headerText={t('TEST')}
            textAlign='Center'
        />
        <ColumnDirective
            field='action'
            headerText={t("Действие")}
            headerTextAlign= 'center'
            showInColumnChooser= {false}
            allowResizing={true}
            visible={this.state.childActionColumn}
            template= {this.actionsParentTemplate}
        />
    </ColumnsDirective>
    <Inject services={[DetailRow, Page, Sort]} />
</GridComponent>


data from API

results: [
id
....
....
....
....
....
...
...
details: [
id
...
...
...
...
.
]
]
details - child grid

[Balaji Sekar]

Hi Ikhlos, 

 

Greetings from the Syncfusion support. 

 

Query #1: In grid have child grid. In child grid have 11 column, one column type checkbox.This checkbox has field name(from API come true or false). When  clicking in child grid selectall or unselectall column checkbox NOT select false row. How i do this 

 

Before proceeding your query we suspect that you want to update value of checkbox column based on checkbox changes or you need to . Please ensure your exact requirement to us that will help to validate further. 

 

Query #2:  How to use ref in child grid? 

By default, parent Grid binding Vue architecture but in childGrid define in typescript way so we cannot define ref in this grid component however we can access the childGrid instances in that Grid’s events using “this” like created, load, etc. 

Regards, 

Balaji Sekar