Questions on KendoReact Forum

3 answers

705 views

[Solved] Form initialvalues Do Not Work with Switch

When setting the initialValues of the Form component, it seems to work for everything I've used so far, except for a Switch. If I use a CheckBox instead, it seems to work fine.

I've created a StackBlitz using snippets from your own docs: https://stackblitz.com/edit/react-s8ugrr-c3bw3k?file=app/main.jsx

If you change FormSwitch to FormCheckbox on line 117, you can see what I mean.

I'm setting the initialValues object to be in the following format:

{ mySwitchControlName: true }

General Discussions

answered on 07 Jan 2021

1 answer

1.1K+ views

Any Way to Programatically Invoke Form Validation

After two days of trying to get the Form component to work for my needs, I've hit a pretty major roadblock for our product.

Use Case: Admin creates a template with dynamic fields. End user consumes the template, but has multiple instances of it in a single page. End user shouldn't need to go thru each instance of the template. They should be able to click "Submit" and all template instances are validated. First invalid instance is displayed.

In Kendo UI, this was easy. You iterate all the <form> elements and run .validate() on it.

var forms = $("form").submit(function (e) {

e.preventDefault();

}).kendoValidator();

$(".btn-primary").click(function () {

var firstInvalidForm = null;

tabPaneForms.each(function () {

// Iterate all the tabs and validate the input

var that = $(this);

if (!that.data("kendoValidator").validate() && !firstInvalidForm) {

firstInvalidForm = that;

}

});

if (firstInvalidForm) {

// Find the first invalid field and display the tab

} else {

// Serialize all the data

var form = $("#frmData");

serializeFormData(form);

// POST the data

form.submit();

}

});

Now, I realize KendoReact is NOT Kendo UI, and that React is a totally different thought process than good ol' jQuery. However, I need something similar.

The problem I keep running into is that everything that I need is in FormRenderProps. Your Form control expects you to hit a Submit button inside of the Form's render function. Originally, I didn't want this, but I was able to wrap my entire UX in the form to make it work (not too pleased that I had to, though). So when the Submit button is clicked, it uses formRenderProps.onSubmit, which does some blackbox magic and raises the Form's onSubmitClick/onSubmit events. Things were going fine until I realized I can't do this purely linearly.

I've forked your Multi-Step Form example and quickly tweaked it to be similar to my team's needs. We're using a Stepper to mimic the tabs that we use (though the actual UX control we use is more similar to your TabStrip): https://stackblitz.com/edit/react-vqk7ya?file=app/data.jsx

The idea is that the end user should be able to either click "Submit" and have the validation code run for each Stepper step/TabStripTab or they can jump around as they wish by clicking the actual Stepper step/TabStripTab. For our needs, validation only needs to occur on Submit (but each step must be validated on Submit click).

General Discussions

answered on 06 Jan 2021

7 answers

314 views

Styled Components support?

Hello, are there any plans or maybe a way, to use styled components instead of the huge css / scss files, to style/theme the KendoUI Components?

General Discussions

answered on 05 Jan 2021

6 answers

185 views

SignalR , customize TimeLineView , Customize modal from scheduler , hierarchical grouping Grouping

Hello!

1. Is there a way to customize TimeLineView to show week days (Monday , Tuesday ...) because I need that form that contains day and time intervals on upper bar.

2. Can we customize the modal to show my dropdowns / buttons from the scheduler?

3. I need to group multiple data but i don t want to repeat that categories. For example I will have a list of multiple years (I, II , III) that contains multiple specializations but I don t want the secound year (II) to repeat the same specializations. I want those years to have their own specializations.

4. Can we use KendoReact with SignalR?

General Discussions

answered on 05 Jan 2021

4 answers

508 views

Implement table of contents in PDF Processing component

Hi,

I have to print the component that has simple table of contents. You can see the example on StackBlitz.

When PDF is generated links do not lead to corresponding sections inside PDF, they lead to external links.

What would be preferred solution to fix this so that links lead to PDF pages/sections?

Thanks

General Discussions

answered on 30 Dec 2020

2 answers

200 views

Grid/GridDetailRow functional example

Examples that I see are using class components.. is there an example that uses functional components? Any simple example will do.

https://www.telerik.com/kendo-react-ui/components/grid/rows/hierarchy/

General Discussions

answered on 16 Dec 2020

1 answer

484 views

Custom Read only / editable grid cell

Hi,

I have a custom cell where I can have 2 states (read only and editable). The problem is that GridCellProps does not contain any information about column edit mode. Example https://stackblitz.com/edit/react-qzapj7?file=app/main.jsx

<Column

field="Discontinued"

title="Discontinued"

cell={DropDownCell}

editable={false} // no access to "editable" from DropDownCell

/>

and something like this

<Column

field="Discontinued"

title="Discontinued"

cell={editable? DropDownCellEdit : DropDownCellReadOnly }

/>

or

<Column field="Discontinued" title="Discontinued" cell={(props) => <DropDownCell {...props} editable={editable}/> } />

is not possible in my case.

Any plans to add this information to GridCellProps ?

General Discussions

answered on 15 Dec 2020

5 answers

369 views

MultiSelect Grouping

In the MultiSelect component in Kendo.Mvc, we have the option of specifying a grouping for the data. Is there a similar option in the React MultiSelect component that I missed?

Thank you,

General Discussions

answered on 14 Dec 2020

12 answers

3.3K+ views

How to test the ComboBox using react-testing-library

Hi

I am struggeling writing a test controlling the KendoReact ComboBox using react-testing-library. I guess I am not the first trying to achieve that. I am just trying to select the combobox and change the selected value. How can I do that?

Regards,

Christian

General Discussions

answered on 11 Dec 2020

1 answer

259 views

Grid: Locked Columns - Extra Space

I've looked through the forums and it seems this is the expected behavior, but is there a way to have the grid expand to fill the space when columns are locked?

Also if we have the first two columns locked is there a way to prevent reordered columns to be placed in between them or before them?

Thanks for your help and direction in the past!

General Discussions