|
| 1 | +--- |
| 2 | +sidebar_label: getCardHeight |
| 3 | +title: getCardHeight Config |
| 4 | +description: You can learn about the getCardHeight config in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. |
| 5 | +--- |
| 6 | + |
| 7 | +# getCardHeight |
| 8 | + |
| 9 | +### Description |
| 10 | + |
| 11 | +@short: Optional. A function that returns an estimated height of a card |
| 12 | + |
| 13 | +The `getCardHeight` function is used by the widget to estimate card heights when the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property is not set and the board is configured with [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) and [`scrollType: "column"`](api/config/js_kanban_scrolltype_config.md). The estimated heights let the widget render the scrollbar correctly before the actual cards are measured in the DOM. |
| 14 | + |
| 15 | +:::info |
| 16 | +If you set the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property, the widget uses the fixed height and `getCardHeight` is not called. Setting `cardHeight` is the recommended way to combine `renderType: "lazy"` with `scrollType: "column"`. |
| 17 | +::: |
| 18 | + |
| 19 | +### Usage |
| 20 | + |
| 21 | +~~~jsx {} |
| 22 | +getCardHeight?: (cardShape: object, card: object, cardWidth: number) => number; |
| 23 | +~~~ |
| 24 | + |
| 25 | +### Parameters |
| 26 | + |
| 27 | +The callback function takes the following arguments: |
| 28 | + |
| 29 | +- `cardShape` - the configuration object of the card (the [`cardShape`](api/config/js_kanban_cardshape_config.md) property) |
| 30 | +- `card` - the data object of the card |
| 31 | +- `cardWidth` - the current width of the card in pixels |
| 32 | + |
| 33 | +The function must return a number — the estimated height of the card in pixels. |
| 34 | + |
| 35 | +### Default config |
| 36 | + |
| 37 | +By default, the widget uses a built-in function that approximates card height based on the visible fields declared in [`cardShape`](api/config/js_kanban_cardshape_config.md) and the data stored in the card. This default works for boards that rely on the built-in card layout. |
| 38 | + |
| 39 | +If you provide a custom [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md), the built-in approximation can no longer predict the actual height of the rendered markup. In this case, specify a custom `getCardHeight` function that returns the height of the rendered template, or set a static [`cardHeight`](api/config/js_kanban_cardheight_config.md) instead. |
| 40 | + |
| 41 | +### Example |
| 42 | + |
| 43 | +The example below provides a custom `getCardHeight` function for a board with a custom card template: |
| 44 | + |
| 45 | +~~~jsx {15-22,27} |
| 46 | +const cardTemplate = ({ cardFields }) => { |
| 47 | + const { label, description } = cardFields; |
| 48 | + return ` |
| 49 | + <div class="custom-card" style="padding:20px"> |
| 50 | + <div class="custom-label">${label}</div> |
| 51 | + <div class="custom-description">${description || ""}</div> |
| 52 | + </div> |
| 53 | + `; |
| 54 | +}; |
| 55 | + |
| 56 | +new kanban.Kanban("#root", { |
| 57 | + cards, |
| 58 | + columns, |
| 59 | + renderType: "lazy", |
| 60 | + scrollType: "column", |
| 61 | + cardTemplate: kanban.template(card => cardTemplate(card)), |
| 62 | + getCardHeight: (cardShape, card, cardWidth) => { |
| 63 | + // estimate the height of the custom template |
| 64 | + let height = 60; // base padding + label line |
| 65 | + if (card.description) { |
| 66 | + height += Math.ceil(card.description.length / 40) * 18; |
| 67 | + } |
| 68 | + return height; |
| 69 | + }, |
| 70 | + // other parameters |
| 71 | +}); |
| 72 | +~~~ |
| 73 | + |
| 74 | +**Related articles:** [Configuration](guides/configuration.md#rendering-and-scrolling) |
0 commit comments