jQuery UI Widgets Forums Layouts Panel and Responsive Panel Initializing Panel second time after updated contents?

This topic contains 2 replies, has 2 voices, and was last updated by  Hristo 7 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • walker1234

    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”);


    <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>”;
    loadError: function (xhr, status, error) {


    // perform data binding



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

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



    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.



    function applyCssClassToHtml(cssClass, html) {
    var cssClassApplier = rangy.createCssClassApplier(cssClass);
    var div = document.createElement(“div”);
    div.innerHTML = html;
    var range = rangy.createRange();
    return div.innerHTML;

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

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


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


    • This topic was modified 7 years, 8 months ago by  walker1234.


    Some one please reply. Thanks


    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.