Grid Row editing

[shyanParticipant]

Hello,

I am trying to create a new row with the button click event as column type is checkbox, I am unable to create the checkbox while creating new row.

`function getDataComplete(data) {
if (data) {
var source =
{ datatype: “array”,
datafields: [
{ name: ‘code’, type: ‘string’ },
{ name: ‘number’, type: ‘string’ },
{ name: ‘work’, type: ‘boolean’ },
{ name: ‘primary’, type: ‘boolean’ }
],
localdata: data
};

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

$scope.GridSettings =
{
altrows: true,
width: 1100,
autoheight: true,
rendertoolbar: function (toolbar) {
var container = $(“<div style=’margin: 5px;’></div>”);
var submitButton = $(“<button style=’margin-right: 5px;’>Add Phone Number</button>”);
toolbar.append(container);
container.append(submitButton);
submitButton.click(function (event) {

var row = {code: null, number: null,work: true, primary: true };

var commit = $(“#jqxgrid1”).jqxGrid(‘addrow’, null, row, ‘last’);

var rows = $(‘#jqxgrid1’).jqxGrid(‘getrows’);
});
},
sortable: true,
pageable: true,
selectionmode: ‘none’,
editmode: ‘selectedrow’,
source: dataAdapter,
editable: true,
showToolbar: true,
columns: [
{ text: ‘Country Code’, columntype: ‘textbox’, datafield: ‘code’, width: 100},
{ text: ‘Primary’, columntype: ‘checkbox’, datafield: ‘work’, width: 100 },
{ text: ‘Fax’, columntype: ‘checkbox’, datafield: ‘primary’, width: 100 },
{
text: ‘Action’, filterable: false, align: “center”, editable: false, sortable: false, datafield: ”, width: 300,
cellsrenderer: function (row, column, value) {
var eventNam = “ng-click”;

if ((row === $scope.editrow) && $scope.out === false) {
return “<button ” + eventNam + “=’updateGrid(” + row + “, $event)’style=’color: inherit; margin-left: 40%; left: -15px; top: 7px; position: relative;width:80px’ data-row='” + row + “‘>Update</button><button ” + eventNam + “=’Cancel(” + row + “, $event)’ style=’margin-left: 5px; left: -15px; top: 7px; position: relative;width:80px ‘ data-row='” + row + “‘>Cancel</button>”;
}
else {
if (row === $scope.lastRow) {

return “<button ” + eventNam + “=’Save(” + row + “, $event)’ style=’margin-left: 40%; left: -15px; top: 7px; position: relative;width:80px ‘ data-row='” + row + “‘>Save</button>” +
“<button ” + eventNam + “=’Delete(” + row + “, $event)’ style=’margin-left: 5px; left: -15px; top: 7px; position: relative;width:80px ‘ data-row='” + row + “‘>Cancel</button>”;
} else {
debugger;

return “<button ” + eventNam + “=’editGrid(” + row + “, $event)’ style=’color: inherit; margin-left: 40%; left: -15px; top: 7px; position: relative;width:80px’ data-row='” + row + “‘ class=’editButtons’>Edit</button>” +
“<button ” + eventNam + “=’Delete(” + row + “, $event)’ style=’margin-left: 5px; left: -15px; top: 7px; position: relative;width:80px ‘ data-row='” + row + “‘>Delete</button>”;
}}
}}
]};

[ChristopherParticipant]

Hi shyan,

I made a demo using your code with my own data since you didn’t provide yours and all seems fine. Here it is:
https://www.jseditor.io/?key=xb-angular-jqxgrid-demo

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts