How can I build the following kendo grid component?

2 Answers 456 Views
Miscellaneous
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Mansi asked on 08 Oct 2021, 12:41 PM

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?

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 11 Oct 2021, 06:30 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
answered on 11 Oct 2021, 06:49 AM | edited on 11 Oct 2021, 06:50 AM

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
Telerik team
commented on 11 Oct 2021, 06:54 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 11 Oct 2021, 09:27 AM

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
Telerik team
commented on 11 Oct 2021, 09:36 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 11 Oct 2021, 09:41 AM

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
Telerik team
commented on 11 Oct 2021, 10:02 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 12 Oct 2021, 11:35 AM

Can I use the data-uid which is generated when kendo grid is created to use as unique identifier for a row?
Stefan
Telerik team
commented on 12 Oct 2021, 11:37 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 12 Oct 2021, 01:50 PM

Okay, Thank You.

 

Mansi
Top achievements
Rank 1
Iron
Iron
Iron
commented on 19 Oct 2021, 06:57 AM

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
Telerik team
commented on 19 Oct 2021, 08:44 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 19 Oct 2021, 09:28 AM

Thank You so much, it was helpful

 

Mansi
Top achievements
Rank 1
Iron
Iron
Iron
commented on 19 Oct 2021, 11:18 AM

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
Telerik team
commented on 19 Oct 2021, 12:00 PM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 19 Oct 2021, 07:25 PM | edited

Sure, Thank You
Tags
Miscellaneous
Asked by
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stefan
Telerik team
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or