Hi Team, 

In the ListView widget one can customize the item rendered, and alternate the styles based on the item index. The index is not exposed for the ListBox Item. Was this by design, if so Why? And how do I alternate styles for ListBox items then?

Thanks,
Grant

PS. "ListBox" is not accepted as a tag for this question

I currently have a donut chart with Value 0. The legend is showing up as normal but the chart is not being displayed. 

Is there a way to display the chart as greyed out with 0 as series value ?

const standardChartData: ChartData[] = [
  {
    label: 'Legend 1',
    value: 0
  },
  {
    label: 'Legend 2',
    value: 0
  },
  {
    label: 'Legend 3',
    value: 1 

}
];

 <ChartSeries>      

                <ChartSeriesItem

                  type="donut"
                  data={data}                  
                  categoryField="label"
                  autoFit={true}
                  field="value"
                >
                  <ChartSeriesItemTooltip
                    visible={true}
                    render={renderTooltip}
                  ></ChartSeriesItemTooltip>
                  <ChartSeriesLabels
                    color={theme.palette.common.black}
                    background="none"
                    font={chartSeriesFont}
                  />
                </ChartSeriesItem>
              </ChartSeries>

Hello,

I am trying to sort the date with sort feature inside the grid. But looks like it's not sorting for me based on the time also it's taking as a string.

If you let me how to perform sort on date column then that would be great!

I have added the screenshot and code snippet for the reference

const generateDate = () => {
  const currDate = new Date();
  const formatDateUS = currDate.toLocaleDateString("en-US");
  console.log(formatDateUS);
  return formatDateUS;
};

Hello,

I need to apply Search Bar with Filter for my Kendo React Grid Component. Kindly let me know if you have any reference/example for it.

I searched but I didn't get in kendo react!

I need very similar to this. 

Here is the link: https://dojo.telerik.com/ErISoxIz

Best,

Sachin.

Is this possible? I only want to use the PivotGrid to display information without any need for aggregation. I've gotten the example grid to look mostly how I want, but the total column and row are impossible to remove without breaking the compiler: https://codesandbox.io/s/sharp-breeze-05feiz?file=/app/main.jsx

Thank you!

Hi Team, 
 We are facing issue in Kendo React PDF Export in Safari Browser. When we download the PDF from that browser some text content in the pdf are overlapping completely one on another. I can see this issue also in the GitHub Kendo UI Core issues. https://github.com/telerik/kendo-ui-core/issues/6240. There is it mentioned to over ride the node_modules file separately and manually. Can we have some fix for this bug or any other way around to fix this particular issue on our side. 


I tried in my local by modifying the Node_modules file directly by following the above discussion and it is working fine after that. The modification is like below. 

under node modules/@progress/kendo-drawing/dist/es/html/core.js

removing the specific If condition block of `if(microsoft || browser.chrome) {`. After reloading it is working fine.

Would be very helpful if you provide better solution for this issue. 

Thanks, 

Srivathsa Kavirayuni.

I've followed the example here that adds the "Add Task" button to the Gantt, by setting the "toolbar={{ addTaskButton: true }}" property.

How do I go about renaming the text in this button from "Add Task" to "Add Action"?

I am searching for a way to extract Scheduler views into separate components. Instead of:

<Scheduler>
    <DayView />
</Scheduler>

I want to be able to do:

<Scheduler>
    <CustomDayView props={<props>} /> // returns `DayView` as top-most element under the hood
</Scheduler>

I was working on sort feature exactly similar to the link below, but when I click on the sort on the grid row for the 3rd time(default sort), it's not sorting as well as it won't show the up or down arrow. Is that's how the sort is implemented? I don't see sorted either in the example for default productName(code sandbox  link).

What if I need only two time feature that is default "asc" and "des" ONLY?

Kindly let me know what's going on.

As you see in the screenshot I am not able to get "2 Test" at the 3rd time of sort

const initialSort = [
  {
    field: "displayname",
    dir: "asc",
  },
];

const CustomerAccountPage = () => {
  // for sorting
  const [sort, setSort] = useState(initialSort);

  // console.log(data)
  return (
    <>
      <NewCustomerForm updateData={updateData} />
      {data && (
        <div>
          <div className="font-bold pt-6 pl-20">
            <h4>Accounts</h4>
          </div>
          <div className="pt-4 pl-20">
            <Grid
              style={{
                height: "600px",
                border: 0
              }}
              data={orderBy(data?.getAccounts ?? [], sort)}
              sortable={true}
              sort={sort}
              onSortChange={(e) => {
                setSort(e.sort);
              }}
            >
              <GridColumn
                field="displayname"
                title="Customer"
                width="250px"
                // cell={MyEditCommandCell}
              />
              <GridColumn
                field="customerId"
                title="Customer ID"
                width="250px"
              />
              <GridColumn
                field="createdAt"
                title="Date Created"
                width="200px"
              />
              <GridColumn field="region" title="Country/Region" width="350px" />
              <GridColumn field="apps" title="Apps" width="200px" />
              <GridColumn field="vpn" title="VPN" width="200px" />
              <GridColumn
                title="Action"
                width="100px"
                cell={MyEditCommandCell}
              />
            </Grid>
            {openForm && (
              <EditCustomerAccount
                cancelEdit={handleCancelEdit}
                onSubmit={handleSubmit}
                item={editItem}
                visible={openForm}
              />
            )}
          </div>
        </div>
      )}
    </>
  );
};

export default CustomerAccountPage;