jQWidgets Forums
jQuery UI Widgets › Forums › DataTable › hiperlink at renderer and checkbox at editor in datatable
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 2 months ago.
-
Author
-
I want html component at editor. Hyperlink on rendrer.
i have read datatable cannot support checkbox. i dont want checkbox when component render. when click on edit button, checkbox at status.
if it is not possible then please help me to create grid with this example. i wand command button in grid line and add button at top of the grid.
<script type=”text/javascript”>
var that = this;
$(document).ready(function () {
var departmentList = ‘${departmentList}’;
var departmentList =
{
dataFields: [
{ name: ‘departmentId’, type: ‘int’ },
{ name: ‘departmentName’, type: ‘string’ },
{ name: ‘status’, type: ‘bool’ }
],
localData: departmentList,
dataType: “json”,
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);
},
updateRow: function (rowID, rowData, commit) {
alert(“rowID”+rowID)
var jsonToBeSend=new Object();
//”{\”departmentId\”:”+rowData.departmentId+”,\”departmentName\”:\””+rowData.departmentName+”\”,\”createdBy\”:1,\”modifiedBy\”:1,\”status\”:”+rowData.status+”}”;
if (rowData.departmentId != “” || rowData.departmentId != null){
jsonToBeSend[“departmentId”] = rowData.departmentId;
}
jsonToBeSend[“departmentName”] = rowData.departmentName;
jsonToBeSend[“createdBy”] = 1;
jsonToBeSend[“modifiedBy”] = 1;
jsonToBeSend[“status”] = rowData.status;$.ajax({
url: “/BusinessReimbursment/addDepartment”,
type: ‘POST’,
dataType: ‘json’,
data: JSON.stringify(jsonToBeSend),
async: false,
beforeSend: function(xhr) {
xhr.setRequestHeader(“Accept”, “application/json”);
xhr.setRequestHeader(“Content-Type”, “application/json”);
},
success: function(data) {
$(“#dataTable”).jqxDataTable(‘setCellValue’, rowID, ‘departmentId’,’20’);
commit(true);
},
error:function(data) {
// alert(“error: “+data);
commit(false);
}
});
// 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 failed.},
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);
}
};
var dataAdapter = new $.jqx.dataAdapter(departmentList, {
loadComplete: function () {
// data is loaded.
}
});
this.editrow = -1;$(“#dataTable”).jqxDataTable(
{
width: 850,
source: dataAdapter,
pageable: true,
sortable: true,
altRows: true,
editable: true,
showToolbar: true,
editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
// called when jqxDataTable is going to be rendered.
rendering: function()
{
// destroys all buttons.
if ($(“.editButtons”).length > 0) {
$(“.editButtons”).jqxButton(‘destroy’);
}
if ($(“.cancelButtons”).length > 0) {
$(“.cancelButtons”).jqxButton(‘destroy’);
}
},renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (theme == “”) return className;
return className + ” ” + className + “-” + theme;
}
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
var updateButtons = function (action) {
switch (action) {
case “Select”:
addButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Unselect”:
addButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Edit”:
addButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: false });
updateButton.jqxButton({ disabled: false });
break;
case “End Edit”:
addButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
}
}
var rowIndex = null;
$(“#dataTable”).on(‘rowSelect’, function (event) {
var args = event.args;
rowIndex = args.index;
updateButtons(‘Select’);
});
$(“#dataTable”).on(‘rowUnselect’, function (event) {
updateButtons(‘Unselect’);
});
$(“#dataTable”).on(‘rowEndEdit’, function (event) {
updateButtons(‘End Edit’);
});
$(“#dataTable”).on(‘rowBeginEdit’, function (event) {
updateButtons(‘Edit’);
});
addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
// add new empty row.
$(“#dataTable”).jqxDataTable(‘addRow’, null, {}, ‘first’);
// select the first row and clear the selection.
$(“#dataTable”).jqxDataTable(‘clearSelection’);
$(“#dataTable”).jqxDataTable(‘selectRow’, 0);
// edit the new row.
$(“#dataTable”).jqxDataTable(‘beginRowEdit’, 0);
updateButtons(‘add’);
}
});
cancelButton.click(function (event) {
if (!cancelButton.jqxButton(‘disabled’)) {
// cancel changes.
var value = $(“#dataTable”).jqxDataTable(‘getCellValue’, rowIndex, ‘departmentId’);
if(value==null){
$(“#dataTable”).jqxDataTable(‘deleteRow’, rowIndex);
}
$(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex, true);
}
});
updateButton.click(function (event) {
if (!updateButton.jqxButton(‘disabled’)) {
// save changes.$(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex, false);
}
});
},
// called when jqxDataTable is rendered.
rendered: function () {
if ($(“.editButtons”).length > 0) {
$(“.cancelButtons”).jqxButton();
$(“.editButtons”).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.
$(“#dataTable”).jqxDataTable(‘beginRowEdit’, rowIndex);
target.parent().find(‘.cancelButtons’).show();
target.val(“Save”);
}
else {// end edit and save changes.
target.parent().find(‘.cancelButtons’).hide();
target.val(“Edit”);
$(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex);
}
}
$(“.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 value = $(“#dataTable”).jqxDataTable(‘getCellValue’, rowIndex, ‘departmentId’);
if(value==null){
$(“#dataTable”).jqxDataTable(‘deleteRow’, rowIndex);
}
$(“#dataTable”).jqxDataTable(‘endRowEdit’, rowIndex, true);
});
}
},
pagerButtonsCount: 8,
columns: [
{ text: ‘Department ID’, editable: false, dataField: ‘departmentId’, width: 200 },
{ text: ‘Department Name’, dataField: ‘departmentName’, width: 200,
validation: function (cell, value) {
if (value==””) {
return { result: false, message: “Department can not empty.” };
}else
return true;
}
},
{ text: ‘Status’, dataField: ‘status’, width: 170,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
var inputElement = $(“<input style=’padding-left: 4px; border: none;’/>”).appendTo(editor);
inputElement.jqxInput({ source: getEditorDataAdapter(‘status’), displayMember: “status”, width: width, height: height });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var inputField = editor.find(‘input’);
inputField.val(cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.find(‘input’).val();
}
},
{
text: ‘Edit’, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
// render custom column.
var departmentId=this.owner.source.records[row][‘departmentId’];
if(departmentId==null){
return “<button data-row='” + row + “‘ class=’editButtons’>Save</button><button margin-left: 5px;’ data-row='” + row + “‘ class=’cancelButtons’>Cancel</button>”;
}
return “<button data-row='” + row + “‘ class=’editButtons’>Edit</button><button style=’display: none; margin-left: 5px;’ data-row='” + row + “‘ class=’cancelButtons’>Cancel</button>”;
}
}
]
});
});
</script>
</head>
<body class=’default’>
<div id=”dataTable”>
</div>
</body>Hi Chaitanya,
Commands buttons are demonstrated on this page: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-command-column.htm?arctic.
Checkbox editors however are not available in jqxDataTable.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comhi,,
i have seen this example and i have made above code by customizing this example.
but the problem is that datatable does not support checkbox and html component(Not confirm).
so i need checkbox at editor not at a time of rendering.
so can u help me to get above example in grid.Hi Chaitanya,
We don’t have checkbox editor built-in this widget. I pointed this out in my previous post.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comhi,
Can u help me create grid with command button. I have taken reference from above link which have provided..
but it not working.`<!DOCTYPE html>
<html lang=”en”>
<%@ taglib prefix=”form” uri=”http://www.springframework.org/tags/form”%>
<%@ taglib prefix=”spring” uri=”http://www.springframework.org/tags”%>
<head>
<title id=’Description’>In order to enter in edit mode, select a grid row, then “Click” or press the “F2” key. To cancel the editing, press the “Esc” key. To save
the changes press the “Enter” key or select another Grid row.</title>
<link rel=”stylesheet” href=<spring:url value=”/jqwidgets/styles/jqx.base.css”/> type=”text/css” />
<script type=”text/javascript” src=<spring:url value=”/scripts/jquery-1.11.1.min.js”/> ></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcore.js”/> ></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdata.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxbuttons.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxscrollbar.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxmenu.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.edit.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.selection.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxlistbox.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdropdownlist.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcheckbox.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcalendar.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxnumberinput.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdatetimeinput.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/globalization/globalize.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/scripts/demos.js”/>></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = ‘${departmentList}’;
var source =
{
localdata: data,
datatype: “json”,
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);
},
dataFields: [
{ name: ‘departmentId’, type: ‘int’ },
{ name: ‘departmentName’, type: ‘string’ },
{ name: ‘status’, type: ‘bool’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
editable: true,
selectionmode: ‘singlerow’,
// editmode: ‘selectedrow’,
// editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
/*rendering: function()
{
alert(“rendering”)
// destroys all buttons.
if ($(“.editButtons”).length > 0) {
$(“.editButtons”).jqxButton(‘destroy’);
}
if ($(“.cancelButtons”).length > 0) {
$(“.cancelButtons”).jqxButton(‘destroy’);
}
},*/ Not availablle in grid so that commented
// called when jqxDataTable is going to be rendered.rendered: function () {
alert(“rendere”)
if ($(“.editButtons”).length > 0) {
$(“.cancelButtons”).jqxButton();
$(“.editButtons”).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.
target.parent().find(‘.cancelButtons’).show();
target.val(“Save”);
$(“#jqxgrid”).jqxGrid(‘beginRowEdit’, rowIndex);
}
else {
// end edit and save changes.
target.parent().find(‘.cancelButtons’).hide();
target.val(“Edit”);
$(“#jqxgrid”).jqxGrid(‘endRowEdit’, rowIndex);
}
}
$(“.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;
}
$(“#jqxgrid”).jqxGrid(‘endRowEdit’, rowIndex, true);
});
}
},
pagerButtonsCount: 8,
columns: [
{ text: ‘Department Id’, columntype: ‘textbox’, datafield: ‘departmentId’, width: 80 },
{ text: ‘Department Name’, datafield: ‘departmentName’, columntype: ‘textbox’, width: 80 },
{ text: ‘Status’, columntype: ‘checkbox’, datafield: ‘status’, width: 195 },
{
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=’cancelButtons’>Cancel</button>”;
}
}]
});});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”></div></body>
</html>Hi Chaitanya,
The link is about jqxDataTable, not jqxGrid. jqxGrid has such demo available in the Mobile demos.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.