jump page while editing

author : KAUSHAL VARSHNEY

by KAUSHAL VARSHNEY

HTML

<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<b>Click on a cell of Product to edit <br>
    <b>Grid 1:
<div id="jqxgrid"></div>
                <b>Grid 2:
<div id="jqxgrid2"></div>

JavaScript

var data = generatedata(10);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };
 var createeditor = function (row, cellvalue, editor, cellText, width, height) {
     var textarea = $("<textarea />").prependTo(editor);
     textarea.jqxEditor({
         height: height,
         width: width,
         editable: true,
         tools: '',
         pasteMode: 'text'
     });
 };

 var initeditor = function (row, cellvalue, editor, cellText, width, height) {
     var textarea = $("<textarea />").prependTo(editor);
     textarea.jqxEditor({
         height: '100%',
         width: '100%',
         editable: true,
         tools: '',
         pasteMode: 'text'
     });
     textarea.jqxEditor('setMode', false);
     textarea.jqxEditor('val', cellvalue);
     setTimeout(function () {
         textarea.jqxEditor('focus');
     }, 5);
 };

 var geteditorvalue = function (row, cellvalue, editor) {
     return editor.find('textarea').val();
 };
 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid, #jqxgrid2").jqxGrid({
     width: 700,
     theme: 'energyblue',
     height: 300,
     source: adapter,
     sortable: true,
     editable: true,
     autoheight: true,
     autorowheight: true,
     ready: function () {
         $("#jqxgrid, #jqxgrid2").jqxGrid("setcolumnproperty", "productname", "createeditor", createeditor);
         $("#jqxgrid, #jqxgrid2").jqxGrid("setcolumnproperty", "productname", "initeditor", initeditor);
         $("#jqxgrid, #jqxgrid2").jqxGrid("setcolumnproperty", "productname", "geteditorvalue", geteditorvalue);

     },
     columns: [{
         text: 'First...