jQuery UI Widgets Forums Grid problem in showing the value prefilled of jQxEditor

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 9 months ago.

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

  • pankhi
    Participant

    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();
    });
    

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.