This is a migrated thread and some comments may be shown as answers.

Simple Form Example?

1 Answer 123 Views
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 09 Sep 2018, 04:43 AM

Perhaps my Google skills are failing me, but is there an example of best practices control use inside a form? Preferably with TagHelpers. I understand that I can do whatever I want with it; but a simple starting point would be nice.

I guess what I'm asking is: For a decent looking form with built in styling, how should I structure my form and what classes should I be adding to elements? There is no <kendo-textbox /> for example, if there was one, what would it output.

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 12 Sep 2018, 03:33 PM
Hello Richard,

I would suggest you to take a look of the following Styling Demo where a sample form is created. The demo refers to ASP.Net MVC, but the code would be the same in ASP.Net Core projects. In the sample the elements are ordered, by using <li> elements. Each widget is placed in an item of the unordered list. 
You could use this approach or you could style the elements in columns for example, by using css. 

In the Forms Demo, you could find a sample output of '@Html.Kendo().TextBox()'. There is no 'kendo-textbox' tag helper, but you could take a look of the MaskedTextBox or NumericTextBox tag helpers.

Below you will find a sample form with tag-helpers created by using the approach from the styling Demo linked above:
<div>
    <ul class="fieldlist">
        <li>
            <kendo-datepicker name="monthpicker"
                              start="CalendarView.Year"
                              depth="CalendarView.Year"
                              format="MMMM yyyy"
                              value='DateTime.Parse("November 2011")'
                              style="width: 100%;"></kendo-datepicker>
        </li>
        <li>
            <kendo-numerictextbox name="custom"
                                  format="#.00 kg"
                                  value="2"></kendo-numerictextbox>
        </li>
        <li>
            <kendo-button name="Default"
                          class="k-primary">
                Default
            </kendo-button>
            <kendo-button name="Primary"
                          class="k-primary">
                Primary
            </kendo-button>
        </li>
    </ul>
</div>

<style>
    .k-widget {
        width: 100%;
    }
 
    .fieldlist {
        margin: 0 0 -2em;
        padding: 0;
    }
 
    .fieldlist li {
        list-style: none;
        padding-bottom: 2em;
    }
 
    .fieldlist label {
        display: block;
        padding-bottom: 1em;
        font-weight: bold;
        text-transform: uppercase;       
    }
</style>


Regards,
Neli
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Richard
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or