How to add custom button to Rows of React Grid

[Rohullah]

Hi,

Is there an exmaple for that add custom buttons to rows of Kendo Grid Grid?

thanks

 

[Stefan]

Hello, Rohullah,

This can be seen in one of our editing demos:

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

The main concept is that there is a cell prop of the column and the developer can render anything custom, including buttons, inputs, images, etc:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cell

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Mahesh]

Hi Stefan,

I hope you are doing well.

With the help of this, the additional column is added to the Grid without interaction with any custom JSON file.
I need something like the below-attached screenshot. When the Discontinued will be true then only the custom cell buttons will be visible otherwise not.

I tried several ways but was not able to succeed.

Please let me know what we can do to achieve the requirement.

Looking for a positive revert.

Thanks,
Mahesh

 

[Vessy]

Hi, Mahesh,

You can handle the desired result in the `MyCustomCell` rendering, buy returning an empty cell in case the Discontinued field is `false` for this dataItem:

export const MyCommandCell = (props) => {
  ...
  if (!dataItem.Discontinued) return null;
  return (
    <td className="k-command-cell">
    ...

For convenience, I prepared a sample demonstrating this approach, you can test it here:

• https://stackblitz.com/edit/react-x77mvn-hzac6l?file=app%2FmyCommandCell.tsx,app%2Fsample-products.tsx

Regards,

Vessy

 

[Mahesh]

Hi Vessy,

Thank you so much for the reply.
This is not what I was looking for. Might be miscommunicated.

The field Discontinued not coming from the JSON response. This is a dynamic field. It's updated from time to time based on the response data.

Until it's not updated to true/complete, the buttons should not be visible. 

 

The Project is running in my local, Attached a video for reference.

Grid ->

/**
 * This method will return the Grid Table.
 * @param {Object} response
 * @returns {*}
 * @project:    ELD
 * @date:       2023-10-10
 * @author:     Mahesh
 */

import React from "react";
import { useRecoilValue } from "recoil";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import { ExcelExport } from "@progress/kendo-react-excel-export";
import { selectedAccountState } from "../../../src/recoil/userAtoms";
import "../../../src/common/override.scss";

const GridTable = (props) => {
  const accountInfo = useRecoilValue(selectedAccountState);
  const { tenantIds } = accountInfo;
  const IsTenantId = tenantIds?.length > 0;
  const {
    data,
    gridData,
    _export,
    sortable,
    gridSort,
    page,
    columns,
    tenantId,
    setWidth,
    name,
    dataState,
    dataStateChange,
  } = props;

  const isConsumptionPage = name?.includes("Consumption");
  const isDownloadFile = name?.includes("downloadFile");
  const isLegacyPage = name?.includes('legacy');
  const gridHeight = isLegacyPage ? "700px" : gridData?.length > 7 ? "450px" : "";
  console.log('gridData -> ', gridData);

  const download = () => {
    console.log("download clicked");
  };

  const MyCommandCell = (props) => (
    <td>
      {gridData?.status !== 'Complete' ? (
        <>
          <button
            class="c-button c-button--secondary"
            type="button"
            onClick={() => download()}
          >
            Download
          </button>
          &nbsp;
          <button
            class="c-button c-button--secondary"
            type="button"
            onClick={() => download()}
          >
            Remove
          </button>
        </>
      ) : (
        <>
          <></>
        </>
      )}
    </td>
  );

  return (
    <>
      <ExcelExport data={gridData} ref={_export}>
        <Grid
          style={{
            height: gridHeight,
          }}
          name={name}
          filterable={true}
          sortable={sortable}
          pageable={true}
          {...dataState}
          data={data}
          page={page}
          onDataStateChange={dataStateChange}
        >
          {columns?.map((key, index) => {
            return (
              <GridColumn
                field={key.field}
                title={key.title}
                key={index}
                width={setWidth(key.minWidth)}
                format={key.format}
              />
            );
          })}
          {IsTenantId && !isConsumptionPage && (
            <GridColumn field={"mpnId"} title={"MPNID"} width={"300"} />
          )}
          {isDownloadFile && <GridColumn cell={MyCommandCell} width="200px" />}
        </Grid>
      </ExcelExport>
    </>
  );
};

export default GridTable;

Looking for a positive revert.

Thanks,
Mahesh

[Vessy]

Hi, Mahesh,

You should be able to use exactly the same approach but you should parse the custom variable to the customEditCell as well:

• https://stackblitz.com/edit/react-x77mvn-iqywpw?file=app%2FmyCommandCell.tsx,app%2Fmain.tsx 

Regards,
Vessy

[Mahesh]

Hi Vessy,

Thank you so much for the revert.

Thanks,
Mahesh

 

[Vessy]

You are most welcome, Mahesh :)