Html Helper with multiple Kendo Widgets

2 posts, 0 answers
  1. Joey
    Joey avatar
    7 posts
    Member since:
    Apr 2016

    Posted 14 Mar Link to this post

    Is it possible to create an html helper that uses multiple kendo widgets and styles them?  For instance, a helper that creates an address area.  I should be able to call the helper and bind it to an address object, and use those properties within the object and bind to the different widgets.  Address1 would create a kendo textbox, Address 2 would create another kendo text box, State would bind to a dropdownlist, zip would get a maskedTextBox, etc.. then it would render them all on my page.  I've been looking around but the most i have found is an html helper only creating one widget and returning it, in this case, i would be bringing back about 5-6 kendo widgets.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2053 posts

    Posted 16 Mar Link to this post

    Hi Joey,

    Instead of creating custom HtmlHelper containing multiple helpers I would recommend to use partial views, because with a custom HtmlHelper you will have to pass the entire configuration for the nested helpers and I am not sure what will be the benefit of the HtmlHelper over the PartialView in this particular case. 

    As for the HtmlHelper, you can try something like the following:
    public static class MyExtensions
    {
        public static System.Web.IHtmlString MyHelper(this HtmlHelper helper, string gridName, string textBox1Name, string textBox2Name)
        {
            StringBuilder result = new StringBuilder();
            result.Append(helper.Kendo().Grid<EmployeeViewModel>().Name(gridName).ToHtmlString());
            result.Append(helper.Kendo().TextBox().Name(textBox1Name).ToHtmlString());
            result.Append(helper.Kendo().TextBox().Name(textBox2Name).ToHtmlString());
            return helper.Raw(result.ToString());
        }
    }
    @using theCustomExtensionNamespace;
    @(Html.MyHelper("gridName", "textBox1", "textBox2"))


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top