Initializing Panel second time after updated contents?

[walker1234Participant]

I have jqxPanel and jqxGrid declared as shown below. As can be seen, jqxPanel has been initialized once after databinding. The content of jqxPanel is a 500 words document. In the document which is present in jqxPanel, I am trying to add span tags around those words which are stored in WordText variable inside the click handler of gridPanel. Basically, when a user clicks on a particular cell of the jqxgrid, I am trying to add span tags in the document which is present inside the jqxPanel. For adding span tags I am using third party library called rangy.

For example, if the content of WordText is Software Project, the following console.log will result in the following:

`var html = applyCssClassToHtml(“FirstClass”, WordText);
console.log(“CSS Applied HTML Below”);
console.log(html);`

RESULT:

<span class="FirstClass">Software Project</span>

But in console.log(html), I want all the WordText present in the document which is in jQXPanel replaced by the above line.

Could you tell me if I need to reload jQXPanel second time after user clicks on one of the cell of Words(s) column of the $(“#gridPanel”).jqxGrid` ?

var dataAdapter = new $.jqx.dataAdapter(source, {

loadComplete: function (records) {

//Get data
var records = dataAdapter.records ;

var length = records.length;
var html = “<div id=’docContentPanel’>”;
html += “<div style=’margin: 10px;’><pre>” + records[1].doc_content + “</pre></div>”;
html += “</div>”;
$(“#docContentPanel”).html(html);
},
loadError: function (xhr, status, error) {
},
beforeLoadComplete:function(records){

}
});

// perform data binding

dataAdapter.dataBind();

$(“#gridPanel”).jqxGrid({

source: dataAdapter,
width: ‘122’,
height: ‘170’,

columns: [
{ text: ‘Word(s)’, datafield: ‘word_text’,width: 100},
{ text: ‘Paragraph Content’, datafield: ‘doc_content’,width: 500}

]
});

$(“#gridPanel”).on(‘rowclick’,function(event){

row = event.args.rowindex;

datarow = $(“#gridPanel”).jqxGrid(‘getrowdata’, row);
var response = JSON.stringify(datarow,null,10);

var WordText = datarow[“word_text”];
var DocumentContent = datarow[“doc_content”];

// Rangy CSS Applier
/*
To apply Rangy CSS, we would need to Add doc_content related HTML to a temporary element, then apply CSS class and remove it again.

http://stackoverflow.com/questions/7922563/use-rangy-cssclassapplier-to-apply-a-class-to-a-string

*/

function applyCssClassToHtml(cssClass, html) {
rangy.init();
var cssClassApplier = rangy.createCssClassApplier(cssClass);
var div = document.createElement(“div”);
div.innerHTML = html;
document.body.appendChild(div);
var range = rangy.createRange();
range.selectNodeContents(div);
cssClassApplier.applyToRange(range);
range.detach();
document.body.removeChild(div);
return div.innerHTML;
}

var html = applyCssClassToHtml(“FirstClass”, WordText);

console.log(“CSS Applied HTML Below”);

console.log(html);

$(“#docContentPanel”).jqxPanel({ width: ‘750’,height: ‘500’,scrollBarSize: 20});

};`

[walker1234Participant]

Some one please reply. Thanks

[HristoParticipant]

Hello walker1234,

We could not spend time to create (private) project also in this has and another (external) library that we do not have experience with it.
Please, provide examples when you have issues with our Widgets.
However, I would like to suggest you those examples:
– Panel: http://jsfiddle.net/jqwidgets/acwZB/
– Grid: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm?light
(I hope this will be helpful, focus on “cellclassname” member)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts