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.

Knokout binding does not work with ejgrid and RichTextEditor

Thread ID:

Created:

Updated:

Platform:

Replies:

125067 Jul 19,2016 07:57 AM Jul 28,2016 07:04 AM JavaScript 3
loading
Tags: ejRTE
Milos
Asked On July 19, 2016 07:57 AM

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 [Syncfusion]
Replied On July 20, 2016 09:31 AM

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. 


Milos
Replied On July 25, 2016 04:44 AM

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 [Syncfusion]
Replied On July 28, 2016 07:04 AM

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. 


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.

;