Simple Form Example?

2 posts, 0 answers
  1. Richard
    Richard avatar
    16 posts
    Member since:
    Aug 2011

    Posted 08 Sep 2018 Link to this post

    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.

  2. Neli
    Admin
    Neli avatar
    429 posts

    Posted 12 Sep 2018 Link to this post

    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.
Back to Top