Grid Horizontal Scroll bar makes row uneditable

[jaholtParticipant]

I’m using the jqxgrid in an MVC application. It works great, except when I’m editing a row and click the horizontal scroll bar to scroll back and forth on the row. Then it makes the row uneditable (grayed out) and I lose the data I entered. I’m attaching the code. I’m using v3.6.0 (2014-Nov-25) in an IE9 browser. I’ve created “Edit” “Update/Cancel” anchors to edit each row, one at a time.

In Razor View:

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    <div class="clear"><br /><br /></div>
    <input id="addrowbutton" class="accountTypes_AddRowBtn" type="button" value="Add New Bank" />
</div>

In js file:

var editedRowValues = [];
var banksDataUrl = apiPath + "BankInfo";
var validateAccountUrl = apiPath + "ValidateBankInfo/";
var modifyBankUrl = apiPath + "UpdateBankInfo/";

var that = this;

jQuery(document).ready(function () {
    
    var stateData = '';
    jQuery.ajax({
        url: apiPath + "StateLookup",
        success: function (data, obj2, obj3) {
            stateData = data;
        }
    });

    var banksSource = 
    {
        datafields: [
            { name: 'BankId', type: 'number' },
            { name: 'FriendlyName', type: 'string' },
            { name: 'BankName', type: 'string' },
            { name: 'AddressLine1', type: 'string' },
            { name: 'AddressLine2', type: 'string' },
            { name: 'City', type: 'string' },
            { name: 'State', type: 'string' },
            { name: 'PostalCode', type: 'string' },
            { name: 'FaxNumber', type: 'string' },
            { name: 'ContactName', type: 'string' },
            { name: 'ContactEmail', type: 'string' },
            { name: 'ContactPhone', type: 'string' },
            { name: 'DateCreated', type: 'date' },
            { name: 'DateModified', type: 'date' },
            { name: 'Active', type: 'bool' },
            { name: 'ImportSP', type: 'string' }
        ],
        datatype: "json",
        async: true,
        url: banksDataUrl,
        updateRow: function (rowId, rowData, commit) {
            commit(true);
        }
    };

    var banksAdapter = new jQuery.jqx.dataAdapter(banksSource);

    jQuery("#jqxgrid").jqxGrid(
    {
        width: '100%', 
        height: 365,
        source: banksAdapter,
        filterable: true,
        editable: true,
        selectionmode: 'singlerow', 
        columnsresize: true,
        enabletooltips: true,
        sortable: true,
        rowsheight: 35,
        editmode: 'programmatic', //selectedrow
        pageable: true,
        pagerrenderer: pagerrenderer,
        ready: function () {
        },
        columns: [
            {
                text: 'Edit',
                align: "center",
                editable: false,
                sortable: false,
                datafield: 'available',
                width: 150,
                cellsrenderer: function (row, column, value) {
                    var eventName = "onclick";
                    if ($.jqx.mobile.isTouchDevice()) {
                        eventName = "on" + $.jqx.mobile.getTouchEventName('touchstart');
                    }

                    if (row === that.editrow) {
                        return "<div style='text-align: center; width: 100%; top: 7px; position: relative;'><a " + eventName + "='Update(" + row + ", event)' style='color: inherit;' href='javascript:;'>Update</a><span style=''>/</span>" + "<a " + eventName + "='Cancel(" + row + ", event)' style='color: inherit;' href='javascript:;'>Cancel</a></div>";
                    }

                    return "<a " + eventName + "='Edit(" + row + ", event)' style='color: inherit; margin-left: 50%; left: -15px; top: 7px; position: relative;' href='javascript:;'>Edit</a>";
                }
            },
            {
                text: 'Friendly Name',
                datafield: 'FriendlyName',
                columntype: 'textbox',
                width: 320,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Bank Name',
                datafield: 'BankName',
                columntype: 'textbox',
                width: 320,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Address 1',
                dataField: "AddressLine1",
                columntype: 'textbox',
                width: 300,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Address 2',
                datafield: 'AddressLine2',
                width: 300,
                columntype: 'textbox',
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'City',
                datafield: 'City',
                columntype: 'textbox',
                width: 225,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'State',
                datafield: 'State',
                width: 125,
                columntype: 'dropdownlist',
                createeditor: function (row, column, editor) {
                    editor.jqxDropDownList({ width: 125, height: 35, source: stateData, displayMember: 'Abreviation', valueMember: 'Abreviation' });
                }
            },
            {
                text: 'Zip Code',
                datafield: 'PostalCode',
                columntype: 'textbox',
                width: 150,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 30);
                }
            },
            {
                text: 'Fax',
                datafield: 'FaxNumber',
                columntype: 'textbox',
                width: 135,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 30);
                }
            },
            {
                text: 'Contact Name',
                datafield: 'ContactName',
                columntype: 'textbox',
                width: 250,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 100);
                }
            },
            {
                text: 'Contact Email',
                datafield: 'ContactEmail',
                columntype: 'textbox',
                width: 250,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Contact Phone',
                datafield: 'ContactPhone',
                columntype: 'textbox',
                width: 135,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 30);
                }
            },
            {
                text: 'Active',
                datafield: 'Active',
                columntype: 'checkbox',
                width: 75
            },
            {
                text: 'Date Created',
                datafield: 'DateCreated',
                columntype: 'datetimeinput',
                cellsformat: 'M/d/yyyy hh:mm tt',
                editable: false,
                width: 195
            },
            {
                text: 'Date Modified',
                datafield: 'DateModified',
                columntype: 'datetimeinput',
                cellsformat: 'M/d/yyyy hh:mm tt',
                width: 195,
                editable: false
            }
        ]
    });

    jQuery("#addrowbutton").jqxButton();

    jQuery("#addrowbutton").on('click', function () {
        var datarow = createRow();
        var commit = jQuery("#jqxgrid").jqxGrid('addrow', null, datarow);
        //get the added row's index, set its focus, and begin editing the row.
        var rows = jQuery('#jqxgrid').jqxGrid('getrows');
        var len = rows.length;
        $('#jqxgrid').jqxGrid('ensurerowvisible', len - 1);
    });

    function createRow() {
        var row = {};
        //populate default values (where applicable)
        row["BankId"] = "";
        row["FriendlyName"] = "";
        row["BankName"] = "";
        row["AddressLine1"] = "";
        row["AddressLine2"] = "";
        row["City"] = "";
        row["State"] = "";
        row["PostalCode"] = "";
        row["FaxNumber"] = "";
        row["ContactName"] = "";
        row["ContactEmail"] = "";
        row["ContactPhone"] = "";
        row["DateCreated"] = new Date();
        row["DateModified"] = new Date();
        row["Active"] = true;
        row["ImportSP"] = "";
        return row;
    }

    $("#jqxgrid").bind("pagechanged", function (event) {
        var args = event.args;
        var pagenumber = args.pagenum;
        var pagesize = args.pagesize;
    });

    $("#jqxgrid").bind("pagesizechanged", function (event) {
        var args = event.args;
        var pagenumber = args.pagenum;
        var pagesize = args.pagesize;
    });

    var pagerrenderer = function () {
        var element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
        var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
        for (i = 0; i < paginginfo.pagescount; i++) {
            // add anchor tag with the page number for each page.                    
            var anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
            anchor.appendTo(element);
            anchor.click(function (event) {
                // go to a page.                        
                var pagenum = parseInt($(event.target).text());
                $("#jqxgrid").jqxGrid('gotopage', pagenum);
            });
        } return element;
    }

    //This is called for each column after the Update link is clicked
    jQuery("#jqxgrid").on('cellendedit', function (event) {
        var oldvalue = event.args.oldvalue;
        var newvalue = event.args.value;
        var datafield = event.args.datafield;
        var row;
        if (event.args.row == null || event.args.row == undefined) {
            row = jQuery('#jqxgrid').jqxGrid('getrowdata', event.args.rowindex);
        }
        else {
            row = event.args.row;
        }
        if (oldvalue != newvalue) {
            //If the user has filled out all of the absolutely required fields we can begin calling the method to update the account record.
            if (row.FriendlyName != null && row.FriendlyName != undefined && row.FriendlyName != '' || datafield == 'FriendlyName' && newvalue != null && newvalue != undefined && newvalue != '')
            {
                editedRow = row;
                var updateUrl = modifyBankUrl;

                var bankId = row.BankId;
                var friendlyName = row.FriendlyName;
                var bankName = row.BankName;
                var addressLine1 = row.AddressLine1;
                var addressLine2 = row.AddressLine2;
                var city = row.City;
                var state = row.State;
                var postalCode = row.PostalCode;
                var faxNumber = row.FaxNumber;
                var contactName = row.ContactName;
                var contactEmail = row.ContactEmail;
                var contactPhone = row.ContactPhone;
                var dateCreated = row.DateCreated;
                var dateModified = row.DateModified;
                var active = row.Active;
                var importSP = row.ImportSP;

                switch (datafield) {
                    case 'FriendlyName':
                        friendlyName = newvalue;
                        break;
                    case 'BankName':
                        bankName = newvalue;
                        break;
                    case 'AddressLine1':
                        addressLine1 = newvalue;
                        break;
                    case 'AddressLine2':
                        addressLine2 = newvalue;
                        break;
                    case 'City':
                        city = newvalue;
                        break;
                    case 'State':
                        state = newvalue;
                        break;
                    case 'PostalCode':
                        postalCode = newvalue;
                        break;
                    case 'FaxNumber':
                        faxNumber = newvalue;
                        break;
                    case 'ContactName':
                        contactName = newvalue;
                        break;
                    case 'ContactEmail':
                        contactEmail = newvalue;
                        break;
                    case 'ContactPhone':
                        contactPhone = newvalue;
                        break;
                    case 'DateCreated':
                        dateCreated = newvalue;
                        break;
                    case 'DateModified':
                        dateModified = newvalue;
                        break;
                    case 'Active':
                        active = newvalue;
                        break;
                    case 'ImportSP':
                        importSP = newvalue;
                        break;
                }

                //No cells have been edited yet, so add row values to array
                if ($.isEmptyObject(editedRowValues)) {
                    editedRowValues.push({
                        bankId: bankId,
                        friendlyName: friendlyName,
                        bankName: bankName,
                        addressLine1: addressLine1,
                        addressLine2: addressLine2,
                        city: city,
                        state: state,
                        postalCode: postalCode,
                        faxNumber: faxNumber,
                        contactName: contactName,
                        contactEmail: contactEmail,
                        contactPhone: contactPhone,
                        dateCreated: dateCreated,
                        dateModified: dateModified,
                        active: active,
                        importSP: importSP
                    });
                } else {
                    //If a 1 cell has been edited already and is in array, overwrite values in array with newest change
                    editedRowValues[0].bankId = bankId;
                    editedRowValues[0].friendlyName = friendlyName;
                    editedRowValues[0].bankName = bankName;
                    editedRowValues[0].addressLine1 = addressLine1;
                    editedRowValues[0].addressLine2 = addressLine2;
                    editedRowValues[0].city = city;
                    editedRowValues[0].state = state;
                    editedRowValues[0].postalCode = postalCode;
                    editedRowValues[0].faxNumber = faxNumber;
                    editedRowValues[0].contactName = contactName;
                    editedRowValues[0].contactEmail = contactEmail;
                    editedRowValues[0].contactPhone = contactPhone;
                    editedRowValues[0].dateCreated = dateCreated;
                    editedRowValues[0].dateModified = dateModified;
                    editedRowValues[0].active = active;
                    editedRowValues[0].importSP = importSP;
                }
                            
            }
            else {
                alert('Please enter a unique Friendly Name value.');
            }
        }
    });
 });

//Edit Link
function Edit(row, event) {
    that.editrow = row;
    $("#jqxgrid").jqxGrid('beginrowedit', row);
    if (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
    }
    return false;
}

//Update Link
function Update(row, event) {
    that.editrow = -1;
    $("#jqxgrid").jqxGrid('endrowedit', row);
    var updateUrl;

    //If there are changes, make AJAX call to update row in Database
    if ($.isEmptyObject(editedRowValues) == false) {
        updateUrl = modifyBankUrl + editedRowValues[0].bankId + '/' + EncodeForMVC(editedRowValues[0].friendlyName) + '/' + EncodeForMVC(editedRowValues[0].bankName) + '/' + EncodeForMVC(editedRowValues[0].addressLine1) + '/' + EncodeForMVC(editedRowValues[0].addressLine2) + '/' + EncodeForMVC(editedRowValues[0].city) + '/' + EncodeForMVC(editedRowValues[0].state) + '/' + EncodeForMVC(editedRowValues[0].postalCode) + '/' + EncodeForMVC(editedRowValues[0].faxNumber) + '/' + EncodeForMVC(editedRowValues[0].contactName) + '/' + EncodeForMVC(editedRowValues[0].contactEmail) + '/' + EncodeForMVC(editedRowValues[0].contactPhone) + '/' + EncodeBoolForMVC(editedRowValues[0].active) + '/' + EncodeForMVC(editedRowValues[0].importSP);

        jQuery.ajax({
            url: updateUrl,
            success: function (data, obj2, obj3) {
                type: "GET";
                if (data != 0) {
                    alert('Your updates have been applied.');
                }
                else
                {
                    alert('The bank record that you entered could not be saved.  Please be sure that you have entered a unique Friendly Name value for the bank record.');
                }
            }
        });
        editedRowValues = new Array();
    } else {
        alert("No Updates were found.")
    }

    if (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
    }
    return false;
}

//Cancel Link
function Cancel(row, event) {
    that.editrow = -1;
    $("#jqxgrid").jqxGrid('endrowedit', row, true);
    if (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
    }
    return false;
}

[jaholtParticipant]

I need to add, when I click “Add New Bank” button, that adds a row to the grid, when I click on the horizontal bar to scroll over in the grid, it erases all the data I entered.

[jaholtParticipant]

Ok, I found a post here about how to do this, by using an “edit” button on the click of the grid. I’m attaching my code in case it might help someone.

Razor/Html code:

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>  
    <div class="clear"></div>      
    <br /><br />
    <input id="addrowbutton" type="button" value="Add New Bank" />

    <div style="margin-top: 30px;">            
        <div id="cellbegineditevent"></div>            
        <div style="margin-top: 10px;" id="cellendeditevent"></div>
    </div>        
    <div id="popupWindow" style="display: none;">            
        <div>Edit</div>            
        <div style="overflow: hidden;">                
            <table>                              
                <tr>                        
                    <td align="right">Friendly Name:</td>                        
                    <td align="left">    
                        <input id="BankId" type="hidden" />                          
                        <input id="ImportSP" type="hidden" />
                        <input id="DateCreated" type="hidden" />
                        <input id="DateModified" type="hidden" />
                        <input id="FriendlyName" type="text" />                        
                    </td>                    
                    <td align="right">Bank Name:</td>
                    <td align="left">
                        <input id="BankName" type="text" />
                    </td>      
                </tr>                    
                <tr>
                    <td align="right">Address Line 1:</td>
                    <td align="left">
                        <input id="AddressLine1" type="text" />
                    </td>
                    <td align="right">Address Line 2:</td>
                    <td align="left">
                        <input id="AddressLine2" type="text" />
                    </td>
                </tr>    
                <tr>
                    <td align="right">City:</td>
                    <td align="left">
                        <input id="City" type="text" />
                    </td>
                    <td align="right">State:</td>
                    <td align="left">
                        <select id="ddlState"></select>
                    </td>
                </tr>
                <tr>
                    <td align="right">Postal Code:</td>
                    <td align="left">
                        <input id="PostalCode" type="text" />
                    </td>
                    <td align="right">Fax Number:</td>
                    <td align="left">
                        <input id="FaxNumber" type="text" />
                    </td>
                </tr>
                <tr>
                    <td align="right">Contact Name:</td>
                    <td align="left">
                        <input id="ContactName" type="text" />
                    </td>
                    <td align="right">Contact Email:</td>
                    <td align="left">
                        <input id="ContactEmail" type="text" />
                    </td>
                </tr>
                <tr>
                    <td align="right">Contact Phone:</td>
                    <td align="left">
                        <input id="ContactPhone" type="text" />
                    </td>
                    <td align="right"><input type="checkbox" id="Active" value="Active"></td>
                    <td align="left">
                        Active
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 10px;" colspan="4" align="center">                            
                        <input style="margin-right: 5px;" type="button" id="Save" value="Save" />
                        <input id="Cancel" type="button" value="Cancel" />                        
                    </td>                    
                </tr>                
            </table>            
       </div>        
   </div>
</div>

js page:

var editedRowValues = [];
var banksDataUrl = apiPath + "BankInfo";
var validateAccountUrl = apiPath + "ValidateBankInfo/";
var modifyBankUrl = apiPath + "UpdateBankInfo/";

var theme = "";
jQuery(document).ready(function () {

    var stateData = '';
    jQuery.ajax({
        url: apiPath + "StateLookup",
        success: function (data, obj2, obj3) {
            stateData = data;
            $("#ddlState option").remove(); // Remove all <option> child tags.
            $("#ddlState").append(  // Append default value to the inside of the select box
                $("<option></option>")
                    .text("Select a State")
                    .val("-1")
            );
            $.each(data, function (index, item) { // Iterates through a collection
                $("#ddlState").append( // Append an object to the inside of the select box
                    $("<option></option>")
                        .text(item.FullName)
                        .val(item.Abreviation)
                );
            });
        }
    });

    var banksSource = 
    {
        datafields: [
            { name: 'BankId', type: 'number' },
            { name: 'FriendlyName', type: 'string' },
            { name: 'BankName', type: 'string' },
            { name: 'AddressLine1', type: 'string' },
            { name: 'AddressLine2', type: 'string' },
            { name: 'City', type: 'string' },
            { name: 'State', type: 'string' },
            { name: 'PostalCode', type: 'string' },
            { name: 'FaxNumber', type: 'string' },
            { name: 'ContactName', type: 'string' },
            { name: 'ContactEmail', type: 'string' },
            { name: 'ContactPhone', type: 'string' },
            { name: 'DateCreated', type: 'date' },
            { name: 'DateModified', type: 'date' },
            { name: 'Active', type: 'bool' },
            { name: 'ImportSP', type: 'string' }
        ],
        datatype: "json",
        async: true,
        url: banksDataUrl,
        updateRow: function (rowId, rowData, commit) {
            commit(true);
        }
    };

    var banksAdapter = new jQuery.jqx.dataAdapter(banksSource);

    var editrow = -1;

    //initialize jqxGrid
    jQuery("#jqxgrid").jqxGrid(
    {
        width: '100%',
        height: 365,
        source: banksAdapter,
        filterable: true,
        editable: true,
        selectionmode: 'none',
        columnsresize: true,
        enabletooltips: true,
        sortable: true,
        rowsheight: 35,
        editmode: 'selectedrow', //selectedrow
        pageable: true,
        pagerrenderer: pagerrenderer,
        altRows: true,
        ready: function () {
        },
        columns: [
            {
                text: 'Edit',
                datafield: 'Edit',
                width: 50,
                columntype: 'number',
                cellsrenderer: function () {
                    return '<div style="width: 100%">' + "<a style='color: inherit; margin-left: 50%; left: -15px; top: 7px; position: relative;' href='javascript:;'>Edit</a>" + '</div>';
                }
            },
            {
                text: 'Friendly Name',
                datafield: 'FriendlyName',
                columntype: 'textbox',
                width: 320,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Bank Name',
                datafield: 'BankName',
                columntype: 'textbox',
                width: 320,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Address 1',
                dataField: "AddressLine1",
                columntype: 'textbox',
                width: 300,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Address 2',
                datafield: 'AddressLine2',
                width: 300,
                columntype: 'textbox',
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'City',
                datafield: 'City',
                columntype: 'textbox',
                width: 225,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'State',
                datafield: 'State',
                width: 125,
                columntype: 'dropdownlist',
                createeditor: function (row, column, editor) {
                    editor.jqxDropDownList({ width: 125, height: 35, source: stateData, displayMember: 'Abreviation', valueMember: 'Abreviation' });
                }
            },
            {
                text: 'Zip Code',
                datafield: 'PostalCode',
                columntype: 'textbox',
                width: 150,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 30);
                }
            },
            {
                text: 'Fax',
                datafield: 'FaxNumber',
                columntype: 'textbox',
                width: 135,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 30);
                }
            },
            {
                text: 'Contact Name',
                datafield: 'ContactName',
                columntype: 'textbox',
                width: 250,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 100);
                }
            },
            {
                text: 'Contact Email',
                datafield: 'ContactEmail',
                columntype: 'textbox',
                width: 250,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 255);
                }
            },
            {
                text: 'Contact Phone',
                datafield: 'ContactPhone',
                columntype: 'textbox',
                width: 135,
                initeditor: function (row, column, editor) {
                    editor.attr('maxlength', 30);
                }
            },
            {
                text: 'Active',
                datafield: 'Active',
                columntype: 'checkbox',
                width: 75
            },
            {
                text: 'Date Created',
                datafield: 'DateCreated',
                columntype: 'datetimeinput',
                cellsformat: 'M/d/yyyy hh:mm tt',
                editable: false,
                width: 195
            },
            {
                text: 'Date Modified',
                datafield: 'DateModified',
                columntype: 'datetimeinput',
                cellsformat: 'M/d/yyyy hh:mm tt',
                width: 195,
                editable: false
            }
        ]
    });

    var docWidth = $(document).width();
    var docHeight = $(document).height();
    // initialize the popup window and buttons.            
    $("#popupWindow").jqxWindow(
        {
            width: docWidth - 50,
            height: docHeight - 200,
            resizable: true,
//            theme: theme,
            isModal: true,
            autoOpen: false,
            cancelButton: $("#Cancel"),
            modalOpacity: 0.01
        });

    $("#Cancel").jqxButton(
        { theme: theme });

    $("#Save").jqxButton({ theme: theme });

    $("#jqxgrid").on("cellclick", function (event) {                
        var column = event.args.column;                
        var rowindex = event.args.rowindex;                
        var columnindex = event.args.columnindex;                
        if (columnindex == 0) {                    
            // open the popup window when the user clicks a button.                    
            editrow = rowindex;                    
            var offset = $("#jqxgrid").offset();                    
            $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });                    

            // get the clicked row's data and initialize the input fields.                    
            var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);                    
            $('#BankId').val(dataRecord.BankId);
            $("#FriendlyName").val(dataRecord.FriendlyName);
            $("#BankName").val(dataRecord.BankName);
            $('#AddressLine1').val(dataRecord.AddressLine1);
            $('#AddressLine2').val(dataRecord.AddressLine2);
            $('#City').val(dataRecord.City);
            $('#ddlState').val(dataRecord.State).attr("selected", "selected");
            $('#PostalCode').val(dataRecord.PostalCode);
            $('#FaxNumber').val(dataRecord.FaxNumber);
            $('#ContactName').val(dataRecord.ContactName);
            $('#ContactEmail').val(dataRecord.ContactEmail);
            $('#ContactPhone').val(dataRecord.ContactPhone);
            $('#DateCreated').val(dataRecord.DateCreated);
            $('#DateModified').val(dataRecord.DateModified);
            $("#Active").prop("checked", dataRecord.Active);
            $('#ImportSP').val(dataRecord.ImportSP);
            
            // show the popup window.                    
            $("#popupWindow").jqxWindow('show');
        };
    });

    $('#addrowbutton').on('click', function () {
        //Fill new bank with values
        editrow = 999999999;  //Mark row as new
        var dataRecord = createRow();
        $('#BankId').val(dataRecord.BankId);
        $("#FriendlyName").val(dataRecord.FriendlyName);
        $("#BankName").val(dataRecord.BankName);
        $('#AddressLine1').val(dataRecord.AddressLine1);
        $('#AddressLine2').val(dataRecord.AddressLine2);
        $('#City').val(dataRecord.City);
        $('#ddlState').val(dataRecord.State).attr("selected", "selected");
        $('#PostalCode').val(dataRecord.PostalCode);
        $('#FaxNumber').val(dataRecord.FaxNumber);
        $('#ContactName').val(dataRecord.ContactName);
        $('#ContactEmail').val(dataRecord.ContactEmail);
        $('#ContactPhone').val(dataRecord.ContactPhone);
        $('#DateCreated').val(dataRecord.DateCreated);
        $('#DateModified').val(dataRecord.DateModified);
        $("#Active").prop("checked", dataRecord.Active);
        $('#ImportSP').val(dataRecord.ImportSP);

        // show the popup window.                    
        $("#popupWindow").jqxWindow('show');
    });

    function createRow() {
        var row = {};
        //populate default values (where applicable)
        row["BankId"] = "0";
        row["FriendlyName"] = "";
        row["BankName"] = "";
        row["AddressLine1"] = "";
        row["AddressLine2"] = "";
        row["City"] = "";
        row["State"] = "-1";
        row["PostalCode"] = "";
        row["FaxNumber"] = "";
        row["ContactName"] = "";
        row["ContactEmail"] = "";
        row["ContactPhone"] = "";
        row["DateCreated"] = new Date();
        row["DateModified"] = new Date();
        row["Active"] = true;
        row["ImportSP"] = "";
        return row;
    }

    // update the edited row when the user clicks the 'Save' button.            
    $("#Save").click(function () {
        if (editrow >= 0) {

            var row = {
                BankId: $('#BankId').val(),
                FriendlyName: $("#FriendlyName").val(),
                BankName: $("#BankName").val(),
                AddressLine1: $('#AddressLine1').val(),
                AddressLine2: $('#AddressLine2').val(),
                City: $('#City').val(),
                State: $('#ddlState :selected').val(),
                PostalCode: $('#PostalCode').val(),
                FaxNumber: $('#FaxNumber').val(),
                ContactName: $('#ContactName').val(),
                ContactEmail: $('#ContactEmail').val(),
                ContactPhone: $('#ContactPhone').val(),
                DateCreated: $('#DateCreated').val(),
                DateModifield: $('#DateModified').val(),
                Active: $('#Active').is(':checked'),
                ImportSP: $('#ImportSP').val()
            };

            var error_message = "";

            if (row.FriendlyName.trim() == "") {
                error_message += "Please enter a Friendly Name";
            }

            if (error_message == "") {
                updateUrl = modifyBankUrl + row.BankId + '/' +
                            EncodeForMVC(row.FriendlyName) + '/' +
                            EncodeForMVC(row.BankName) + '/' +
                            EncodeForMVC(row.AddressLine1) + '/' +
                            EncodeForMVC(row.AddressLine2) + '/' +
                            EncodeForMVC(row.City) + '/' +
                            EncodeForMVC(row.State) + '/' +
                            EncodeForMVC(row.PostalCode) + '/' +
                            EncodeForMVC(row.FaxNumber) + '/' +
                            EncodeForMVC(row.ContactName) + '/' +
                            EncodeForMVC(row.ContactEmail) + '/' +
                            EncodeForMVC(row.ContactPhone) + '/' +
                            EncodeBoolForMVC(row.Active) + '/' +
                            EncodeForMVC(row.ImportSP);

                jQuery.ajax({
                    url: updateUrl,
                    async: false,
                    success: function (data, obj2, obj3) {
                        type: "GET";
                        if (data != 0) {
                            $("#popupWindow").jqxWindow('hide');
                            alert('Your updates have been applied.');
                            //Refresh grid from server
                            $("#jqxgrid").jqxGrid("updatebounddata");
                            //if (editrow == 999999999) {
                            //    //refresh grid after new record is insert into database
                            //    $("#jqxgrid").jqxGrid("updatebounddata");
                            //}
                            //else {
                            //    //Existing row add values back into grid
                            //    $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                            //}
                        }
                        else {
                            alert('The bank record that you entered could not be saved.  Please be sure that you have entered a unique Friendly Name value for the bank record.');
                        }
                    }
                });
            } else {
                //Show error message
                alert(error_message);
            }
        }
    });

    $("#jqxgrid").bind("pagechanged", function (event) {
        var args = event.args;
        var pagenumber = args.pagenum;
        var pagesize = args.pagesize;
    });

    $("#jqxgrid").bind("pagesizechanged", function (event) {
        var args = event.args;
        var pagenumber = args.pagenum;
        var pagesize = args.pagesize;
    });

    var pagerrenderer = function () {
        var element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
        var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
        for (i = 0; i < paginginfo.pagescount; i++) {
            // add anchor tag with the page number for each page.                    
            var anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
            anchor.appendTo(element);
            anchor.click(function (event) {
                // go to a page.                        
                var pagenum = parseInt($(event.target).text());
                $("#jqxgrid").jqxGrid('gotopage', pagenum);
            });
        }

        return element;
    }

 });

[ivailoParticipant]

Hi jaholt,

Please try to update to the latest version(4.0.0)

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[SergioV85Participant]

Problem still exist in v.4.0.0
If you have very wide table, click on horizontal or vertical scroll will discard editing mode with all data

[ivailoParticipant]

Hi SergioV85,

Please, try this demo. The demo is with editing and scroll.
We can’t see the described behavior.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[SergioV85Participant]

It is reproducible, when grid has ‘programmatic’ editing mode
See feedle
http://jsfiddle.net/q9j48tsr/

[Peter StoevKeymaster]

From Documentation: ‘programmatic’ – Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods). Which means that beginrowedit is Invalid in this case which means that you can use only begincelledit and endcelledit. Example: how to use it http://jsfiddle.net/jqwidgets/g06j2dy2/

[SergioV85Participant]

But with editmode: 'selectedrow' I have another issue. I use grid inside splitter, with 100% width and height, and start editing should also expand splitter panel. But, after expanding grid is refreshing, and edit mode gone
See fiddle: http://jsfiddle.net/unLk6Le6/

[Peter StoevKeymaster]

Hi SergioV85,

When the widget is resized, editing stops so when you expand the splitter, the Grid’s size is changed so the editing stops. If you want to do something like that, then you must consider popup editing.

Regards,
Peter

[Author]

Posts