Grid Editor - custom html with combobox - Forum - Kendo UI Builder - Progress Community

Grid Editor - custom html with combobox

 Forum

Grid Editor - custom html with combobox

This question is answered

Hello,

I am creating a custom editor for 1 field in my grid.  The datasource has 2 fields ("account" and "account_title") and I want to display both in the dropdown.  Currently the data field is "account" and the text field is "account_title".  I see a lot of examples of how to set headerTemplate and template, but I just can't figure out how to do this within the KUIB architecture.

Current code:

let fld = this.$components.gridAccounts.options.columns.find((value, index) => { return value.field === "account"; });
if (fld !== undefined) {
   fld.editor = (el, options) => {
      el.html('<input name="account" data-value-field="account" ' +
              'data-text-field="account_title" data-source="window.dsAccounts" ' +
              'data-bind="value: account" kendo-combobox data-role="combobox" ' +
              '/>');
   };
}
Thoughts?
Louis
Verified Answer
  • Hi Louis,


    To use the desired template, you need to initialize the kendo component as jQuery widget not as angular directive. On the following link, you can find example how to use combo box as grid editor and add all needed options:
    https://demos.telerik.com/kendo-ui/grid/editing-custom (Category column) 


    Best,
    Rado

All Replies
  • Hi Louis,

    To achieve the desired functionality, you can try using the combo box item template where you can put both (account and account_title) fields and format them in appropriate way. On the following link you can find example of combo box with custom templates:
    https://demos.telerik.com/kendo-ui/combobox/template


    Best,
    Rado

  • Rado,

    If I were creating a combobox on a view the code from the Kendo documentation you pointed me to should work fine.  My issue is that I'm setting the html of a field editor and Kendo is creating the widget.  The syntax in the documentation you pointed me to is different, it's not setting a field editor, which is where I'm struggling.  I tried the following, and many other variations of escaping the quotes (such as "):

                fld.editor = (el, options) => {
                    el.html('<input name="account" data-value-field="account" ' +
                            'data-text-field="account_title" data-source="window.dsAccounts" ' +
                            'data-bind="value: account" kendo-combobox data-role="combobox" ' +
                            'header-template="<div class=\"k-widget k-header\">' +
                                                '<span>Account</span><span>Title</span>' +
                                             '</div>" ' +
                            'template="<span class=\"k-state-default\"><p>#: data.account #</p></span>' +
                                      '<span class=\"k-state-default\"><p>#: data.account_title #</p></span>" ' +
                            '/>');
                };

    When this is used, I get the following under the combobox element, within the row.

    AccountTitle" template="
    #: data.account #
    
    #: data.account_title #
    
    " />

    Louis

  • Hi Louis,


    To use the desired template, you need to initialize the kendo component as jQuery widget not as angular directive. On the following link, you can find example how to use combo box as grid editor and add all needed options:
    https://demos.telerik.com/kendo-ui/grid/editing-custom (Category column) 


    Best,
    Rado

  • Thanks Rado, setting a function instead of the field html works.

    I'm still doing some testing but so far it seems much slower to create the dropdown (with just under 400 items) using the function vs the directive method.

    Louis

  • Hi Loius,


    It is strange that the performance is different because internally the angular directive for components is a wrapper of the jquery widget and initialization goes via the same code base. If you prefer to use angular approach you need to append template with combo box setup where you can use k-options which points to the json object with settings (like the object passed to jquery constructor initialization). The tricky part here is that the template will be compiled against the internal grid scope. So in your case you need to extend this scope. For example:

    editor: (container, options) => {
    const el = angular.element(template);
    el.appendTo(container);
    // Get grid scope because template is compiled against it
    const gridScopeModel = gridWidgetInstance.$angular_scope.vm;
    angular.extend(gridScopeModel, yourOptions);
    }

    Please note that in v 2.1 we use the same approach (except that we have wrapper directive over the kendo directive) and you can override the _$buildSemanticEditor internal function and change the template for specific column.


    However, I do not think that in this way the performance will be increased, since as I said the code will go via the same logic. You can increase the performance by decreasing item numbers in the combo box with a applied initial filter for example.


    Best,
    Rado

  • Rado,

    Thanks for sharing another approach.  For now I think I'll stick with the widget method since I have that working.

    Will the widget method continue to work in v2.1?

    Louis

  • Hi Louis,

    Yes, the widget method will work for v2.1 and for all further versions.

    Best.

    Rado