Create MVC derived wrapper for a custom derived widget

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

    Posted 06 Nov 2017 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
    378 posts

    Posted 08 Nov 2017 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 2017 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
    392 posts

    Posted 10 Nov 2017 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.
  5. Dan
    Dan avatar
    71 posts
    Member since:
    Nov 2017

    Posted 18 Dec 2017 in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    I am a co-worker of Alexandra that initiated this thread (I did not had an account at that time) and I am sorry for the late response but I could not get to test your solution until now.

    Unfortunally as excited I was that I might have a solution, the disappointment was even greater when I saw that the solution you suggested it does not work. Your code is missing the "json" object which ofcourse can not be constructed unless you know the full options of the TreeList, meaning copying the code from WriteInitializationScript.

    As for the reasons like Alexandra has written in the first post was that we require for the TreeList to behave like Grid and provide the events for: sort, filter and filtermenuopen.

     

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    392 posts

    Posted 18 Dec 2017 Link to this post

    Hello, Dan,

    I am sorry to hear how disappointed you are. 

    The json is the serialized options which I can provide to you of course. However, using this approach will generate the client side script and HTML, but it will not extend the fluent API or scripts. This means that you will not be able to attach the handlers that are needed, deeming this effort with no real use to you.

    Now that I know what is the desired outcome, here are some things that you can do to meet your requirements:

    - Own FilterMenuOpen event for the Kendo UI TreeList

    The FilterMenuInit event is already implemented so you can use that handler to detect when the popup will open like this:
    function onFilterMenuInit(e){
     e.container.data("kendoPopup").bind("open", function() {
       console.log(e.field + " FilterMenu Open");
     });
    }

    - Own Sort event for the Kendo UI TreeList

    The sort can be detected in different ways, one could be using an internal widget - the ColumnSorter and its change event which holds the sort direction and field
    var sorters = treelist.thead.find("[data-role='columnsorter']");
    for(var i=0; i < sorters.length; i++){
      var sorter = $(sorters[i]).data("kendoColumnSorter").bind("change", function(e){
        console.log(e.sort.field, e.sort.dir);
      });
    }

    - Own Filter event for the Kendo UI TreeList

    Finally, the filter can be intercepted when the filter form is submitted :
    function onFilterMenuInit(e){
     e.container.on(
    "submit", function(e){
      console.log(treelist.dataSource.filter());
     });
    }

    Here is a runnable Dojo illustrating the three events being intercepted and the relevant event data is logged in the console for your convenience. Let me know if you need further help.

    https://dojo.telerik.com/@bubblemaster/evICI

    Alternatively, you can override the _filterable before initializing the Kendo UI Treelist but that always carries more risk:

    https://dojo.telerik.com/@bubblemaster/AJiPoG

    Finally, I suggest you submit this as a feature request in the Kendo UI TreeList UserVoice forum so people can vote for it and hopefully, it will be popular and part of the built-in events of the Kendo UI TreeList:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/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