problem in showing the value prefilled of jQxEditor

[pankhiParticipant]

I have been facing problem in showing the value prefilled of jQxEditor in the jqxWindow. after page loads if i click on edit the jqxeditor’s value shows empty(it shows value on alert) and after closing the window when i again click on the editor it shows the editor value prefilled. Can you please help? where I am wrong?

$(document).ready(function() {
    //===========================
    // show the grid for email Template
    //===========================
    var url = "/admins/emailtemplategridjson"; // action from where we get the result in json
    var source = {
        datatype: "json",
        datafields: [{
            name: 'Subject',
            type: 'string',map: 'SystemEmailMessage>Subject'
        }, {
            name: 'Type',
            type: 'string',map: 'SystemEmailTemplateType>Type'
        },{
            name: 'TypeDisplay',
            type: 'string',map: 'SystemEmailTemplateType>TypeDisplay'
        }, {
            name: 'PlainTextBody',
            type: 'string',map: 'SystemEmailMessage>PlainTextBody'
        }, {
            name: 'TypeId',
            type: 'string',map: 'SystemEmailMessage>Type'
        }],
        updaterow: function(rowid, rowdata, commit) {
            // synchronize with the server - send update command
        },
        id: 'SystemEmailMessage>id',
        url: url,
        pagesize: 30
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;

    // initialize jqxGrid
    $("#jqxgrid").jqxGrid({
        width: '100%',
        height: 350,
        theme: KiouiTheme,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        sortable: true,
        altrows: true,
        enabletooltips: true,
        pagesizeoptions: ['10', '20', '30', '40'],
        showfilterrow: true,
        filterable: true,
        showtoolbar: false,
        enablebrowserselection: true,
        selectionmode: 'singlecell',
		columnsresize: true,
        // columns shown in grid are mention below
        columns: [{
            text: '',
            datafield: 'Edit',
            columntype: 'number',
            filterable: false,
            sortable: false,
            width: '10%',
            cellsrenderer: function() {
                return '<div style="width: 100%"><img src="/images/edit.png" title="Edit" style="margin-top: 5%;margin-left: 25%" /></div>';
            }
        }, {
            text: 'Type',
            datafield: 'TypeDisplay',
            width: '40%',
            filtertype: 'checkedlist'
        }, {
            text: 'Subject',
            datafield: 'Subject',
            width: '40%'
        }, {
            text: '',
            datafield: 'Delete',
            columntype: 'number',
            filterable: false,
            sortable: false,
            width: '10%',
            cellsrenderer: function() {
                return '<div><img src="/images/trash.png"  title="Delete" style="margin-top:5%;margin-left:25%" /></div>';
            }
        }, ]

    });

    // initialize the popup window and buttons.
    $("#popupWindow").jqxWindow({
        width: 750,
        height: 700,
        resizable: false,
        isModal: true,
        autoOpen: false,
        cancelButton: $("#cancel"),
        modalOpacity: 0.3,
        theme: KiouiTheme,
        maxHeight: 700,
        maxWidth: 750,
		initContent: function() {
				$("#PlainTextBody").jqxEditor({   height: '450px',width: '650px' });
			}, 
    });
         
    // update the edited row when the user clicks the 'Save' button.
    $("#Save").click(function(event) {
  var checkedit= $('#edittemplateForm').jqxValidator('validate'); // adding validation in add form
      if(checkedit==true){
        if (editrow >= 0) {
			showloader(); // to disable button and show loader image
            var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
            var row = {
                Subject: $("#Subject").val(),
                Type: $("#Type").val(),
            
                PlainTextBody: $("#PlainTextBody").val(),
                id: rowID,
            };
            // ajax called to UPDATE the row on edit
            $.ajax({
                url: '/admins/updateemailtemplateajax',
                data: row,
                type: "POST",
                cache: false,
                async: true,
                success: function(response) {
                    if($.trim(response)=="success"){
                        $("#popupWindow").jqxWindow('hide');
                        var action = 'update';
                        showbuttons(); // function created in function.js file to show button enabled and hide loader
                        gridmessage(action);

                        $('#jqxgrid').jqxGrid('updatebounddata');
                    } else {
                        alert('Something went wrong please try again.');
                    }
                },
                error: function(response) {
                    // cancel changes.
                    alert('Something went wrong please try again.');
                }
            });

            $("#edittemplateForm").submit(function() {
                return false;
            });
        }
	}else{
		showbuttons();
		event.preventDefault();//If this method is called, the default action of the event will not be triggered.
	}
    });

    // on click of edit and delete
    $("#jqxgrid").on("cellclick", function(event) {
        var column = event.args.column;
        var rowindex = event.args.rowindex;
        var columnindex = event.args.columnindex;

        //when user wants to edit the record
        if (columnindex == 0) {

            // open the popup window when the user clicks a button.
            editrow = rowindex;
            var offset = $("#jqxgrid").offset(); 
            $("#popupWindow").jqxWindow({
                theme: KiouiTheme,
                position: {
                    x: parseInt(offset.left) + 60,
                    y: parseInt(offset.top) - 20
                },
				
            });
            // get the clicked row's data and initialize the input fields.
            var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
            $("#Subject").val(dataRecord.Subject);
            $("#Type").val(dataRecord.TypeId);
			alert(dataRecord.PlainTextBody);
            $("#PlainTextBody").val(dataRecord.PlainTextBody);
            // show the popup window.
            $("#popupWindow").jqxWindow('open');

        };
     
    });

    //======================================================
    // called ajax to save the data on click of "add template"
    //=======================================================
    $("#addtemplate").click(function(event) {

  var check= $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form
     if(check==true){
        var Type = $("#SystemEmailMessageType").val();
        var Subject = $('#SystemEmailMessageSubject').val();
        var PlainTextBody = $('#TextBody').val();
		showloader(); // to disable button and show loader image
        $.ajax({
            url: "/admins/addemailtemplateajax",
            type: "POST",
            cache: false,
            async: true,
            data: {
                Type: Type,
                Subject: Subject,
                PlainTextBody: PlainTextBody
            },
            success: function(response) {
                if($.trim(response)=="success"){
                    $('#TempForm').jqxWindow('close');
                    var action = 'add';
                    showbuttons(); // function created in function.js file to show button enabled and hide loader
                    gridmessage(action);
                    $('#jqxgrid').jqxGrid('updatebounddata');

                }
            }
        });
        $("#addtemplateForm").submit(function() {
            return false;
        });
}else{
showbuttons();
event.preventDefault();//If this method is called, the default action of the event will not be triggered.

}
    });

//------------------------------------
// adding validation to the form
//------------------------------------
    $('#SystemEmailMessageSubject').jqxInput({});
   $('#Subject').jqxInput({});

    $('#addtemplateForm').jqxValidator({
        rules: [{
                input: '#SystemEmailMessageSubject',
                message: 'Subject is required!',
                action: 'keyup, blur',
                rule: 'required'
            },
           
            
        ]
    });
  $('#edittemplateForm').jqxValidator({
        rules: [
            {
                input: '#Subject',
                message: 'Subject is required!',
                action: 'keyup, blur',
                rule: 'required'
            },
            
        ]
    });

});

//==================================================================
//  window open in email template view "/admins/emailtemplategrid"
//==================================================================
var basicDemo = (function() {
    //Adding event listeners
    function _addEventListeners() {
        $('#addrowbutton1').click(function() {
            $('#SystemEmailMessageSubject').val('');
           
            $('#TempForm').jqxWindow('open'); // to open the window onclick of open button
        });
        $('#hideWindowButton').mousedown(function() {
            $('#TempForm').jqxWindow('close'); // to close the add emailtemplate window onclick of cancel button
        });
        $('#cancel').mousedown(function() {
            $('#popupWindow').jqxWindow('close'); // to close the edit emailtemplate window onclick of cancel button
        });
    };

    //Creating all page elements which are jqxWidgets
    function _createElements() {
        $('#addrowbutton1').jqxButton({
            width: '70px',
            theme: KiouiTheme
        });
    };

    //Creating the window
    function _createWindow() {
var offset = $("#jqxgrid").offset();

        $('#TempForm').jqxWindow({
            theme: KiouiTheme,
              position: {
                    x: parseInt(offset.left) + 60,
                    y: parseInt(offset.top) - 20
                },
            //showCollapseButton: true,
			isModal: true,
			modalOpacity: 0.3,
            maxHeight: 700,
            maxWidth: 750,
            minHeight: 600,
            minWidth: 650,
            height: 700,
            width: 750,
            autoOpen: false,
            initContent: function() {
                $('#TempForm').jqxWindow('focus');
                $("#TextBody").jqxEditor({   height: '500px',width: '650px'  });
            }
        });
    };
    return {
        config: {
            dragArea: null
        },
        init: function() {
            _createElements();
            _addEventListeners();
            _createWindow();
        }
    };
}());

$(document).ready(function() {
    //Initializing the demo
    basicDemo.init();
});

[DimitarParticipant]

Hello pankhi,

Please try adding the following event handler as a solution:

$('#TempForm').on('close', function() {
    $("#TextBody").val('');
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts