[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;
    }

 });

[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.

[Author]

Posts