jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by ivailo 9 years, 8 months ago.

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

Author

help in adding delete button and selectring row Posts

August 6, 2015 at 5:57 am help in adding delete button and selectring row #74563

Participant

hello,i need a help in adding the delete button to my grid.i am just a newbee in jquery so forgive me if i had made a mistake.i have added the code from above solution,i could get a column named ‘delete’ but cant find the button in the column for delete.also each time i click the rows to select it,only one row is selected and even when i click other rows only the first selected row remains selected. thanks in advance.

My code:

<!DOCTYPE html>

<html lang=”en”>
<head>
<!– The jQuery library is a prerequisite for all jqSuite products –>
<script type=”text/ecmascript” src=”jquery-1.11.0.min.js”></script>
<!– This is the Javascript file of jqGrid –>
<script type=”text/ecmascript” src=”jquery.jqGrid.min.js”></script>
<!– This is the localization file of the grid controlling messages, labels, etc.
<!– We support more than 40 localizations –>
<script type=”text/ecmascript” src=”grid.locale-en.js”></script>
<script type=”text/javascript” src=”jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqxgrid.selection.js”></script>
<!– A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom –>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”jquery-ui.css” />
<!– The link to the CSS that the grid needs –>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid.css” />

<link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid-bootstrap-ui.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid-bootstrap.css” />
<meta charset=”utf-8″ />
<title>jqGrid Loading Data – JSON</title>
</head>
<body>

<div class=”container-fluid”>
<div class=”row well”>
<h3 class=”heading” style=”margin-left:10px;”>Dashboard</h3>
<br>
<br>
<table id=”application-list” style=”">
<script type=”text/javascript”>

var applicationGrid = $(“#application-list”),
myData = [];

applicationGrid.jqGrid({
datatype: “local”,
data: myData,
colNames: ['id', 'Product', 'qty', 'free','Delete'],
colModel: [
{ name: 'id', hidden: true },
{ name: 'Product', width: 750 },
{ name: 'Qty', width: 200 ,align: 'center' },
{ name: 'Free', width: 200, align: 'center' },
{ text: 'Delete', datafield: 'Delete', columntype: 'button', cellsrenderer: function () {
return "Delete row";
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
id = $("#jqxgrid").jqxGrid('getrowid', row);
var offset = $("#jqxgrid").offset();
$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60}

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

],
rowNum: 10,
rowList: [5, 10, 20],
pager: ‘#application-list-pager’,
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: ‘created_at’,
viewrecords: true,
sortorder: ‘desc’,
autowidth: true,
height: ‘auto’,
caption: ‘Ordered Products’,

});
$(“#popupWindow”).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton:

$(“#Cancel”), modalOpacity: 0.01 });
$(“#del”).jqxButton({ theme: theme });
$(“#cancel”).jqxButton({ theme: theme });
$(“#del”).click(function () {
$(‘#jqxgrid’).jqxGrid(‘deleterow’, id);
$(“#popupWindow”).jqxWindow(‘hide’);
});
$(“#cancel”).click(function () {
$(“#popupWindow”).jqxWindow(‘hide’);
});

$(window).on(“resize”, function () {
var newWidth = $(“#application-list”).closest(“.ui-jqgrid”).parent().width();
applicationGrid.jqGrid(“setGridWidth”, newWidth, true);
});

function addRow(){
jQuery(“#application-list”).addRowData(“3″, {id:”0″,Product: $(“#Pro”).val(),Qty:$(“#qty”).val(),Free:”0″});

}

</script>
</table>
<div id=”application-list-pager”>
</div>
<br>
</div>
</div>
<div style=”display: inline-block;”>
Product : <input type=”text” id=”Pro” size=”35%” >
Qty : <input type=”text” id=”qty” size =”15%”>
<input type=”submit” id =”btn” onclick=”addRow()” value=”Add” >
</div>
</body>
</html>

August 6, 2015 at 8:00 am help in adding delete button and selectring row #74565

ivailo

Participant

Hi mailstoakhil,

We recommend usage of jqwidgets about all needed elements.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

August 6, 2015 at 8:34 am help in adding delete button and selectring row #74566

mailstoakhil

Participant

HI Ivailo Ivanov,I didnt understand what u told.Can you provide me with a solution in my code?

August 7, 2015 at 8:33 am help in adding delete button and selectring row #74607

ivailo

Participant

Hi mailstoakhil,

You uses jqgrid. Instead you can use jqxGrid.
Usage of widgets, that are part of the same framework means better compatibility and avoid a lot of problems.

If you want to integrate our widgets this article will be helpful for you.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.