Declarative knockout binding for ejAutocomplete

[Mayur Bharodia]

Hello,

I am trying to implement declarative knockout binding for auto complete. I would like to do something like following

View Model:

<input type="text" name="name" class="form-control" data-bind="ejAutocomplete:{dataSource:autoComplete.dataSource,fields:autoComplete.fields,filterType:autoComplete.filterType,width:autoComplete.width}" />

Model:

autoComplete: {
            dataSource: ej.DataManager({ url: '/some/url/value' }),
            fields: { text: "name", key: "id" },
            filterType: ej.filterType.StartsWith,
            width: 205
        }

Is this supported? If yes, then it is not working for me. Is there any

Thanks in advance for your help

[Selvamani Sankarappan]

Hi Mayur,

Thanks for Contacting Syncfusion Support,

We found that you have created Autocomplete by using both Knockout and jQuery approach. While using Knockout support, it is enough to use the ejautocomplete directive to create the component. We have to declare all properties in ejAutocomplete using declarative binding.

Refer to the below code example:

[cshtml]

<input type="text" id="autocomplete" name="name" class="form-control" data-bind="ejAutocomplete: {dataSource : value, fields:{ key:'id',text:'languages'},width : 200,filterType:ej.filterType.StartsWith}" />

[Script]

$(function () {

        var dataManager = ej.DataManager({ url: "Home/autocomplete", offline: true })

       

        window.viewModel = {

            value: ko.observable(dataManager),

         

        }

      ko.applyBindings(viewModel);

       

    });

We have prepared a sample which can be downloaded from the below link

http://www.syncfusion.com/downloads/support/forum/120840/ze/AutocompleteKO-1587959699

Refer to the below link for more about Knockout binding JS,

http://help.syncfusion.com/js/knockoutjs

Refer to the below link for more about Autocomplete component properties, methods and events,

http://help.syncfusion.com/js/api/ejautocomplete

Regards,

Selvamani S

[Mayur Bharodia]

Thank you so much for your help. I will implement the control the way you have advised. I will update you as soon as possible.

[Mayur Bharodia]

Hi There,

Thanks a lot for your help. Eventually I have realized that your extension for knockout binding (ej.widget.ko.min.js) is not working properly while using RequiereJS. I have tried searching around to find a compatible extension for RequireJS. I could not find it.

I have ended creating my own version of AMD module, which is essentially a wrapper of your knockout extension. If possible, then I am requesting you to review it and suggest an alternative to make it better. (I have pated the code below)

The only thing I don't like about Syncfusion is that it creates global references such as window.Syncfustion. I have downloaded JS files from my Syncfusion account and the download did not include correct AMD modules. I have ej.core.min.js, however, it creates a global reference and it is not a module by definition anyway. I see on the website that Syncfusion supports RequireJS, however, this is not a correct way. The module should not create a global reference. Because of this, now your extension of knockout does not work unless I wrap it and create my own version of this extension.

I am not an expert in javaScripting and really want to be positive while expressing my concerns. Probably I may be missing something. If you think that my comments are not legitimate then I really like to know how I can use Syncfusion components without creating any global reference.

I really appreciate your kind attention and looking forward for any help to the earliest of your convenience.

/*!

* This is an attempt to create an AMD module for RequireJS for the original Syncfusion's extension for knockOut binding

* filename: ej.widget.ko.min.js

* version : 13.3.0.7

* Copyright Syncfusion Inc. 2001 - 2015. All rights reserved.

* Use of this code is subject to the terms of our license.

* A copy of the current license can be obtained at any time by e-mailing

* [email protected]. Any infringement will be prosecuted under

* applicable laws.

*/

define(["jquery", "knockout", "ej.scripts/common/ej.core.min"], function (n, r) {

"use strict"; var t = window.Syncfusion; var i = window.Syncfusion.widget; var u = { binder: function (t, i, f, o, s, h, c) { var k = n(t).data(c), y = !k, l = e(i, h["ob.ignore"], !y), p, w, a, b, v; if (!y && JSON) for (v in l) a = l[v], a instanceof Array && (b = k.model[v]) instanceof Array && a.length === b.length && JSON.stringify(a) === JSON.stringify(b) && delete l[v]; y && h.type === "editor" && r.isObservable(l.value) && (w = l.value, p = u.modelChange(w), l = n.extend({}, l, { value: l.value() })); n(t)[c](l); p && w.subscribe(u.valueChange(n(t)[c]("model._change", p).data(c))) }, modelChange: function (n) { return function (t) { n(t.value) } }, valueChange: function (n) { return function (t) { n.option("value", u.processData(t)) } }, processData: function (n) { return n === "true" ? !0 : n === "false" ? !1 : +n + "" === n ? +n : n }, bindKoHandler: function (t, i) { i["ob.ignore"] = [];[].push.apply(i["ob.ignore"], i.observables || []); r.bindingHandlers[t] = { init: function (i) { r.utils.domNodeDisposal.addDisposeCallback(i, function () { n(i)[t]("destroy") }) }, update: function (n, r, f, e, o) { u.binder(n, r, f, e, o, i, t) } } } }, e = function (n, i, u, f) { var s = r.utils.unwrapObservable(n), h = {}, o; if (f = f || "", typeof s == "function" && (s = s()), t.isPlainObject(s)) for (o in s) if (i.indexOf(f + o) === -1) h[o] = r.utils.unwrapObservable(s[o]), (t.isPlainObject(h[o]) || r.isObservable(h[o])) && (h[o] = e(h[o], i, u, f + o + ".")); else { if (u) continue; h[o] = s[o] } return h }, f = i.registeredWidgets; for (var o in f) u.bindKoHandler(f[o].name, f[o].proto); t.extensions.ko = { subscriptions: {}, register: function (n, i, u) { return !window.ko || !r.isObservable(n) ? n : (t.widget.observables.subscriptions[i] = n.subscribe(t.proxy(t.widget.observables.raise, { instance: u, field: i })), n) }, raise: function (i) { var r = this.instance["ob.values"], u = this.field in r; u || (r[this.field] = this.instance.option(this.field)); (r[this.field] !== i || n.isArray(this.instance.option(this.field)())) && (this.instance.option(this.field, t.extensions.modelGUID, !0), r[this.field] = i) }, getValue: function (n, t) { return t ? n : typeof n == "function" ? n() : n } }; t.widget.observables = t.extensions.ko

});

[Selvamani Sankarappan]

Hi Mayur,

Sorry for the inconvenience,

Query: I see on the website that Syncfusion supports RequireJS, however, this is not a correct way. The module should not create a global reference. Because of this, now your extension of knockout does not work unless I wrap it and create my own version of this extension.
Yes we have provided Require JS support for our components. But unfortunately, we are unable to use ej.widget.ko and Require JS combination at present. We have confirmed this as a defect and logged an issue report for this.
 A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Regards,

Selvamani S

[Tyeth Gundry]

Hi Mayur,

Sorry for the inconvenience,

Query: I see on the website that Syncfusion supports RequireJS, however, this is not a correct way. The module should not create a global reference. Because of this, now your extension of knockout does not work unless I wrap it and create my own version of this extension.
Yes we have provided Require JS support for our components. But unfortunately, we are unable to use ej.widget.ko and Require JS combination at present. We have confirmed this as a defect and logged an issue report for this.
 A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Regards,

Selvamani S

Please add the same incident to my account to be notified of a resolution.

[Sasikala Nagarajan]

Hi Tyeth,

We have checked with your requirement and created a new incident under your account to track the status of the defect reported in this forum. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Regards,
Sasikala Nagarajan