How can I merge 2 fields in KendoForm?

1 Answer 67 Views
Form
Aeong
Top achievements
Rank 1
Iron
Aeong asked on 11 Aug 2023, 05:11 AM | edited on 11 Aug 2023, 05:11 AM

Hello Kendo practitioners!
I'm currently working on creating a complex input field.
As shown below, I want to input 3 fields in 4 columns, and I want to make the 2nd field use 2 columns.

So I tried writing code like this, but it didn't work.


            $("#baseForm").kendoForm({
                orientation: "horizontal",
                layout: "grid",
                grid: {
                    cols: 4,
                    gutter: 0
                },
                items: [
                            {
                                field: "field1",
                                label: "field1",
                            },
                            {
                                field: "field2",
                                label: "field2",
                                attributes : {colspan: 2}
                            },
                            {
                                field: "field3",
                                label: "field3",
                            },
                        ],
                buttonsTemplate:'',
                submit: function(e) {
                    e.preventDefault();
                }
            });
How can i solve this problem?
Thank you very much for your help!

1 Answer, 1 is accepted

Sort by
0
Accepted
Zornitsa
Telerik team
answered on 15 Aug 2023, 09:29 AM

Hi Aeong,

My suggestion for a solution, which could fulfill your requirements, would be using the colSpan property in the configuration of the corresponding item.

Therefore, in order to achieve the desired behavior in your scenario, the configuration of the second item would look similar to the code snippet below: 

{
     field: "field2",
     label: "field2",
     colSpan: 2 
},

Here is a Dojo example with the modified code snippet you had provided, in which you can observe the required results:

I hope that the suggested solution would be helpful for you. If you have further questions, please let me know.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Aeong
Top achievements
Rank 1
Iron
commented on 15 Aug 2023, 09:39 AM

Your answer has been very helpful. thank you!
Tags
Form
Asked by
Aeong
Top achievements
Rank 1
Iron
Answers by
Zornitsa
Telerik team
Share this question
or