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. Image for the cookie policy date
close icon

Knokout binding does not work with ejgrid and RichTextEditor

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



3 Replies

RU Ragavee U S Syncfusion Team July 20, 2016 01:31 PM UTC

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. 


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. 



MI Milos July 25, 2016 08:44 AM UTC

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


DT Dhivyalakshmi Thirumurugan Syncfusion Team July 28, 2016 11:04 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon