Scrollbar in Form

[Frans]

Hi,

How can I get a vertical scrollbar in the Form component ?
I mean, the form area excl. the buttons.
I'd prefer to achieve this without having to add a css style on the page, but instead achieve this with a simple piece of (serverside) code.

In html/css I can see the following structure

  - html form
    - div formlayout
      - fieldset
      - fieldset

I would like to have a vertical scrollbar on the div formlayout I guess. Buttons shouldnt scroll, but stay visible.
In my scenario I have only 1 column of fields, but should work for any amount of columns in layout.

 

Martin

 

[Stoyan]

Hello, Frans,
Thank you for your question.

The Telerik UI set the styles of the Components internally. This means that the configuration properties of the Components apply CSS styling on initialization. Unfortunately the Form Component currently doesn't support a configuration method setting up a vertical scrollbar.

However a scrollbar can be added by customizing the styling of the Component. As you have noticed the Form exposes the .k-form-fieldset class that contains only the Form items. By selecting it with CSS you can apply the following property to enable scrolling:

    .k-form-fieldset{
      overflow-y:scroll;
    }

 

Please note that for the scroll to be available the items' combined height must be bigger than the height of the .k-form-fieldset.

I hope this is helpful. Please let me know, if you have further questions.

Regards, Author nickname Progress Telerik

[Frans]

Thanks Stoyan,

I found a acceptable working solution for this.

Though, in general, I miss some trivial functionality in your Form component.
The concept is nice, and it does work to some extent, but I miss simple things like: number of decimals for integer fields, 
and also things scrolling thing should be feasible more easily, just by setting 1 or 2 properties or so.

I also dont succeed in setting the control type explicit, like:  items.Add()
                                .Field(propInfo.Name).Editor("NumericTextBox")

This gives me a Exception.

 

best regards,

Martin

[Frans]

I want it simple, and pure serverside.

Like code below. But this also doesnt work: I still get 2 decimals instead of 0.

 

                            items.Add()
                                .Field(propInfo.Name)
                                .Label(propInfo.Label)
                                .Editor(e =>
                                {
                                    e.NumericTextBox().Decimals(0);
                                });

[Frans]

Another thing that I think should be available out of the box in the Form control is to be able to submit when user presses Enter.

Just as 1 boolean property for the Form control. This is a very trivial functionality, that you dont want to do manually with jQuery every time.

[Stoyan]

Hello Frans,

1. To set up the Form to successfully use a Model use the following syntax:

  i.Add()
                .Field(f => f.Numeric)
                .Label(l => l.Text("Numeric Text Box"))
                .Editor(e =>
                 {
                       e.NumericTextBox().Decimals(0);
                 });

The above uses this Model:

public class FormModel
    {
        public int  Numeric { get; set; }
    }
}

2. The decimals configuration property is applied to the Widget value when it is focused. Use the format property to achieve a similar result when the NumericTextBox is not focused.

e.NumericTextBox().Decimals(0).Format("0");

 

3. Unfortunately the Form Component currently doesn't support submit on keyboard Enter functionality out-of-the-box. If you'd like to see such a functionality implemented in the future, submit a Feature Request in our Feedback Portal. There we evaluate the interest in such requests based on community's votes.

Please let me know, if you have additional questions.

Regards,
Stoyan
Progress Telerik