Questions on KendoReact Forum

1 answer

129 views

Grid: Sticky second column slides under the first column and is transparent.

Hi KendoReact team.

I have a question about locked columns. The second column slides under the first column and is transparent for the following columns. We use the following version ^5.12.0 of the "@progress/kendo-theme-default" package.

Issue

Code snippet

return [
    <Column
      key="SelectHeader"
      field={GRID_SELECTED_FIELD}
      filterable={false}
      width="50px"
      locked
      headerSelectionValue={dataResult.data.findIndex((item) => !selectedState[item.Id]) === -1}
    />,
    columnForField<SomeType>("SomeProp", {
      title: "Title",
      width: defaultColumnWidth,
      locked: true,
      columnMenu: RelationProjectStateColumnMenu,
      cell: relationProjectStateEnumCell,
    }),

Grid

answered on 09 Jun 2023

1 answer

309 views

Implementing Cascading Dropdown Lists for Dynamic Field Enablement in a Custom Component

I have created a custom DropDownLists component, but I am facing some issues with implementing cascading DropDownLists. Specifically, I need assistance in ensuring that when the billing type is set to "cash," the fields for "BILLING_CYCLE," "CREDIT_LIMIT," "CREDIT_BALANCE," and "INTEREST" are disabled. However, when a different option is selected for the billing type, those fields should be enabled. Could you please review the provided code and provide guidance on how to achieve this functionality?

import { Field, Form } from "@progress/kendo-react-form";
import { OkDropDownList } from "@elabassistcore/elab_components";
import { filterBy } from "@progress/kendo-data-query";
import { DropDownListFilterChangeEvent } from "@progress/kendo-react-dropdowns";
import { FieldRenderProps, FieldWrapper } from "@progress/kendo-react-form";
import { Error, Hint, Label } from "@progress/kendo-react-labels";
import React, { useEffect, useRef, useState } from "react";
import {
  FIELD_BILLING_CYCLE,
  FIELD_BILLING_TYPE,
  FIELD_CREDIT_BALANCE,
  FIELD_CREDIT_LIMIT,
  LABEL_BILLING_CYCLE,
  LABEL_BILLING_TYPE,
  LABEL_CREDIT_BALANCE,
  LABEL_CREDIT_LIMIT,
  LABEL_INTEREST,
} from "@constants/common-keys";
import {
  TEXT_FIELD_BILLING_TYPE,
  TEXT_FIELD_BILLING_CYCLE,
} from "@constants/client-keys";
import { FIELD_INTEREST } from "@constants/client_master-keys";
import { NumericTextBox } from "@progress/kendo-react-inputs";
import { Button } from "@progress/kendo-react-buttons";
//use a data
const billingTypeData = [
  { id: 1, billingType: "Prepaid" },
  { id: 2, billingType: "Postpaid" },
  { id: 3, billingType: "Cash" },
];
const billingCycleData = [
  { id: 1, billingCycle: "Daily" },
  { id: 2, billingCycle: "Weekly" },
  { id: 3, billingCycle: "Monthly" },
  { id: 4, billingCycle: "Quartly" },
];
// Custom Componentes
const CustomDropDownList = (fieldRenderProps: FieldRenderProps) => {
  const {
    validationMessage,
    touched,
    label,
    id,
    valid,
    disabled,
    hint,
    value,
    modified,
    wrapperStyle,
    name,
    onChange,
    data,
    ...other
  } = fieldRenderProps;
  const [FilteredData, setFilteredData] = useState([]);
  useEffect(() => {
    setFilteredData(data);
  }, [data]);
  const editorRef = useRef(null);
  const showValidationMessage: string | false | null =
    touched && validationMessage;
  const showHint: boolean = !showValidationMessage && hint;
  const hintId: string = showHint ? `${id}_hint` : "";
  const errorId: string = showValidationMessage ? `${id}_error` : "";
  const labelId: string = label ? `${id}_label` : "";
  const onFilterChange = (event: DropDownListFilterChangeEvent) => {
    setFilteredData(filterBy(data, event?.filter));
  };
  return (
    <FieldWrapper style={wrapperStyle}>
      <Label
        className="input-labels"
        id={labelId}
        editorRef={editorRef} 
        editorId={id}
        editorValid={valid}
      >
        {label}
      </Label>
      <OkDropDownList
        ariaLabelledBy={labelId}
        ariaDescribedBy={`${hintId} ${errorId}`}
        id={id}
        disabled={disabled}
        onChange={onChange}
        value={value}
        onFilterChange={onFilterChange}
        filterable={true}
        data={FilteredData}
        {...other}
        name={name}
      />
      {showHint && <Hint id={hintId}>{hint}</Hint>}
      {showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
    </FieldWrapper>
  );
};
const FormNumericTextBox = (fieldRenderProps: FieldRenderProps) => {
  const {
    validationMessage,
    touched,
    label,
    id,
    valid,
    disabled,
    hint,
    value,
    defaultValue,
    ...others
  } = fieldRenderProps;
  const showValidationMessage: string | false | null =
    touched && validationMessage;
  const showHint: boolean = !showValidationMessage && hint;
  const hintId: string = showHint ? `${id}_hint` : "";
  const errorId: string = showValidationMessage ? `${id}_error` : "";
  return (
    <FieldWrapper>
      <Label
        className="input-labels"
        editorId={id}
        editorValid={valid}
        editorDisabled={disabled}
      >
        {label}
      </Label>
      <NumericTextBox
        ariaDescribedBy={`${hintId} ${errorId}`}
        valid={valid}
        id={id}
        disabled={disabled}
        value={value === 0 ? "" : value}
        {...others}
      />
      {showHint && <Hint id={hintId}>{hint}</Hint>}
      {showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
    </FieldWrapper>
  );
};
// Kendo Field us with Map Function
const FiedData = [
  {
    id: FIELD_BILLING_TYPE,
    name: FIELD_BILLING_TYPE,
    label: LABEL_BILLING_TYPE,
    data: billingTypeData,
    textField: TEXT_FIELD_BILLING_TYPE,
    onChange: (event: { target: { value: object[] } }) => ({
      value: event.target.value,
    }),
    component: CustomDropDownList,
  },
  {
    id: FIELD_BILLING_CYCLE,
    name: FIELD_BILLING_CYCLE,
    label: LABEL_BILLING_CYCLE,
    component: CustomDropDownList,
    onChange: (event: { target: { value: object[] } }) => ({
      value: event.target.value,
    }),
    data: billingCycleData,
    textField: TEXT_FIELD_BILLING_CYCLE,
  },
  {
    id: FIELD_CREDIT_LIMIT,
    name: FIELD_CREDIT_LIMIT,
    label: LABEL_CREDIT_LIMIT,
    component: FormNumericTextBox,
  },
  {
    id: FIELD_CREDIT_BALANCE,
    name: FIELD_CREDIT_BALANCE,
    label: LABEL_CREDIT_BALANCE,
    component: FormNumericTextBox,
  },
  {
    id: FIELD_INTEREST,
    name: FIELD_INTEREST,
    label: LABEL_INTEREST,
    component: FormNumericTextBox,
  },
];
function FormComponet() {
  const handleSubmit = (dataItem: any) => alert(JSON.stringify(dataItem));
  return (
    <Form
      initialValues={{ title: "" }}
      onSubmit={handleSubmit}
      render={(formRenderProps) => (
        <div>
          {FiedData.map((item, index: number) => (
            <div key={index} className="div-input-group">
              <Field
                id={item.id}
                name={item.name}
                label={item.label}
                component={item.component}
                textField={item.textField}
                data={item.data}
                onChange={item.onChange}
              />
            </div>
          ))}
          <Button
            className="k-button k-mt-5"
            disabled={!formRenderProps.allowSubmit}
            onClick={formRenderProps.onSubmit}
          >
            Submit
          </Button>
        </div>
      )}
    />
  );
}
export default FormComponet;

DropDownList

Form

answered on 09 Jun 2023

1 answer

124 views

[Solved] Text Wrap Category Labels

I'm trying to find a way to be able to wrap the text of a category label if it exceeds a certain character limit. For example,

"This really long category label"

would become

"This really
long category
label"

if it were limited to 15 characters per line. Is there a way to do this either with the default label or with a custom renderer?

Charts

answered on 08 Jun 2023

1 answer

290 views

[Solved] How do I create a PDF export page template that has both header and footer?

I am creating the functionality to export some data in a PDF using Kendo react pdf generator. I see that with the pageTemplate prop I can pass in a component that is inserted to each page BEFORE the output is produced, this makes it useful to create headers, however I can't find a way to create footers for each page.

PDF Processing

answered on 08 Jun 2023

1 answer

446 views

[Solved] groupId and setExpandedState: Combining Grid group expansion and detail row expansion

I have a pretty involved Grid I'm building that involves both grouping and detail rows.

The documentation uses setExpandedState with an array of collapsedIds. This sets the 'expanded' field for everything in the grouped data. It even sets the 'expanded' field for the actual grid rows.

I would like to be able to toggle the detail row and hide it, but in order to do that, I have to create a 'groupId' property for each grid row entry so that setExpandedState doesn't assign 'expanded' as true.

Is there a different way to do this? It seems odd that I would have to set a 'groupId' property each grid row's data when it is not itself a group.

Just upgraded and tested with 5.14.0, but it happened in 5.13 as well.

Grid

answered on 08 Jun 2023

1 answer

133 views

[Solved] Error to destructure useLocalization Hook

Hello guys,

I realized that it's not possible to destructure the useLocalization hook, when destructure, it causes an error. I made an example to demonstrate the problem.

const { toLanguageString } = useLocalization(); //THROW AN ERROR
const localization = useLocalization(); //NORMAL

xenodochial-dan-prqfvt - CodeSandbox

Is this actually expected or is it just a bug?

Thanks,

Gabriel.

General Discussions

answered on 08 Jun 2023

3 answers

2.3K+ views

[Solved] Form Validation with Default Values

I am using @progress/kendo-react-form with @progress/kendo-react-inputs to create a form. I am using the form to edit existing data, and to add new records as well, populated from and saved to a db server.

To get the data for existing records to display, I am using defaultValue for each input. However, when trying to validate the form, validation only registers that the form element actually has data when it has been changed through user input.

So if I open a form and change one field, other fields that had not been changed, and which still show the defaultValue value, are considered invalid.

What is the best practice way to use form validation on a form used for editing existing data?

Here is a really simple example:

https://stackblitz.com/edit/react-5phafx

General Discussions

answered on 07 Jun 2023

1 answer

254 views

MultiColumnComboBox Columns misaligned if there isn't enough data for a scrollbar

As per the heading, all the demos on the KendoReact MultiColumnComboBox have a lot of hardcoded data which results in a scrollbar being rendered in the popup. If you only have a few items, then no scrollbar is rendered and the column headers are misaligned with the data rows:

https://stackblitz.com/edit/react-gwftb5?file=app%2Fmain.tsx

Kind regards,

David

ComboBox

answered on 02 Jun 2023

1 answer

252 views

Is it possible to show a Date in a MultiColumnComboBox?

As per the question, the documentation mentions nothing about the data types you can show in MultiColumnComboBox columns. If you modify any of the examples in the component documentation to include a Date field, the component blows up when you expand the ComboBox:

https://stackblitz.com/edit/react-biiakp?file=app%2Fmain.tsx

Is this a bug, or should the documentation state that you must format all data to primitive types for use in a MultiColumnComboBox?

Kind regards,

David

ComboBox

answered on 02 Jun 2023

1 answer

267 views

Re-mounting issue in kendo react grid with template while state update

Hi Team,

I have rendered the Kendo react grid component with template in below cases.

Template declared as nested react component (child1) of grid (parent1)
Template declared as react component (child2) outside of grid (parent2)

As per the react behavior, first case will remount for each state update and second case will not remount.

In Kendo, first case is working properly as per react behavior. But for second case the Kendo component is having re-mounting issues while state update of template.

I have attached a sample for reference below.

Kindly share suggestion to avoid full remounting of template while state updates.

Regards,

SuriyaKumar

Grid

answered on 02 Jun 2023