jQuery UI Widgets › Forums › Grid › Command column in JqxGrid
Tagged: beginrowedit, jqxgrid
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 9 years, 3 months ago.
-
Author
-
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.htmBut, 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>”;}
},
]
});}
Hello shaelynw,
Please, take a look this example.
Could You find in ‘Mobile Demos’.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.