Telerik Forums
KendoReact Forum
1 answer
96 views

I have shared the screenshots of the problem.

The Column separators appear when executing localhost (i.e. npm start)

But the column separators dont appear when deployed on Host (i.e. npm run build).
However, if I hover over the separator area, I'm able to resize and re-order the columns.
Just the visual lines are not visible.

I use a custom MuellerTheme.css that I downloaded via the Progress-ThemeBuilder.

Attached are the package.json and additional .css files in use.

 

 

Deepak
Top achievements
Rank 1
Iron
 updated answer on 04 Dec 2023
0 answers
153 views

Hello everyone

 

I need to implement a DatePicker with a section with prefilled dates for the User.

Here is my implementation - https://stackblitz.com/edit/react-t6vo2n 

I have a problem - when you click on the prefilled date the DatePicker doesn’t take the date. If you click very quickly the DatePicker can take the date. I suppose that it appears because the popup starts unmounting. I suppose the unmounting cause is that the calendar lost focus when the User clicked any area in the prefilled dates section.

Can I somehow prevent this?


 
Kostiantyn
Top achievements
Rank 1
 asked on 01 Dec 2023
1 answer
143 views

I want to upgrade kendo react Grid component(@progress/kendo-react-grid@5.5.0) to version 5.5.0.  but its showing dependency errors related some other components as well.  Please help on this issue.

Vessy
Telerik team
 answered on 30 Nov 2023
1 answer
84 views

Hi team,

I would like to change particular slot background color on certain days based on certain condition.

 

I read:
https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/

I am aware there is this props:
https://www.telerik.com/kendo-react-ui/components/scheduler/api/SchedulerSlotProps/

isAllDay, isWorkDay, etc

But is there a way for me to add my own custom props like "isOnDuty", and then if true, I can color it with specific colors.

Or certain way to customize the background color based on a condition checking.

 

Something like (I use devtool to edit):

Edit, was able to do using this code:


const CustomSlot = (props) => {
  
  let colorBg;
  if(props.start.getHours() === 8 && props.start.getDay() === 1){
    colorBg = '#f520aa';
  } else if(props.isAllDay || !props.isWorkHour || !props.isWorkDay){
    colorBg = '#ffddcc';
  } else {
    colorBg = '#ccff99';
  }
 
  return (
    <SchedulerSlot
      {...props}
      style={{
        ...props.style,
        backgroundColor: colorBg,
      }}
    />
  );
};

But my main thing is not about this, I would like to somewhat give each slot a way to have its own prop to uniquely identify itself.

 

Thanks and appreciated.

Konstantin Dikov
Telerik team
 answered on 30 Nov 2023
1 answer
71 views

Hello Telerik, 

Is there any way to make child elements load on demand only in expand event, and control the expand status depending on data?

Filip
Telerik team
 answered on 30 Nov 2023
0 answers
118 views

Hello KendoReact Team,

is there an example that shows how to fully customise a numeric filter cell? I have the case that I need a filter cell for integers and one for decimals. The creation of the component is done, but I can't find an example that also implies the filter operator. The following questions arise from the problem.

1. Where can I view all the CSS classes of KendoReact that I can use for component styling? E.g. `k-icon k-i-filter-clear k-buttonicon` With this class I can style a clear button, including automatic assignment of the icon.

2. Which element is necessary to display the selection list of the filter operator?

3. Is it possible to implement the filter element in the standard display?

 

Thank you for the help

Screen capture

 

Code

import { NumericTextBox, NumericTextBoxChangeEvent } from "@progress/kendo-react-inputs";
import { GridFilterCellProps } from "@progress/kendo-react-grid";
import { Button } from "@progress/kendo-react-buttons";
import React, { useState } from "react";
import { DropDownList } from "@progress/kendo-react-dropdowns/dist/npm/DropDownList/DropDownList";
import { DropDownListChangeEvent } from "@progress/kendo-react-dropdowns";

type CustomNumericFilterCellProps = {
  gridFilterCellProps: GridFilterCellProps;
  format: string;
};

type NumericFilterOperatorType = {
  text: string;
  operator: string;
};

const numericFilterOperators: NumericFilterOperatorType[] = [
  { text: "Is equal to", operator: "eq" },
  { text: "Is not equal to", operator: "neq" },
  { text: "Is greater than or equal", operator: "gte" },
  { text: "Is greater than", operator: "gt" },
  { text: "Is less than or equal", operator: "lte" },
  { text: "Is less than", operator: "lt" },
  { text: "Is null", operator: "isnull" },
  { text: "Is not null", operator: "isnotnull" },
];

export const CustomNumericFilterCell = ({
  gridFilterCellProps,
  format,
}: CustomNumericFilterCellProps) => {
  const { onChange: filterCellPropsOnChange } = gridFilterCellProps;

  const [filterCellValue, setFilterCellValue] = useState<number | null>(null);
  const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
  const [selectedOperator, setSelectedOperator] = useState<NumericFilterOperatorType>(
    numericFilterOperators[0]
  );

  const numericTextBoxOnChange = (event: NumericTextBoxChangeEvent) => {
    const { value: filterValue } = event.target;
    setFilterCellValue(filterValue);
    setIsFilterActive(true);

    filterCellPropsOnChange({
      value: filterValue,
      operator: filterValue ? selectedOperator.operator : "",
      syntheticEvent: event.syntheticEvent,
    });
  };

  const onButtonClearClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    event.preventDefault();
    setFilterCellValue(null);
    setIsFilterActive(false);
    setSelectedOperator(numericFilterOperators[0]);

    filterCellPropsOnChange({
      value: "",
      operator: "",
      syntheticEvent: event,
    });
  };

  const dropdownlistOnChange = (event: DropDownListChangeEvent) => {
    const operator = event.value as NumericFilterOperatorType;
    setSelectedOperator(operator);
  };

  return (
    <div className="k-filtercell">
      <NumericTextBox onChange={numericTextBoxOnChange} format={format} value={filterCellValue} />

      <DropDownList
        data={numericFilterOperators}
        textField="text"
        dataItemKey="operator"
        onChange={dropdownlistOnChange}
        value={numericFilterOperators.find((item) => item.operator === selectedOperator.operator)}
        className="k-button k-filtercell-clear"
        popupSettings={{ width: "180px" }}
      />

      <Button title="Clear" onClick={onButtonClearClick}>
        <span
          className={`k-icon k-i-filter-clear k-button-icon ${
            !isFilterActive ? "k-disabled" : "k-clear-button-visible"
          }`}
        />
      </Button>
    </div>
  );
};

 

Christian
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 27 Nov 2023
1 answer
255 views

I've been working with the UI for React library and, specifically, the Dropdown component. Unfortunately, I've encountered an issue where the dropdown is not functioning as expected. When I attempt to select an option, the dropdown doesn't respond, and the selected value isn't reflected. I've reviewed the documentation and examples, but I couldn't find a solution to my specific problem. I've also checked my implementation against best practices, but the issue persists.

If anyone in the community has faced a similar problem or has insights into troubleshooting the React Dropdown component, I would greatly appreciate your assistance.

Konstantin Dikov
Telerik team
 answered on 24 Nov 2023
1 answer
189 views
I have six columns in the grid. I have to perform incell edit  in the grid.  when i click on each cell, i want to display a custom dropdown in 2 columns & custom check boxes in 2 columns & text boxes in 2 columns.  I tried this example,  https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/ . but the problem i am facing is if i click on any cell, all the cells in the row is getting enabled.  Kindly help me.
Konstantin Dikov
Telerik team
 answered on 23 Nov 2023
2 answers
1.6K+ views

Hi,

How to responsive columns kendo grid react view on mobile.

same : https://demos.telerik.com/kendo-ui/grid/responsive-columns

Thanks for any help.

Hiba
Top achievements
Rank 1
Iron
 answered on 22 Nov 2023
1 answer
1.6K+ views
It is possible to repeat a header and footer for every page in a React PDF Generator.
Vessy
Telerik team
 answered on 22 Nov 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?