Telerik Forums
KendoReact Forum
0 answers
215 views

Hi,

I am currently facing a challenge with implementing dynamic grid columns with custom cells, along with column lock functionality. I have attempted to address this issue by creating a separate file for the grid configuration, where I define all the column properties and provide template names.

Here is an excerpt from my "gridConfig.tsx" file:

let CommandCell = (props: GridCellProps) => <MyCommandCell {...props} deleteData={deleteData} edit={enterEdit} remove={remove} add={add} discard={discard} update={update} newId={newId} cancel={cancel} editField={editField} />
let CommandCell1 = (props: GridCellProps) => <DropDownConnection {...props} alldata1={dropDownDataConnection} keyField="id" textField="connectionName"/>

 

 const columnDefinitions = [{

      field: SELECTED_FIELD,
      title: "",
      width: "50px",
      filterable: false,
      headerSelectionValue:
        data.findIndex((item) => !selectedState[idGetter(item)]) === -1,
      selected: false,
      show: true,
    },
    {
      field: "id",
      title: "ID",
      filter: "numeric",
      width: "200px",
      template: ColumnMenuCheckboxFilter,
      editable: false,
      selected: false,
      show: false,
    },
    {
        field: "tenantId",
        title: "Tenant Id",
        filter: "numeric",
        width: "200px",
        template: ColumnMenuCheckboxFilter,
        editable: false,
        selected: false,
        show: false,
      },
    {
      field: "connectionId",
      title: "Connection Id",
      filter: "text",
      width: "200px",
      template: ColumnMenuCheckboxFilter,
      editable: false,
      cell: CommandCell1,
      selected: false,
      show: true,
    }]

In the "GridComponent.tsx" file, I have utilized the column definitions as follows:

<Column field={SELECTED_FIELD} width="50px" headerSelectionValue={data.findIndex((item) => !selectedState[idGetter(item)]) === -1} filterable={false} />
        {columnDefinitions.map((column, index) => column.show && 
        <Column key={index} field={column.field} title={column.title} width={column?.width} cell= {column.cell}editable={column?.editable} />
        )}
        <Column title="Action Buttons" cell={CommandCell} width="200px" locked filterable={false} />

The issue I am encountering is related to passing props, as I am unable to include component code directly within the grid configuration. Could you please assist me in finding a solution to this problem?

Thank you very much in advance for your kind support!

Amol
Top achievements
Rank 1
 asked on 29 May 2023
2 answers
235 views

Hi ,

Today is 3/08/2023. I tried to create 2  DateTimePicker  controls  as code below 

const effDate2 = new Date( "2023-03-03");
   

consttoday = newDate();

 <div className="mb-3">
                  <Label> Effective Date </Label>
                  <DatePicker name = 'effectiveDate' value ={effDate2} onChange={handleDatePickerChange} />
                 
                </div>
                <div className="mb-3">
                  <Label> Today  </Label>
                  <DatePicker name = 'today' value ={today} onChange={handleDatePickerChange} />
                 
                </div>

 

The Effective Date control show :   while the Today Date show  

 

Can you pls advise me why the value of Effective Date changed ? 


Thanks,
Thao Phan

 


Vessy
Telerik team
 answered on 26 May 2023
1 answer
57 views

Hi,

Is there a way to customize buttons inside Grid drag and drop area for column grouping? Something simple like changing the display text.

 

Thanks,

Jie

Filip
Telerik team
 answered on 26 May 2023
1 answer
253 views

I am using kendo react scheduler with many events. Now, when any event is clicked, i need to get the event id of that event through a callback.

But i can't get how to get that. Any help will be appriciable.

Wissam
Telerik team
 answered on 26 May 2023
1 answer
122 views

Hi Team, 

Please can you advise on the following error while building a TypeScript project using Vite?

[commonjs--resolver] Unexpected token (32:79) in /opt/actions-runner/_work/blue-file-operational-map-web/blue-file-operational-map-web/node_modules/@progress/kendo-react-ripple/dist/es/Ripple.js

Full stack error screenshot attached.

Thanks,

Grant

 

Grant
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 26 May 2023
1 answer
81 views

Hello,

do you plan to support React server components? if so, when could it be?

Thanks

Kiril
Telerik team
 answered on 25 May 2023
1 answer
109 views

Hi guys, 

I'm trying to use the Typography component, but the margin is not being set. I obtained this example from the documentation.
React Common Utilities Library & Typography Component - Appearance - KendoReact Docs & Demos (telerik.com)


optimistic-cache-oslpq9 - CodeSandbox

All examples here have the same margin... is it a bug?

Thanks,


Vessy
Telerik team
 answered on 24 May 2023
0 answers
120 views

Hello,

I would like to customize theme, but as node-sass is deprecated I wanted to use sass npm package (https://www.npmjs.com/package/sass). Problem is that during compilation I get an error: "Syntax error: Selector "[hidden]" is not pure (pure selectors must contain at least one local class or id)". Is it possible to make it work? Do you plan to support sass package?

Thanks

Matúš
Top achievements
Rank 1
Iron
 asked on 24 May 2023
1 answer
149 views

We’re currently trying to make our web Application compliant with the WCAG standards, and right now it fails a few of the requirements. 

we're getting "The CSS outline or border style on this element makes it difficult or impossible to see the dotted link focus outline." accessibility issue.

After a lot of troubleshooting, we discovered that this problem is caused by a CSS file that comes from Kendo, a third-party tool we use. Unfortunately, we can't change that CSS file. We also tried to override the styling with our own, but the problem still persists.

all.scss , this is the file containing the css coming by importing this module,  @progress/kendo-theme-bootstrap/dist/all.scss

Kindly refer to attached file for more clarity.

(p.s. we're using sortsite standard for accessibility)

Vessy
Telerik team
 answered on 24 May 2023
0 answers
177 views

i am creating a upload component to upload file and images to DB via link.
following is the code snippet for the same
i am able to upload the files and images
but when editing the data, onAdd function is cancelling the upload


if i remove setSignImgPathAzure then component works fine but i need to set the state to empty string for other dependency

i tried with using callbacks and basic debugging
not able to solve the error

  const onChangeHandler = (event: UploadOnAddEvent) => {
      fieldRenderProps.onChange({ value: event.newState });
      setSignImgPathAzure("");

    };

 

<Upload
            className="k-mt-5"
            batch={false}
            multiple={true}
            defaultFiles={[]}
            withCredentials={false}
            saveUrl={LOGO_UPLOAD_SAVE}
            onAdd={onChangeHandler}
            onRemove={onRemoveHandler}
            onStatusChange={getImgPath}
            restrictions={{
              allowedExtensions: FIELD_ALLOWED_IMAGE_TYPES,
              maxFileSize: 2000000,
            }}

          />

 

 

 

 

 

Tejas
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 24 May 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?