Hi,

When using the grid, you can single click rows, shift click a range and ctrl click. These all work fine. I'm creating a wrapper around the grid to return the clicked rows, so this is the code I use to do this:

    const onSelectionChange = event => {
        const newSelectedState = getSelectedState({
            event,
            selectedState: selectedState,
            dataItemKey: DATA_ITEM_KEY,
        });
        const selectedRows = Object.keys(newSelectedState).map(x => data.find(d => d[DATA_ITEM_KEY].toString() === x.toString()));
        props.onSelected(selectedRows);
        setSelectedState(newSelectedState);
    };

So I loop the data keys returned from the getSelectedState method on my data collection. Great, works fine.

However, when shift selecting a range and then deselecting a single row holding control, the row still remains as selected using getSelectedState (visibly it's unclicked, but not the state object). This is not the case with shift. Shift correctly unselects the rows. I see the event returns a ctrlKey property, so I could probably add my own code around this issue - but it looks like a bug to me? I am using the newest versions of the grid and data tools (kendo-data-tools: 5.2.0 and kendo-react-grid: 5.2.0).

I'm looking for an approach to drag an image that is clipped within a rectangle that is smaller than the image size.  Essentially achieve what is shown in this example https://codepen.io/jonathan/pen/abNGbE.  

I investigated using the Draggable utility in Kendo React, trying out the StackBlitz example, but can't quite get it right.  I tried setting the HTMLDivElement as the React.useRef

const myimage = React.useRef<HTMLDivElement | null>(null);

and then returning a div component instead of the Button in the example.

return (
      <div style={{overflow:'hidden',height:'100px',width:'100px'}} ref={myimage}>
        <div style={{position:'relative'}}>
        <img
            src="https://lh4.googleusercontent.com/-8tqTFxi2ebU/Ufo4j_thf7I/AAAAAAAADFM/_ZBQctm9e8E/w270-h203-no/flower.jpg"
            style={{position:'absolute',top:0,left:0,border:0}}
        />
        </div>
      </div>
  );

How can I achieve this effect using a Kendo component?

I Need put a button to export datagrid to excel outside of datagrid component.

Not in topGridToolBar.

Any help please?

Hi,

I want to set an initial filter to my grid like in the sample (where initial filter is: ProductName contains Chef):

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-operators

But I want to use columnMenu fitlers, like the example:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter

So, I downloaded the example from the second link and changed initialState as follows:

It works fine, the grid starts filtering out the product with ID 4, but if I open the filter it is empty:

How can I right initialize the columnMenu filter??

Thank you

Hi folks,

I'm trying to use the Kendo React Drawing API to draw an Image at its' native dimensions. The Image source will be a URL and could be an image not known at code-time but instead specified at run-time.

The documentation found here shows that I first need to specify the Image dimensions before I know what they will be.

const imageRect = new geom.Rect([5, 5], [50, 50]);
const image = new Image('../assets/diego.jpg', imageRect);

My issue is that `diego.jpg` may not be 50x50 for example.

How can I use `Image` while also allowing it to be the native image dimensions?

Thanks

Hi, I am new here..

I am having trouble on how or what is the best way to render data on _HTML, can anyone help me on this problem?

this is the current code:

Report = (() => {
    let attendance = "";
    const init = async ()=> {
      _HTML.onload();
      _BIND.onload();
    };
    const _HTML = {
      onload : ()=>{
          _UI.renderReport();
      },
      renderReport: () => {
        $("$chart").kendoChart({
          ....
        series:[{
          name: "Total Persons",
          data: counts //dont know why not working
         }]
        ...,
        categoryAxis:{
         categories: parents, //dont know why not working
        }
        ...,
        });
        attendance = $("renderReport").data("kendoChart");
      };
    }
    const _BIND = {
        onload: async () => {
            const _ = _DATA;
            const {parents, counts} = await _.getParents();
            console.log(parents, counts)
            attendance.setDataSource({parents, counts})
            
        }
    }
 })

// the result of console.log(parents, counts) are

{
    "parents": [
        "Jokha Alharthi",
        "Vasdev Mohi"
    ],
    "counts": [
        1,
        2
    ]
}

is it possible if I use kendo UI's drawer but not for navigation, but a component such as chart like this design :

and make this button to expanded function ?

Hi team,

I'm using React Grid, and I wanted to know if I can add a dropdown list to certain columns header of the grid. Refer to the below example:

Here, the last 4 fields (Supp., Lead Plan, Alt Plan, LPG) have a dropdown list that can have Yes/No or some other values. If we select any value from this dropdown, all the rows only for that column will be auto-populated with the selected value. Is there a way to achieve this?

Thanks

Is it possible to use GridColumn and the footerCell prop and have the footer row export in the Excel export?

I see this example, but it's utilizing the ExcelExportColumn, which doesn't have all of the extra things I want (footerCell, custom cell, header class name, filter, etc) - is there a workaround I'm missing?

Thank you!

Hi Team,

I am using Kendo Grid React. I want to disable weekend on my Datepicker. Please let me know the property to disable weekend on my Datepicker.