Questions on KendoReact Forum

1 answer

65 views

Hi,

Do you have any example or advice how we could achieve the 2 scenarios:

1) We put custom filters in the command bar of the grid - one dropdown with categories, one text box with product name search - custom filters, not column filters

We want to make them prepopulated with initial state and grid already filtered when we land on the page - e.g. url is ?categoryId=5&product=MY PRODUCT

And when the grid opens, already in dropdown with Categories a category with id 5 is preselected, and in the textbox already text for filtering MY PRODUCT is entered, and both values are already used as initial query values with the data shown in the grid

2) Also an external link behavior...we have an inline editable grid which has an ID column

And we call the page with something like ?Id=23&mode=edit

Result is that the row with ID = 23 is already in edit model (cells changed to inputs and state of row to edit) for that row with ID 23

We did it in the past with JQuery and ASP.NET with your grids, but would now like to do these 2 scenarios with your KendoReact Grid.

Can these 2 scenarios be done?

Thnx!

Sanja

Grid

answered on 14 Jun 2023

0 answers

160 views

Export Grid to Excel throws Error on Conditional Tools

Ok I actually started asking this question but I think I figured it out in the process of trying to get an example. However, still posting here as I think it could help someone, plus the behavior seems a bit like a bug to me.

What I was trying to do is create a grid with a toolbar with various tools. The list of available tools changes based on if the user is an admin or not (some tools are hidden for non-admins). The basic pseudo-code I'm using for this is as follows:

<Grid ...other options>
    <GridToolbar>
        <Button ... />
        { isAdmin && <Button ... /> }
    </GridToolbar>
    { ... columns }
</Grid>

Basically, making the second button conditional on a variable (in this case a props bool variable that is passed to the component). This works just fine on the page and it renders properly based on that variable. However, when you export to Excel you get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'children')
    at ExcelExport._this.extractChild (ExcelExport.js:55:1)
    at ExcelExport.js:47:1
    at Array.map (<anonymous>)
    at ExcelExport._this.extractColumns (ExcelExport.js:45:1)
    at ExcelExport._this.extractChild (ExcelExport.js:54:1)
    at ExcelExport.js:47:1
    at Array.map (<anonymous>)
    at ExcelExport._this.extractColumns (ExcelExport.js:45:1)
    at ExcelExport.workbookOptions (ExcelExport.js:138:1)
    at ExcelExport.toDataURL (ExcelExport.js:119:1)

The toolbar shouldn't have anything to do with the Excel export so I would consider this a bug. The workaround I have found is to return an empty div if the tool should not show up. Like this:

<Grid ...other options>
    <GridToolbar>
        <Button ... />
        { isAdmin ? <Button ... /> : <div /> }
    </GridToolbar>
    { ... columns }
</Grid>

Doesn't seem like this should be necessary but it does work...

Excel Export

Grid

asked on 12 Jun 2023

1 answer

69 views

Postback happening everytime up and down arrow keys are used for scrolling through dropdown.

When scrolling through a dropdown using keyboard arrows, for every keydown or up a postback is happening and before the postback returns a response , the state of the dropdown is getting set. How can I prevent the postback for every keyup or keydown. My scenario is to revert the newly selected value to the old value whenever user scrolls through the dropdown using arrow keys.

ComboBox

answered on 12 Jun 2023

1 answer

63 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

166 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

51 views

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

94 views

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

223 views

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

60 views

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.0K+ views

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