Create MVC derived wrapper for a custom derived widget

4 posts, 0 answers
  1. Alexandra
    Alexandra avatar
    18 posts
    Member since:
    Sep 2015

    Posted 06 Nov Link to this post

    Hi,

    In order to have the same functionality in treelist as in grid we have create a new file where we copied the treelist code and added the required functionality. Now we are thinking maybe we should create a new widget derived from treelist and add the extra functionality. (see https://www.telerik.com/forums/treelist-conditional-filter-functionality and/or https://www.telerik.com/forums/visibility-button-widget---share-code-review!-!)

    Since we are using the MVC we were wondering: Can we easily create an MVC wrapper for the new widget? Maybe derived from the treelist wrapper, and just change the widget name to use the new widget name instead of the kendotreelist?

    Thank you
    Alexandra
  2. Dimitar
    Admin
    Dimitar avatar
    203 posts

    Posted 08 Nov Link to this post

    Hello Alexandra,

    If you need to create a custom HtmlHelper that can accept additional configuration options for a specific widget, then you should use the following approach:
    public static class MyHtmlHelperExtensions
    {
      public static Kendo.Mvc.UI.Fluent.GridBuilder<T> MyGrid<T>(this HtmlHelper helper, string name)
        where T : class
      {
        return helper.Kendo().Grid<T>()
          .Name(name)
          // More options
      }
    }

    Then, the extended widget can be initialized in the view as follows:
    @(Html.MyGrid<ProductViewModel>("GridCustom")
        ...
    )


    Additional information about the different Builders can be found in the Kendo UI for ASP.NET MVC API Reference.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alexandra
    Alexandra avatar
    18 posts
    Member since:
    Sep 2015

    Posted 09 Nov in reply to Dimitar Link to this post

    Hi Dimitar,

    I already used this, but I wanted something different.

    Like I said I want to derived from kendo.ui.TreeList to provide the missing functionality

    MyTreeList = kendo.ui.TreeList.extend({
    ...
    });

    And in MVC I want to change somehow the TreeListBuilder so when the javascript code is generated to have

    kendo.syncReady($("#treelist").companyMyTreeList({...})).

    So I am interested if I can do something in C# to influence the generation of javascript code.

    Alexandra.

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    317 posts

    Posted 10 Nov Link to this post

    Hi, Alexandra,

    To override the generated widget name, you can inherit the TreeList and override this method from TreeList.cs:

    public override void WriteInitializationScript(TextWriter writer)
    {
         writer.Write(Initializer.Initialize(Selector, "MyCompanyTreeList", json));
     
         base.WriteInitializationScript(writer);
    }


    This will generate the desired kendo.syncReady() script but it will still pose overriding the Fluent API which will remain unchanged. Therefore, I suggest rendering the widget with jQuery and if you need to bind it to some other widget's data source, use shared data source

    It is not clear what is the purpose of extending the Kendo UI TreeList, perhaps you can submit a feature request and if it gains popularity, we will push it forward for implementation in our planning:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=170298 

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 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