jQuery UI Widgets Forums Grid Grid: selectively enable row for editing

This topic contains 4 replies, has 2 voices, and was last updated by  SJ 9 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Grid: selectively enable row for editing #61614

    SJ
    Participant

    Please help me, how to make selected row editable instead of whole grid editable on button click event. Also, I want to make sure user save the changed row information or cancel the changes before jump to another row.

    Thanks in advance,
    Shweta

    Grid: selectively enable row for editing #61646

    Dimitar
    Participant

    Hello Shweta,

    You can disable or enable the editing of rows conditionally as shown in the demo Disable Editing of Rows. On a button click, you may change the rows in the condition (thus changing which rows are editable or not).

    If you wish to programmatically start editing the selected row, then call beginrowedit (with parameter the selected row’s index). To end the editing, call the method endrowedit. If its second parameter is false, the changes are saved, if true, the changes are canceled. Please read more in jqxGrid’s API Documentation.

    Best Regards,
    Dimitar

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

    Grid: selectively enable row for editing #61697

    SJ
    Participant

    Thank You Dimitar.
    I made progress but stuck with cancelling the changes. Your help is appreciated.

    I am trying to do the same functionality in grid like Inline editing TreeGrid

    I am able to enable or disable the row based on user selection. Now the problem is in Cancel button functionality, when user press cancel button, only the recent cell changes reverted back and not the whole row changes or multiple cell changes for the enabled/edited row.

    Please let me know what I need to change.

    Here is my code:

    <head>
    <script type=”text/javascript”>
    $(document).ready(function () {

    var editrow = -1;
    var getAdapter = function () {
    var url = “allLookup?pageType=users”;
    var source =
    {
    dataType : “json”,
    url : url,
    datafields:
    [
    { name: ‘userID’, type: ‘string’ },
    { name: ‘name’, type: ‘string’ },
    { name: ’email’, type: ‘string’ },
    { name: ‘phone’, type: ‘string’ },
    { name: ‘status’, type: ‘string’ },
    ] ,

    updaterow: function (rowid, newdata, commit) {
    var oldData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, rowid);
    alert(oldData.name+” rowid “+rowid +” oldData.userID “+oldData.userID);
    commit(true);
    },
    deleteRow : function(rowid) {
    var data = “UserId=” + rowid;
    $.ajax({
    dataType : ‘json’,
    url : ‘removeUser.do’,
    data : data,
    success : function(data, status, xhr) {
    commit=true;
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’);
    }
    });

    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    return dataAdapter;
    }
    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties,rowData) {

    if (rowData.status == (‘Inactive’)) {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: red;”>’ + value + ‘</span>’;
    }
    else {
    return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: green;”>’ + value + ‘</span>’;
    }
    }

    var cellbeginedit = function (row, datafield, columntype, value) {
    if (row == editrow)
    return true;
    else
    return false;
    }

    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    altrows: true,
    source: getAdapter(),
    sortable: true,
    editable: true,
    enabletooltips: true,
    showToolbar: true,
    renderToolbar: function(toolBar)
    {
    var toTheme = function (className) {
    if (theme == “”) return className;
    return className + ” ” + className + “-” + theme;
    }

    var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
    var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
    var addButton = $(buttonTemplate);
    var editButton = $(buttonTemplate);
    var deleteButton = $(buttonTemplate);
    var cancelButton = $(buttonTemplate);
    var updateButton = $(buttonTemplate);
    container.append(addButton);
    container.append(editButton);
    container.append(deleteButton);
    container.append(cancelButton);
    container.append(updateButton);
    toolBar.append(container);
    addButton.jqxButton({cursor: “pointer”, enableDefault: false, disabled: true, height: 25, width: 25 });
    addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
    addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
    editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
    editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
    deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
    deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
    updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
    updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
    cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
    cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
    var updateButtons = function (action) {
    switch (action) {
    case “Select”:
    addButton.jqxButton({ disabled: false });
    deleteButton.jqxButton({ disabled: false });
    editButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    case “Unselect”:
    addButton.jqxButton({ disabled: true });
    deleteButton.jqxButton({ disabled: true });
    editButton.jqxButton({ disabled: true });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    case “Edit”:
    addButton.jqxButton({ disabled: true });
    deleteButton.jqxButton({ disabled: true });
    editButton.jqxButton({ disabled: true });
    cancelButton.jqxButton({ disabled: false });
    updateButton.jqxButton({ disabled: false });
    break;
    case “End Edit”:
    addButton.jqxButton({ disabled: false });
    deleteButton.jqxButton({ disabled: false });
    editButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    }
    }
    var rowKey = null;
    $(“#jqxgrid”).on(‘rowselect’, function (event) {
    if (cancelButton.jqxButton(‘disabled’) || updateButton.jqxButton(‘disabled’)) {
    var args = event.args;
    rowKey = args.rowindex;
    var rowData = args.row;
    updateButtons(‘Select’);
    }
    });

    addButton.click(function (event) {
    if (!addButton.jqxButton(‘disabled’)) {
    $(“#jqxwindow”).jqxWindow(‘open’);
    }
    });
    cancelButton.click(function (event) {
    if (!cancelButton.jqxButton(‘disabled’)) {
    $(“#jqxgrid”).jqxGrid(‘endrowedit’, rowKey, true); // if true, the changes are canceled.
    editrow=-1;
    updateButtons(‘Unselect’);
    }
    });
    updateButton.click(function (event) {//save changes
    if (!updateButton.jqxButton(‘disabled’)) {
    // $(“#jqxgrid”).jqxGrid(‘endrowedit’, rowKey, false);//is false, the changes are saved
    var datarow;
    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    var commit = $(“#jqxgrid”).jqxGrid(‘updaterow’, id, datarow);
    // $(“#jqxgrid”).jqxGrid(‘ensurerowvisible’, selectedrowindex);
    }
    editrow=-1;
    updateButtons(‘Unselect’);
    }
    });
    editButton.click(function () {
    if (!editButton.jqxButton(‘disabled’)) {
    // $(“#jqxgrid”).jqxGrid(‘beginrowedit’, rowKey);
    updateButtons(‘Edit’);
    editrow=rowKey;
    }
    });
    deleteButton.click(function () {
    if (!deleteButton.jqxButton(‘disabled’)) {
    var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’),
    selectedRowIndex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’),
    selectedRow = rows[selectedRowIndex];
    if( confirm(“Are you sure you wish to delete the row with index ‘” + selectedRow.userID + “‘?”)) {
    $(‘#jqxgrid’).jqxGrid(‘deleterow’, selectedRow.userID );
    }

    }
    });

    $(“#jqxgrid”).on(‘endrowedit’, function (event) {
    updateButtons(‘End Edit’);

    });
    },

    columns: [
    { text: ‘User ID’, columntype: ‘textbox’, datafield: ‘userID’, width: 120, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit,editable:false},
    { text: ‘Name’, datafield: ‘name’, width: 120, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit },
    { text: ‘Email’, datafield: ’email’, width: 170, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit},
    { text: ‘Phone’, datafield: ‘phone’, columntype: ‘textbox’, width: 125, cellsrenderer: cellsrenderer ,cellbeginedit: cellbeginedit/* ,
    initeditor: function (row, cellvalue, editor) {
    editor.jqxMaskedInput({ width: ‘250px’, height: ’25px’, mask: ‘(###)###-####’ });
    } */
    },
    { text: ‘Status’, datafield: ‘status’, width: 85, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit}
    ]
    });

    });

    </script>
    </head>
    <body class=’default’>
    <div id=”jqxgrid”>
    </div>

    </body>
    </html>

    Grid: selectively enable row for editing #61740

    Dimitar
    Participant

    Hi Shweta,

    You may need to set the grid’s editmode property to “selectedrow”, as in the demo Full Row Edit.

    Best Regards,
    Dimitar

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

    Grid: selectively enable row for editing #61770

    SJ
    Participant

    Thank you very much Dimitar for quick reply and helping me. It worked.

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

You must be logged in to reply to this topic.