jQuery UI Widgets Forums Grid Command column in JqxGrid

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Command column in JqxGrid #77800

    shaelynw
    Participant

    Was trying to mimic command column from jqxTable into jqxGrid.
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm#demos/jqxdatatable/javascript-datatable-command-column.htm

    But, when I clicked on the edit button on any row, jqxgrid beginrowedit was call, then the edit button is hang and did not hide.
    It looks like the particular row get repaint back original state.

    $(“#grdMaster”).jqxGrid(
    {
    width: “100%”,
    autoheight: true,
    source: dataAdapter,
    columnsresize: true,
    filterable: true,
    sortable: true,
    autoshowfiltericon: true,
    altrows: true,
    showtoolbar: true,
    showeverpresentrow: true,
    everpresentrowposition: “top”,
    editable: true,
    editmode: ‘selectedrow’,
    everpresentrowactionsmode: “columns”,
    rendered: function () {

    if ($(“.editButtons”).length > 0) {
    $(“.cancelButtons”).jqxButton();
    $(“.editButtons”).jqxButton();
    $(“.saveButtons”).jqxButton();
    var editClick = function (event) {
    var target = $(event.target);
    // get button’s value.
    var value = target.val();
    // get clicked row.
    var rowIndex = parseInt(event.target.getAttribute(‘data-row’));
    if (isNaN(rowIndex)) {
    return;
    }
    if (value == “Edit”) {
    // begin edit.
    $(“#grdMaster”).jqxGrid(‘beginrowedit’, rowIndex);
    target.parent().find(‘.editButtons’).hide();
    target.parent().find(‘.cancelButtons’).show();
    target.parent().find(‘.saveButtons’).show();

    }
    else {
    // end edit and save changes.
    target.parent().find(‘.cancelButtons’).hide();
    target.parent().find(‘.saveButtons’).hide();
    target.parent().find(‘.editButtons’).show();
    $(“#grdMaster”).jqxGrid(‘endrowedit’, rowIndex, true);

    }
    }
    $(“.editButtons”).on(‘click’, function (event) {
    editClick(event);
    });

    $(“.cancelButtons”).click(function (event) {
    // end edit and cancel changes.
    var rowIndex = parseInt(event.target.getAttribute(‘data-row’));
    if (isNaN(rowIndex)) {
    return;
    }

    var target = $(event.target);
    target.parent().find(‘.cancelButtons’).hide();
    target.parent().find(‘.saveButtons’).hide();
    target.parent().find(‘.editButtons’).show();
    $(“#grdMaster”).jqxGrid(‘endrowedit’, rowIndex, true);
    });
    }
    },

    columns: [
    {
    text: ‘Code’, datafield: ‘LANG_GRP_ID’, width: “10%”, editable: true,
    createeditor: createGridEditor, initeditor: initGridEditor, geteditorvalue: gridEditorValue
    },
    {
    text: ‘Edit’, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    // render custom column.
    return “<button data-row='” + row + “‘ class=’editButtons’>Edit</button><button style=’display: none; margin-left: 5px;’ data-row='” + row + “‘ class=’saveButtons’>Save</button><button style=’display: none; margin-left: 5px;’ data-row='” + row + “‘ class=’cancelButtons’>Cancel</button>”;

    }
    },
    ]
    });

    }

    Command column in JqxGrid #77841

    Hristo
    Participant

    Hello shaelynw,

    Please, take a look this example.
    Could You find in ‘Mobile Demos’.

    Best Regards,
    Hristo Hristov

    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.