Telerik Forums
KendoReact Forum
1 answer
119 views


Hi,

I have questions as I'm trying to format the value of the charts and its labels.

I used this but not working on my end. Can you check what am I missing on this.

1.) Convert to Dollar amount and round to millions also to lessen space and show properly.

<ChartSeries> {series.map((item, idx) => <ChartSeriesItem key={idx} type="column" tooltip={{visible: true}} data={item.data} name={item.name} format="c0"> <ChartSeriesLabels format="c0"/> </ChartSeriesItem> )} </ChartSeries>

 

2. I'm trying to round it to the Millions and used FormatLongNumber function where should I call/put this?


    function FormatLongNumber(value) {
            if (value == 0) {
                return 0;
            }
            else {
                // for testing
                //value = Math.floor(Math.random()*1001);

                // hundreds
                if (value <= 999) {
                    return value;
                }
                // thousands
                else if (value >= 1000 && value <= 999999) {
                    return (value / 1000) + 'K';
                }
                // millions
                else if (value >= 1000000 && value <= 999999999) {
                    return (value / 1000000) + 'M';
                }
                // billions
                else if (value >= 1000000000 && value <= 999999999999) {
                    return (value / 1000000000) + 'B';
                }
                else
                    return value;
            }
    }

3.) How to convert this to MMM/YYYY format?

here is the data I'm passing

[
    "1/24/2022",
    "2/8/2022",
    "2/21/2022",
    "4/13/2022",
    "5/5/2022",
    "5/17/2022",
    "6/8/2022",
    "6/14/2022",
    "6/22/2022",
    "6/24/2022",
    "6/27/2022",
    "7/27/2022",
    "8/1/2022",
    "8/12/2022",
    "9/28/2022",
    "9/30/2022",
    "10/12/2022",
    "12/13/2022",
    "12/16/2022",
    "12/19/2022",
    "12/30/2022",
    "1/24/2023",
    "1/26/2023",
    "1/27/2023"
]

I'm attaching my html file for full reference. Thank you in advance!

 

 


Filip
Telerik team
 answered on 01 Feb 2023
1 answer
181 views

Hi!

We are trying to customize the scheduler form editor, but the field is not showing up. Any ideas why? Screenshots of the SchedulerForm's editor and what we see in the UI below:

 

What we see: (text area input doesn't show up):
*note that we have tried other field types (e.g. dropdown and datepicker) with similar results

 

Thank you!

Konstantin Dikov
Telerik team
 answered on 31 Jan 2023
1 answer
92 views

https://stackblitz.com/edit/react-ucebku-vmycow?file=app%2Fmain.jsx from the comments in this thread: https://www.telerik.com/forums/column-menu-doesn-t-work-in-custom-headers

The actual column menu for the "test" column (utilizing a custom headerCell) doesn't work.

Additionally, and this may be because I'm behind by a few versions, React doesn't like the `props={....props}` on `line 23`. However, despite it not working on my end locally, the demo is working with this but still not working overall.

Konstantin Dikov
Telerik team
 answered on 27 Jan 2023
1 answer
100 views

Similar to the Grid's `expanded` prop, do the TreeList GridColumnMenu components have the expanded feature? It saves my users one extra click, so it's a favorite! I was unable to make it work by doing this:

`<ColumnMenuTextColumn expanded={true}/>`

Filip
Telerik team
 answered on 27 Jan 2023
1 answer
99 views

Similar to the Grid's GridColumnMenuFilter.active() method, is there either a method or an example for the TreeList to accomplish styling the ColumnMenu icon / header cell? I think I could build my own simple check for this, but wanted to see if there's a utility function already created.

Thank you!

Filip
Telerik team
 answered on 27 Jan 2023
1 answer
204 views

Hi,

I am using the React Data Grid component and have a grid column with a custom cell renderer. I want to be able to filter on this column using the GridColumnMenuCheckboxFilter. However, the filter only shows an option of 'undefined' and not the values rendered by the custom cell component (see image below). The rendered values are not coming from a direct property of the grid data object, so I was wondering if there is a possibility to define a valueGetter that outputs the actual rendered value, which can then be picked up by the filter component?

 

Thank you

Filip
Telerik team
 answered on 26 Jan 2023
1 answer
154 views
<ChartSubtitle
text='some text'
color='black'
padding={0}
margin={10}
align='right'

/>

 

here margin gives for all direction. how can i give margin or padding on right side only ?

 

Hetali
Telerik team
 answered on 25 Jan 2023
1 answer
468 views
Hi
Grid kendo react - How to change column menu icon (The three points) ?
 

Filip
Telerik team
 answered on 25 Jan 2023
0 answers
183 views

Hi I am automating a page which has Kendo components. It has a table. Regarded table is here: 

<table tabindex="-1"
       class="k-grid-table"
       role="presentation"
       style="transform: translateY(0px);">
    <colgroup role="presentation">
        <col class="k-sorted" width="340px">
        <col width="440px">
        <col width="340px">
        <col width="340px">
        <col>
    </colgroup>
    <tbody role="presentation">
        <tr class="k-master-row k-state-selected" role="row" _rowid="7ffec669-e2a1-59dc-bb11-210863485e21" style="height: 30px;">
            <td class="sc-fubCfw irPtrP k-text-left sticky-last k-grid-content-sticky undefined select-cell" style="left: 0px; right: 0px;">
                <i title="New" class="sc-fKFyDc gzkmxX dfI_G11_EntityTrackerNew"></i>
            </td>
            <td class="sc-fubCfw irPtrP   k-text-left  undefined">
            </td>
            <td class="sc-fubCfw irPtrP   k-text-left  undefined"></td>
            <td class="sc-fubCfw irPtrP   k-text-left  undefined">
            </td>
            <td colspan="1"
                class=" phantom  k-text-left   k-text-left "
                role="gridcell" aria-colindex="5" aria-selected="false" _customized="true"></td>
        </tr>
    </tbody>
</table>

But when I try to reach  first element and send some text I got this error: Coypu.MissingHtmlException: Unable to find xpath: //*[@class="sc-fubCfw irPtrP in-edit-padding k-text-left sticky-last k-grid-content-sticky undefined select-cell"]

As you seen in the error, element is different. It is normally hidden and changes when I click on it. So I tried to reach it (InnerClassElement)

string test = "Test";
     OuterClassObject.Click();
  //    Thread.Sleep(1000);
  //     InnerClassElement.SendKeys(test);
  //     OuterClassObject.SendKeys(test);

      InnerClassElement.FillInWith(test);

But I couldn't reach it. With the FillInWith() method I can see cursor is inside the table but it is not typing. And it throws Element is not reachable error. 

How can I interact with that inner element and send text to it.

My framework is SpecFlow, Selenium and C#.

Regards.

 

Alya
Top achievements
Rank 1
 asked on 20 Jan 2023
1 answer
208 views

Hello, does react scheduler component allows for a view customization?  In other words instead of dates can I add custom resource labels? Further customize Event Detail form to have my own fields and functionality behind it?

 

Thank You,

Wissam
Telerik team
 answered on 20 Jan 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?