Grid Editor - custom html with combobox

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