Telerik Forums
KendoReact Forum
2 answers
80 views

Hi,  I've created a drop-down list for my react application. However, when I set the initial value, the required validator is triggering even though a selection has been made. Is there something else I need to be doing?

<Field
name={'site'}
component={FormDropDownList}
textField="title"
dataItemKey="id"
data={sites}
// label={'Select the site you are attending.'}
defaultItem={sitesReducer.nearestSite ? sitesReducer.nearestSite : {
title: 'Select...',
}}
validator={requiredValidator}
/>
Lee
Top achievements
Rank 1
Iron
 answered on 03 Mar 2024
1 answer
368 views

Hi,

The older versions of grid had three dots as the grid column header filter icon. The new versions have a different filter icon. How to use the three dots in new version (@progress/kendo-react-grid@^7.2.3)?  Please see the attached image for the three dots icon.

 

Thanks,

Jie

Wissam
Telerik team
 answered on 01 Mar 2024
1 answer
80 views

Hi Team, 

Overview:

We are using Kendo Ui react grid for showing data . We have more than 15 columns in grid with horizontal scrollbar

 

Problem :

When we are selecting last column in view of screen for sorting/filtering, Kendo Grid automatically changing the view to make that sleected column in center of screen. We are not doing anything explicit for this behaviour to occur . We need to know is this something done  by default through Kendo UI and how we can rectify this issue .

 

Konstantin Dikov
Telerik team
 answered on 27 Feb 2024
1 answer
83 views

Hi, I was just wondering if there is some type check in KendoUI that I could use to check translation files so that nothing is missed in translations?

I've tried to search forums and documentation site and I did not found any examples of that. If there is no support for this at the moment, maybe it should be added, since I am sure that many dev teams struggle with keeping the huge number of translations up to date.

Vessy
Telerik team
 answered on 26 Feb 2024
1 answer
131 views

Hi,

Is there a way to have both rowSpan and Pagination on a grid? 

My grid originally has pagination, now that I am trying to merge rows, which have the same values, within a column into a cell; other columns remain the same. I found that once I achieve that it displayed the grid briefly (enough to observed merged rows), but it crashed right away and report error on pagination. I can't remember the exact error but it has something to do with "process", "slice"...

Thank you for the support

Luu

 

Konstantin Dikov
Telerik team
 answered on 25 Feb 2024
1 answer
107 views
Hello.

We have used jQuery Kendo UI for many years. And we have many templates in Kendo UI for jQuery Templates.

Now we use more React. We have a problem with a lot of jQuery templates. Isn't there some utility, functionality in React Kendo UI that can process the given jquery template? Or some npm package that would be able to process the given template in the React environment?

Well thank you.
Konstantin Dikov
Telerik team
 answered on 23 Feb 2024
1 answer
147 views

Overview

Some components have a ::before pseudoclass with the content property set to the CSS code \200B , which is a zero-width space. However, in our project, this is coming out as ​ in the DOM.

For example, with the <Dialog /> component:

1. We render the dialog within a componet, giving it a title which comes from props

const MyComponent = (props) => {
    return (
        <Dialog title={props.title} onClose={props.onClose}>
            . . .
        </Dialog>
    )
}

2. Locally (running in our development environment) we can see the CSS come out as expected

3. After building and deploying to an environment, the "" gets replaced with ​

Additional Information

After building the project locally, our CSS (build/static/css/main,xyz.css) does not include these symbols:

We are using Craco to build our project:

// craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [require('autoprefixer')]
    }
  }
}
Konstantin Dikov
Telerik team
 answered on 22 Feb 2024
1 answer
79 views

I have couple of issues related to in-cell editing in react grid. I am using NextJs as well.

1) The problem i am facing is when i exit from the cell, the particular cell is still in edit mode. i have added an example for numeric textbox. Even though i have clicked outside the grid, the border is till highlighted & the field is in edit mode.  I am already using custom cell for different fields like( Dropdown list, checkboxes. textboxes, Numeric-text-boxes)

2) In the above numeric textbox, when i add any integer, it will display the number & the cursor will vanish immediately. I have to again click on the numeric text box to add the next  number in the same cell.

3) I have almost 300 records in the grid. I am experiencing slowness in rendering the cells when i edit different cells .

 

I have referred to this example:

https://stackblitz.com/edit/react-czmt6w-tpf8qh?file=app%2FcustomCells.jsx,app%2Fmain.jsx

 

 

Konstantin Dikov
Telerik team
 answered on 22 Feb 2024
0 answers
74 views

Hi all, I am trying out Kendo UI React Scheduler to make a custom appointment dashboard. The view I am interested in is the DayView.

I have done various tests and have some questions that I have not been able to find answers to.

  • is there a possibility to set a fixed width to the items? Via API it does not seem feasible and the workarounds I have tried do not seem to have the desired effect either (the internal algorithm assign width and positions dynamically)
  • is there a possibility of forcing a custom sorting of items starting at the same time? The only way I have found is to sort the data array however I have noticed that the scheduler still gives precedence to events that last longer than shorter ones, regardless of the sorting I have set.

Thanks in advance for your attention.

Fabio

Fabio
Top achievements
Rank 1
 asked on 21 Feb 2024
0 answers
229 views

Hello,

We are using globalization in our application and one of the requirements is showing different values in different ways in our NumericTextbox. Problem is our application is in en-US and we would like it to stay that way except for the numeric where we have multiple requirements for different locales in which all are editable. So there is no way to formatNumber(12312312, 'c2', 'de') for example and for language of the application to remain in some other language.

We would like to specify locale by passing prop and loading the cldr data before hand and format the number as we like and for it to work in view and edit mode like it works now for english, so instead of $1,234.00 we would want in some cells to be 1.234,00 €, also for percentage not to be %1.75 but 1,75% in per case basis. We tried using kendo-intl and not kendo-react-intl for formatting numbers using formatNumber and c, c2, n, n2, p, p2 but then group number separators as well as currency code or percentage symbol is deletable in edit mode.

Hope there is a solution for this and hope to hear from you soon.

Best regards

Sanja Tolo
Top achievements
Rank 1
Iron
Iron
 asked on 20 Feb 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?