jQWidgets Forums

Tagged: add row, addrow, angular grid, cellsrenderer, column, delete row, deleterow, grid, Header, jqgrid, jquery grid, jqxgrid, jqxwidgets, renderer

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.

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

Author

custom grid needed urgently. Posts
July 2, 2015 at 11:44 pm custom grid needed urgently. #73311

ashwin prabhu
Participant

Hello,

This is with reference to the below link
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?classic

This link has add row and delete row button placed at the top. I have modified the code like this

1) Instead of delete row at the top, whenever user creates a new row, he will get an option of deleting it. I have placed a Delete Row tab at the end of each row. A seperate column is prepared for this. so that works fine.

Now, i need to insert an image for that delete row tab. So it becomes visual to the user that it is meant for deleting the row.

2) Instead of placing the “Add row” at the top, i want to place it to the end of the header section. how can i place the Add row button at the header of the table ?

Heres an example, how i want to do it. As per the link

First Name-|-Last Name-|-Product-|-Quantity-|Unit Price-|-Total-|”Add Row”
sanjeev—-|–rao——| 1233 | 23 | 34.4$ | 345 |”Delete Row”
anandic—-|–dev——|–42—–|-22——-|-3.43$—–|-545—|”Delete Row”

The first row is the column headers and the next 2 rows are data. This row has dynamically delete row option added at the end. I need to place an image over ther instead of the delete row button. And in the column header at the end, i need to place there the Add Row option. So when the user clicks on Add row option, a new row is inserted at the top.

here is my code. Please help !!!

<html>
<head>
<script src=”../jquery-1.9.1/jquery-1.9.1.js”></script>
<script src=”../bootstrap-3.1.1-dist/js/bootstrap.min.js”></script>
<!———————–>
<!– jqWidgets plugins –>
<link rel=”stylesheet” href=”../jqwidgets-ver3.5.0/jqwidgets/styles/jqx.base1.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqwidgets-ver3.5.0/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”../jqwidgets-ver3.5.0/jqwidgets/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var url = ‘../grid.csv’;
var Id_Type = [“Country”, “Sector”,”Industry”, “Sedol”];
var source =
{
datatype: “csv”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
},

datafields: [
{ name: ‘Order’, type: ‘number’ },
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Comment’, type: ‘string’ },
{ name: ‘Id_Type’, type: ‘string’ },
{ name: ‘Ub Factor?’, type: ‘bool’ },
{ name: ‘Ub Action’, type: ‘string’ },
{ name: ‘Lb Factor?’, type: ‘bool’ },
{ name: ‘Lb Action’, type: ‘string’}
],
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 960,
height: 600,
ready: function () {
$(“#jqxgrid”).jqxGrid(‘selectrow’, 1);
},

editable: true,
source: dataAdapter,
columnsresize: true,
sortable:true,

columns: [
{ text: ‘Order’,columntype: ‘textbox’, datafield: ‘Order’, width: 50,
validation: function (cell, value) {
if (isNaN(value)){
return { result: false, message: “Please enter numbers” };
}
if (value == “”){
return { result: false, message: “Please dont leave blank” };
}
return true;
}
},
{ text: ‘Id’,columntype: ‘textbox’, datafield: ‘Id’, width: 70,
validation: function (cell, value) {
if (isNaN(value)){
return { result: false, message: “Please enter numbers” };
}
if (value == “”){
return { result: false, message: “Please dont leave blank” };
}
return true;
}
},
{ text: ‘Comment’, columnsresize: true, columntype: ‘textbox’, datafield: ‘Comment’, width: 130 },
{ text: ‘Id_Type’,columntype: ‘dropdownlist’, datafield: ‘Id_Type’, width: 80 },
{ text: ‘Ub Factor?’, columntype: ‘checkbox’, datafield: ‘Ub Factor?’, width: 90 },
{ text: ‘Ub Action’, columnsresize: true, columntype: ‘textbox’, datafield: ‘Ub Action’, width: 150 },
{ text: ‘Lb Factor?’, columntype: ‘checkbox’, datafield: ‘Lb Factor?’, width: 90 },
{ text: ‘Lb Action’, columnsresize: true, columntype: ‘textbox’, datafield: ‘Lb Action’, width: 170 },
{ text: ‘Delete Row?’, datafield: ‘Delete’, columntype: ‘button’, cellsrenderer: function () {
return “X”;
}, 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) + 360, y: parseInt(offset.top) + 60} });
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},

]
});

$(“#csvExport”).jqxButton();
$(“#pdfExport”).jqxButton();
$(“#addrowbutton”).jqxButton();
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
$(“#pdfExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘pdf’, ‘jqxGrid’);
});

$(“#addrowbutton”).on(‘click’, function () {
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, {}, ‘first’);
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 300, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: .2});
$(“#del”).jqxButton();
$(“#cancel”).jqxButton();
$(“#del”).click(function () {
$(‘#jqxgrid’).jqxGrid(‘deleterow’, id);
$(“#popupWindow”).jqxWindow(‘hide’);
});
$(“#cancel”).click(function () {
$(“#popupWindow”).jqxWindow(‘hide’);
});

});
</script>
<style>
.default{
margin:115px 0 0 550px;
}
</style>
</head>
<body class=’default’>
<div style=’margin-left: 700px; float: left;’>
<input type=”button” value=”Add New Row” id=’addrowbutton’ />
</div>
<br><br>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid” style=”float: left;”></div>
<div style=’margin-top: 20px;’>
<div style=’margin-left: 370px; float: left;’>
<br><br>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<br><br>
<input type=”button” value=”Export to PDF” id=’pdfExport’ />
</div>
<div id=”cellbegineditevent”>
</div>
<div style=”margin-top: 10px;” id=”cellendeditevent”>
</div>
</div>
<div id=”popupWindow”>
<div>
X
</div>
<div style=”overflow: hidden;”>
<p>
Do you want to permanently delete this?
</p>
<button id=”del”>
Yes</button>
<button id=”cancel”>
No</button>
</div>
</div>
</div>
</body>
</html>

July 3, 2015 at 8:26 am custom grid needed urgently. #73325
Dimitar
Participant
Hello ashwin prabhu,
1. This can be done via cellsrenderer, as shown in the demo Image Column.
2. You can modify the header with the callback function renderer, e.g.:http://jsfiddle.net/Dimitar_jQWidgets/yb8hjmnz/.
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 5, 2015 at 12:13 am custom grid needed urgently. #73356

ashwin prabhu
Participant

Hi Dimitar/ Team,

Couldnt thank you much for the efforts you put in to help us solve our issues. God bless…

Regards,
Ashwin

July 6, 2015 at 6:06 pm custom grid needed urgently. #73413

ashwin prabhu
Participant

Hi Dimitar,

One strange thing i noticed in the jsfiddle link which you created.

http://jsfiddle.net/Dimitar_jQWidgets/yb8hjmnz/

When i click on the left side of the tab of ‘Add row’, the row gets added and it works fine.

but when i click on the right side part of the ‘Add row’ tab, it doesnot initiate a new row. The tab functionality doesnt work. It is kinda strange. It shows the same error when i do it at my local machine.

July 6, 2015 at 9:26 pm custom grid needed urgently. #73423

ashwin prabhu
Participant

Hi Dimitar,

We can ignore the earlier message. I have replaced the Add row header with an image. Now, when i click on Image, the new row is added.

I am not able to do the same with the columns of that header. If i remove columntype: ‘button’ option, then i can see the image specified with imagerenderer. But when i add columntype: ‘button’, the image doesnot show up. It just displays

It means it displays whatever is inside the return statement of imagerenderer.

How can i show column as image and clickable. So when i click on image of “delete”, the row would get deleted.

Here is the concerned code:
var imagerenderer = function (row, datafield) {
return ‘‘;
}

{ text: ‘Delete Row?’, sortable:false, datafield: ‘Delete’,
renderer: function () {
return ‘<button id=add onclick=”addrow()”></button>’;
},
columntype: ‘button’,
cellsrenderer: imagerenderer, 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) + 360, y: parseInt(offset.top) + 60} });
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},

July 8, 2015 at 8:35 am custom grid needed urgently. #73514

Dimitar
Participant

Hi Ashwin,

You can either have an image column (via imagerenderer) or a button column (columntype: 'button'), but not both.

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.