Telerik Forums
KendoReact Forum
1 answer
86 views

I have a feature to add display a numeric textbox in the grid while doing in-cell editing. & it depends on a checkbox value.  If the check box in another column is  selected then only the the numeric textbox should be editable in. Kindly help me with a numeric textbox as a custom component in incell grid editing.

I tried to create a numeric textbox as custom component. But i am facing couple of issues.

1)If i add the editor as numeric then the checkbox condition is not matching.

2)if i add editor as text, the cursor in the numeric textbox is not showing if i tryto add more than 1 digit.

                                                                            <GridColumn

width='120px'
field='Max'
title='Max'
columnMenu={ColumnMenu}
headerClassName={
isColumnFiltered(Max')
? 'filter-active'
: 'filter-inactive'
}
editable
cells={{
edit: {
text: MaxRecurring,
},
}}
editor='numeric'
/>
Konstantin Dikov
Telerik team
 answered on 06 Mar 2024
2 answers
49 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
148 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
41 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
48 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
72 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
55 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
81 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
46 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
48 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?