This is a migrated thread and some comments may be shown as answers.

How to make header checkbox with drop dwon configurable.

3 Answers 80 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mukesh
Top achievements
Rank 1
Mukesh asked on 10 Aug 2019, 11:48 AM

I am using header checkbox wit drop down which has multiple option like All, Page,and None, But i want to make it configurable based on props value.

If my props value is true i want to show check box with drop down else, i want to render simple header checkbox. is there any way to achieve that.

I tried making headerCellRender configurable based on property but that doesn't seems to be working. Please find the logic of headerCellRender and let me know if i am something or is it really possible or not.

const headerCellRender = (cell: any, gridProps: GridColumnProps) => {
if (props.showdropDown) {
if (gridProps.field === 'selected') {
return <DropDownList
data={["All", "Page", "None"]}
style={{ width: 35, paddingLeft: 0 }}
popupSettings={{ width: '200' }}
valueRender={valueRender}
onChange={handleHeaderDropDownChange} />
}
return cell
}
else {
return <GridColumn field="selected" width="30px"
filterable={false}
headerSelectionValue={dataResult.data !== undefined ? (dataResult.data[0] !== undefined && props.data.findIndex((dataItem: any) => dataItem.selected !== true) === -1) : false}
/>
}
}

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 Aug 2019, 10:00 AM
Hello, Mukesh,

This can be done by passing additional props to the "headerCellRender":

myHeaderCellRender = (cell, props) => this.headerCellRender(cell, props, additionalProps)

https://stackblitz.com/edit/react-valgmy-safxar?file=app/main.jsx

Please have in mind that the logic on the "onHeaderSelectionChange" may need to be modified to cover the case with the default checkbox.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mukesh
Top achievements
Rank 1
answered on 27 Aug 2019, 10:00 AM

When I have multiple grid in same page and if i do header selection for one grid both the grid are getting selected.

Please find the below example.

https://stackblitz.com/edit/react-valgmy-gbbker?file=app/main.jsx 

 

 

0
Stefan
Telerik team
answered on 27 Aug 2019, 11:47 AM

Hello, Mukesh,

I have provided an answer to a similar question in the following forum thread:

https://www.telerik.com/forums/header-selection-seleting-both-header-checkboxes-when-we-have-multiple-grid-on-same-page

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Mukesh
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mukesh
Top achievements
Rank 1
Share this question
or