Knokout binding does not work with ejgrid and RichTextEditor

[Milos]

I made one simple durandal widget and I use knockout binding.

view.htm

<div>

      <div data-bind="attr: { id: gridId }, ejGrid: ejGrid"></div>

</div>

viewmodel.js

            define(['knockout', 'jquery', 'web/ej.grid.min', 'common/ej.widget.ko.min'], function (ko, $) {

      var ctor = function () {

      };

      ctor.prototype.getView = function () {

           return 'dialogs/searchlookup/view'

      }

    ctor.prototype.activate = function (settings) {

          self = this;

          var shipDetails = [

              { Name: 'Hanari Carnes', City: 'Brazil' },

              { Name: 'Split Rail Beer & Ale', City: 'USA' },

              { Name: 'Ricardo Adocicados', City: 'Brazil' }

          ];

          var grid = {

              dataSource: shipDetails,

          }

          self.ejGrid = grid;

    };

    return ctor;

});

My binding does not work, I am getting the error: 

Unable to process binding "ejGrid: function (){return ejGrid }"

Message: Syntax error

Compiled template code:

// b33ae955-100b-49fa-b88a-be9ce44da0f1_JSONTemplate

var j=j||jQuery.views,v,ret="";

try{

ret+="<tr class=\"";

ret+=(v=view.hlp("_b33ae955")-data.100b-data.49fa-data.b88a-data.be9ce44da0f1AlternateRow())!=u?v:"";

ret+="\" role=\"row\"><td class=\"e-rowcell\" role=\"gridcell\" style=\"text-align: left;\">";

ret+=(v=data["Name"])!=u?v:"";

ret+="</td><td class=\"e-rowcell\" role=\"gridcell\" style=\"text-align: left;\">";

ret+=(v=data["City"])!=u?v:"";

ret+="</td></tr>";

return ret;

}catch(e){return j._err(e);};

View: widgets/textinput/view;

ModuleId: widgets/textinput/viewmodel

I also have binding problem with RichTextEditor. 

Error which I get:

Unable to process binding "ejRTE: function (){return ejRTE }"

Message: Syntax error, unrecognized expression: .e-menu-wrap #;

View: widgets/textarea/view;

ModuleId: widgets/textarea/viewmodel

I do not know does durandal widgets have influence on this, but for other components it works fine, only those two make troubles.

What I should do ?

Regards,

Milos

[Ragavee U S]

Hi Milos, 

Query #1: Grid not rendering 

From the information you have shared, we suspect that the grid id contains special characters which is the cause of the reported issue. We have already discussed on this in our knowledge base link. 

https://www.syncfusion.com/kb/4265/why-do-not-use-special-characters-in-grid-id 

Please ensure the above scenario in your sample and if this is the case, we suggest you to remove the special characters from the grid. Please refer to the below code example. 

 

self.gridId = "testGrid", 

self.ejGrid = grid 

If you still face any issues, please share the issue reproducing sample for assisting you better. 

Query #2: ejRTE not rendering 

We suspect that this conflict occurs because in the below code you have referred only ej.grid.min, so it might have thrown error.  

define(['knockout', 'jquery', 'web/ej.grid.min', 'common/ej.widget.ko.min'], function (ko, $) {});  

  

For rendering RTE, we need to refer the script “ej.rte.min”.  

If this would not match your requirement, then please get back us with more detail and also provide the sample so that we will help you more effectively.  

Regards, 

Ragavee U S. 

[Milos]

Hi Ragavee,

Thank you for your response.

Query #1: Grid not rendering 

Problem was that my gridId contains "-" dash, (special character).

I define id as a generic guid. and generic guid contains "-", I just replace all "-" with "", and problem has been solved. 

Query #2: ejRTE not rendering 

It is strange, sometimes I get error some times not, below is my code:

view.html

<textarea  class="text-area" data-bind="attr: { id: rteId }, ejRTE: ejRTE" />

viewmodel.js

define(['durandal/composition', 'durandal/system', 'knockout', 'jquery', 'web/ej.rte.min', 'common/ej.widget.ko.min'], function (composition, system, ko, $) {

    var ctor = function () { };

    ctor.prototype.activate = function (settings) {

        self = this;

        //delete all "-" from id

        self.rteId = system.guid().replace(/-/g, "");

        var rte = {

            height: "50px",

            minHeight: "50px",

            width: "100%",

            minWidth: "100px",

            isResponsive: true,

            showToolbar: false,

            showFooter: true,  //To display the footer of RTE   

            enableResize: true, //To enable Resize in RTE   

            showClearFormat: false, //To hide clearFormat option in footer   

            showCharCount: false, //To hide character count in footer   

            showWordCount: false  //To hide word count in footer  

        }

        self.ejRTE = rte;

    };

    return ctor;

});

Regards,

Milos

[Dhivyalakshmi Thirumurugan]

Hi Milos, 

Thanks for the update. 

We are unable to reproduce the reported issue of RTE in our end. Please provide your issue reproducing sample so that we will help you more effectively. 

Regards, 

Dhivyalakshmi.