We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Declarative knockout binding for ejAutocomplete

Thread ID:

Created:

Updated:

Platform:

Replies:

120840 Oct 21,2015 08:56 AM Dec 28,2015 01:04 AM JavaScript 6
loading
Tags: ejAutoCompleteTextBox
Mayur Bharodia
Asked On October 21, 2015 08:56 AM

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 [Syncfusion]
Replied On October 22, 2015 07:52 AM

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
Replied On October 22, 2015 09:20 AM

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
Replied On October 22, 2015 03:51 PM

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

* licensing@syncfusion.com. 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 [Syncfusion]
Replied On October 23, 2015 09:19 AM

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
Replied On December 23, 2015 10:53 AM

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 [Syncfusion]
Replied On December 28, 2015 01:04 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;