Hi!

I'm brand new to this framework and learning a lot so apologies if this is a silly question.

I have created a grid - it has a text column and a chip column that represents the status of the record. I implemented a context menu for the grid rows but it is not triggered on the chip column...just on the text column. How can I fix this?

Here is my code:

 <Grid
        className="custom-grid"
        data={people.slice(page.skip, page.take + page.skip)}
        skip={page.skip}
        take={page.take}
        total={people.length}
        scrollable="none"
        pageable={{
          buttonCount: 3,
          responsive: false,
          pageSizeValue: pageSizeValue,
        }}
        onPageChange={pageChange}
        onContextMenu={handleContextMenu}
      >
        <GridColumn field="PersonName" title="Full Name" />
        <GridColumn
          field="Status"
          title="Status"
          cell={(props) => (
            <ChipCell
              {...props}
              text={props.dataItem['Status']}
              className={props.dataItem['Color']}
            />
          )}
          width="12.5rem"
        />
      </Grid>
      <ContextMenu
        className="custom-context-menu"
        show={show}
        offset={offset.current}
        // onSelect={handleOnSelect}
        onClose={handleCloseMenu}
      >
        <MenuItem text="Option 1" />
        <MenuItem text="Option 2" />
      </ContextMenu>
    </div>

code : Q1u7xf (forked) - StackBlitz

you can see the video here.

https://www.loom.com/share/5ffbe26f35314f2882ec8285f523a067?sid=07a9286c-6e41-46aa-9e71-a64abc1d2558

Kendo UI for jQuery TileLayout Documentation - TileLayout reordering - Kendo UI for jQuery (telerik.com)

So, is it possible to rearrange tiles using just the header portion in ReactJS?

On the Scheduler, we have three requirements that we need to implement on the first row:

• We need the first row (Open Shift) to be "sticky" and to stay in view at the top of the Scheduler as we scroll
• We need the SchedulerItems within the sticky row to remain inside the sticky row as we scroll
• We need to be able to drag SchedulerItems from the sticky row into different lower rows

We got close to implementing these features with the WeekView, but our rows need to correspond to employees and not hours, and we add the employee data as resources.  Every time we add resources to the Scheduler with the WeekView it adds them as an additional row column instead of replacing the hours column. We also tried creating our own custom slot to have the SchedulerItems remain sticky when scrolling, but it still wouldn't remain in the sticky row.

So my specific questions are: 1) Can the three requirements be implemented in the Scheduler? 2) Is using resources the correct way to add the employee column for the rows? If not, what is the correct approach?

Hey team, so, I suspect there is something perhaps wrong with the scss files or the css files after I run sass to compile it. I have been trying a few different material related themes that come out of the box (not tinkering). Just to list a few:

• material-lime.scss
• material-lime-dark.scss
• material-sky.scss

I haven't tried the others yet. But one of them seems fine, material-nova.scss appears to be okay after running the sass command. My point being, when I tried to compare my own app and the examples on the website, it always looks different. Especially for the selected RadioButtons.

Also, just a separate but important question. I have been experimenting and trying different approaches to importing the css files after I did a compilation. For example:

sass material-lime.scss material-lime.css

And then after that I would import material-lime.css to my App.js file.

But when the application is doing a hot reload, the changes aren't reflected on the web page. Separately, I have experimented with import the css file in the component's index.jsx file. Sometimes it works, sometimes it doesn't. So I'm really curious as to why it's like this.

Is there a proper method to importing the themes/styles and then seeing the changes reflected on the web page after running npm start?

What is your recommendation?

P.S. At this present point, I clearly haven't tested every single other UI components from the library, so I won't know if there are others that are affected as well. So far, I've only discovered the issue with the RadioButton and RadioGroup components.

I am using Kendo React for Griding and using only for development and for learning and testing not for the commercial purpose.

Is there a way to Achieve all attribute,functionlity without getting license key (with out water Mark).

Remember This is only for testing,Learning, Development not for commercail purpose

Hi,

Is there a way to get these paging controls when 

If I set scrollable=none, I get these paging controls

"I'm utilizing a Kendo form featuring checkboxes. I've integrated a feature wherein selecting the 'Select All' checkbox prompts the other checkboxes within the view, update, or create sections to be set to a true value. How can I effectively implement this functionality within the Kendo form?

Hi,

I have React Kendo Datagrid, in inline editing numeric textbox loses focus after key press. 

I debugged it and found cause of the problem is itemChange function.

Actually I followed https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/ document.

How to solve it? I attached whole page.

const itemChange = (event: GridItemChangeEvent) => {

        const field = event.field || "";

        const newData = result.data.map((item) => {

            return item.id === event.dataItem.id
                ? { ...item, [field]: event.value }
                : item
        });
        const dataResult = {
            data: newData,
            total: newData.length
        };
        setResult(dataResult);

    };

<Grid
                                style={{ width: 985 }}
                                className="gridTable"
                                filterable={false}
                                sortable={false}
                                pageable={false}
                                {...dataState}
                                data={result}
                                rowRender={rowRender}
                                onItemChange={itemChange}
                                editField={editField}
                                onDataStateChange={dataStateChange}
                                resizable={true}
                                size='small'
                                selectable={{
                                    enabled: true,
                                    mode: 'multiple'
                                }}
                                dataItemKey={dataItemKey}
                                selectedField={selectedField}
                            >
                                <GridToolbar className='ms-auto'>
                                    <div>
                                        <button
                                            title="Add new"
                                            onClick={addNew}
                                            style={{ border: "none", padding: "none", background: "none" }}
                                        >
                                            <i className="bi bi-file-plus" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i>
                                        </button>
                                    </div>
                                </GridToolbar>
                                <Column field="attendeeCompanyId" cell={DropDownCellAttendeeCompanies} title="Katılımcı Şirketi" width={300} />
                                <Column field="distributionCompanyId" cell={DropDownCellDistributionCompanies} title="Dağıtım Şirketi" width={300} />
                                <Column field="ratio" editor="numeric" title="Oran" width={150} format='%{0:#.##}' />
                                <Column field="attendeeCount" editable={false} title="Katılımcı Sayısı" width={120} />
                                <Column cell={CommandCell} width="100px" />
                            </Grid>

Thanks