Telerik Forums
KendoReact Forum
1 answer
15 views

I have kendoreact grid. I have total 8 columns. out of 8, 4 columns are locked. Currently horizontal scroll bar is displaying for entire grid. But i want to show the scroll bar only for un-locked columns. Kindly help.

 

requirement: 

Konstantin Dikov
Telerik team
 answered on 15 Mar 2024
0 answers
18 views

I am having trouble navigating the grid with a screen reader using table navigation commmands. I think the problem might be my custom cells. Is there anything else that needs returned bessides tds? Here is an example of my grid.

```

<Grid data={transactions}>
        <Column field="name" title="Name" />
        <Column field="amount" title="Amount" format="{0:c2}" />
        <Column
          field="date"
          title="Date"
          cell={(props: GridCellProps) => (
            <td>{new Date(props.dataItem["date"]).toDateString()}</td>
          )}
        />
        <Column field="description" title="Description" />
        <Column
          title="Actions"
          cell={(props: GridCellProps) => (
            <td>
              <button
                onClick={() => {
                  setShowEditTransaction(true);
                  setEditTransaction(props.dataItem);
                }}
              >
                Edit
              </button>
              &nbsp;
              <button
                onClick={() => {
                  setShowDeleteTransaction(true);
                  setTransactionToBeDeleted(props.dataItem);
                }}
              >
                Delete
              </button>
            </td>
          )}
        />
     

</Grid>

```

Thanks in advance.

Chris
Top achievements
Rank 1
 asked on 10 Mar 2024
1 answer
25 views

I have a kendo react grid. I am doing in-cell editing.  I have option to upload a file & the file might contain wrong data. when i do the upload i have to show the error highlight on each cell. i have done the upload part & showing the new row on the grid. I am facing issue while highlighting the cell with red color. i have already added custom cell for each columns. Please help

Filip
Telerik team
 answered on 06 Mar 2024
1 answer
38 views

    Seeing this bug locally, and was able to reproduce it in CodeSandbox:

    1. Open this demo in CodeSandbox https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/#toc-getting-started (original sandbox link: https://codesandbox.io/p/sandbox/proud-snow-z89k2q?)
    2. Ensure Dependencies includes React 18
    3. Make these changes to the bottom of main.jsx:
    • Comment out this line:

    ReactDOM.render(<App />, document.querySelector('my-app'));

    • Add these three lines in place of the above one:

    const container = document.querySelector('my-app');
    const root = createRoot(container); // createRoot(container!) if you use TypeScript
    root.render(<App />);

    A finished Sandbox in case it saves you some time -- https://stackblitz.com/edit/react-epnjnd?file=app%2Fmain.jsx

     

    • Notice that the first sandbox on page load gives the React 17/18 react-dom.render() issue. In contrast, the finished sandbox doesn't give the React 17/18 issue. This behavior is to be expected.
    • Click on "Export PDF" button. You now get the React 17/18 error on both sandboxes. You'd expect the error not to show up on the finished sandbox, as the parent code no longer utilizes the "old way of rendering React".
    Wissam
    Telerik team
     answered on 06 Mar 2024
    1 answer
    38 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
    1 answer
    51 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
    16 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
    35 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
    27 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
    1 answer
    24 views

    i have following setup.

    parent component holds state information about data and the prop is passed to child ckmponent condiitionally based on data availalbility.

     

    child component contains nested react grid as part of detail property. On particular event from nested grid which is part of detail i am updating a setter function on parent component and expect the grid to rerender with new data . Everything works fine except the new data is not rendered in nested grid automatically.

    i have to collapse and expand again to view the updated changes in nested grid ..

    grid version 5.19

    can anyone give some pointers or share working example of such scenario

     

    Konstantin Dikov
    Telerik team
     answered on 19 Feb 2024
    Narrow your results
    Selected tags
    Tags
    +? more
    Top users last month
    Mark
    Top achievements
    Rank 1
    Yurii
    Top achievements
    Rank 1
    Leland
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    Hon
    Top achievements
    Rank 1
    Iron
    Deltaohm
    Top achievements
    Rank 3
    Bronze
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Mark
    Top achievements
    Rank 1
    Yurii
    Top achievements
    Rank 1
    Leland
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    Hon
    Top achievements
    Rank 1
    Iron
    Deltaohm
    Top achievements
    Rank 3
    Bronze
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?