How can I build the following kendo grid component?

[Mansi]

Hi,

I want to have a grid as attached in the image. Here for the rows where the value of Description field is blank I want to remove the add icon from the Add/Link Field for that row. And then enable the add icon again when something else selected for Description field.

How can I achieve this using Kendo React Grid?

[Stefan]

Hello, Mansi,

This can be done using the cell prop of the column. This gives the developer full control over how to render each cell for a given column. In that cell, we have to entire row data and can dynamically render or not the icons.

I made an example of how to dynamically render content in a cell, based on another column value:

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

Regards,
Stefan
Progress Telerik

[Mansi]

Hi Stefan,

Thanks for replying.

So, I was using the same logic, And for the first time the icons are rendering or not rendering according to the Description column, but since my Description column is a dropdown, so when I change the value of Description from dropdown, at that time the icons cells are not re rendering to display according to the latest value of Description. How can I achieve that?

Regards,

Mansi

[Stefan]

Hello, Mansi,

This may occur if the Grid data is not updated when the DropDownList value changes. I updated the example to use DropDownList and the value is updated:

https://stackblitz.com/edit/react-vm4ccr?file=app/main.jsx (choose empty to change the value)

[Mansi]

Hello Stefan, 

I am sharing the code that I am using

DummyData.js contains the Data to be displayed

export const Data=[{
    "Name" : "Mansi",
    "Description" : "",
    "ID" : "484",
    "Status" : "Active",
    
}, {
    "Name" : "John",
    "Description" : "NA",
    "ID" : "4674",
    "Status" : "Transit",
    
}, {
    "Name" : "Ian",
    "Description" : "Hardworking",
    "ID" : "2346",
    "Status" : "Proposed",
    
}, {
    "Name" : "Rachel",
    "Description" : "NA",
    "ID" : "84",
    "Status" : "Proposed",
    
}]

Summary.js that contains the Grid Layout

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import { Grid, GridColumn as Column} from '@progress/kendo-react-grid'
import {Data} from './DummyData'
import {Dropdown} from './Dropdown'


export function Summary() {
    return (
        <div>
            <Grid data={Data} fixedScroll={true} resizable={true}>
            <Column title='Name' field='Name' />
            <Column title="Description" field="Description" cell = {Dropdown} />
            <Column title="Add/Link" field="Add/Link" cell={(props) => {
                if(props.dataItem.Description ==="NA") {
                    return (
                        <td >
                            Description = NA
                        </td>
                    )
                }
                else {
                    return (
                        <td>
                            Add
                        </td>
                    )
                }
            }} />
            
            <Column title='ID' field='ID'/>
            <Column title='Status' field='Status'/>
            </Grid>
                    
        </div>
    )
}

Dropdown.js

import  React, {useState} from 'react';
import { DropDownList } from '@progress/kendo-react-dropdowns';
export const Dropdown = props => {

    const List =["NA", "Hardworking", "Improvement Needed"]

    const [value,setvalue] = useState(props.dataItem[props.field])
    const style= {
        border:'0px solid #d5d5d5 !important',
        textAlign:'center !important',
        width: '220px'
    }

    const handleChange=(e)=> { 
        props.dataItem[props.field] = e.target.value
        setvalue(props.dataItem[props.field])
        props.onChange({
            dataIndex: 0,
            dataItem: props.dataItem,
            field: props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.target.value
        });   
    }
    
    return (
        <td>
            <DropDownList
                data={List}
                value={value}
                onChange={handleChange}
                style={style}
            />
        </td>
    )
};

 

What is it that I am doing wrong, I want to autosave the value selected in dropdown and render the Add/Link column everytime some dropdown value is selected?

[Stefan]

Hello, Mansi,

This occurs as the DropDownList list is not actually updating the state. This requires handing the onItemChange event. Please check the editing article that shows all required steps to enable editing:

https://www.telerik.com/kendo-react-ui/components/grid/editing/

[Mansi]

But I don't have any unique Id column like you have Product Id in your example, How will I track which row to update after editing is done?

[Stefan]

Every data should have a unique value in the list, this is a requirement for data collection. If one is not available the developer may add a unique field based on the item index.

I can also recommend checking with the team that works on the backend of the application to provide a unique ID value for each item when a request is made.

[Mansi]

Can I use the data-uid which is generated when kendo grid is created to use as unique identifier for a row?

[Stefan]

They are random and are subject to change on re-mount. We recommend using a custom logic to generate an ID or ask the back-end team to provide an ID for each item.

[Mansi]

Okay, Thank You.

 

[Mansi]

Hi Stefan,

In the example that you have given, if I edit multiple rows at the same time, updating a single row updates all the rows in editing mode at that time. How can I change the code to only update the row corresponding to which UPDATE button is clicked instead of updated all the rows in editing mode at that time?

[Stefan]

This occurs as this is a custom setup and the logic is to reset the in edit rows after an update:

https://stackblitz.com/edit/react-vm4ccr-7wdaxj?file=app%2Fmain.jsx

This is all done on the data level and the developer has full control over this. To set if have multiple edit rows at a time is supported, to close 1 or all rows as well.

If a row will appear in edit depend on the inEdit field of each data item. Setting this value to true or false determines which row will be in edit and when.

[Mansi]

Thank You so much, it was helpful

 

[Mansi]

In this Kendo React Grid, there is a column which is not there in the DummyData.js file, but I want to include it as a hidden column. How can I hide a particular column in my Kendo React Grid, which is not there in the Data read bu the Grid?

[Stefan]

Hello, Mansi,

Please open a new thread for the new question to ensure that people having the same question can easily find it.

Thank you in advance, this is highly appreciated.

[Mansi]

Sure, Thank You