Questions on KendoReact Forum

1 answer

135 views

Duplicate Problem in Inline edit Fields When Multiple Lines are Added

www.telerik.com
In inLine Edit Field when Adding new Line or create multiple lines with the add new button the input field is duplicating when editing one field. ie, You can now type on the different input and observe duplicates
But i needEvery single inputs here needs to be unique.

Editor

Grid

answered on 16 Jun 2023

1 answer

187 views

When the vertical scroll bar appears on the page, the horizontal scroll bar of Grid cannot be scrolled

Hi,

I have a problem when I use k-grid: When the vertical scroll bar appears on the page, the horizontal scroll bar of k-grid cannot be scrolled with the mouse, but can be scrolled with the touch pad

you can try in React (forked) - StackBlitz

Since my page also needs to display other information, if the height is set for the k-grid, the visible area of the table is too small and not easy to read, what should I do to solve the issue.

Thanks a lot for each help.

Grid

Styling

answered on 16 Jun 2023

1 answer

924 views

[Solved] Changing the "Drop files here to upload" text in the Upload component

Is this possible without CSS? I couldn't find any existing threads / KB articles / UploadProps that help me accomplish this.

Upload

answered on 14 Jun 2023

1 answer

132 views

KendoReact Grid external link behaviors

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

312 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

184 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

125 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

295 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

117 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

282 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