jQWidgets Forums
jQuery UI Widgets › Forums › DataTable › checkbox as column
Tagged: datatable control
This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 11 years ago.
-
Authorcheckbox as column Posts
-
how can i display checkbox as one of the columns in datatable?
Hi jahnvi25,
There is no such column in the DataTable. Please, look at the supported features: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comi tried adding checkbox as cellrenderer..and its working on normal browser.. but does not work on mobile browser.. any reason why ?
below is the code<!DOCTYPE html>
<html lang=”en”>
<head>
<meta content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no” name=”viewport”/>
<meta name=”msapplication-tap-highlight” content=”no” />
<title id=’Description’>JavaScript DataTable – Mobile Example
</title>
<!–<link rel=”stylesheet” href=”../styles/demo.css” type=”text/css” /> –>
<link type=”text/css” href=”js/libs/jqwidgets/styles/jqx.base.css” rel=”stylesheet”>
<link type=”text/css” href=”js/libs/jqwidgets/styles/custom.css” rel=”stylesheet”>
<!–
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.windowsphone.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.blackberry.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.mobile.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.android.css” type=”text/css” /> –>
<script type=”text/javascript” src=”js/libs/jquery/jquery.js”></script><script type=”text/javascript” src=”js/libs/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets/jqxdatatable.js”></script>
<!–<script type=”text/javascript” src=”../simulator.js”></script> –>
<script type=”text/javascript” src=”js/libs/jqwidgets/generatedata.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepares the simulator.
//var theme = prepareSimulator(“dataTable”);var data = generatedata(50);
var source =
{
localData: data,
dataType: “array”,
dataFields:
[
{ name: ‘name’, type: ‘string’ },
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ },
{ name: ‘date’, type: ‘date’ }
]
};var dataAdapter = new $.jqx.dataAdapter(source);
$(“#dataTable”).jqxDataTable(
{
width: 320,
height: 500,
source: dataAdapter,
touchmode:true,
editable: true,
selectionmode: ‘singlerow’,
altrows:true,
columnsresize: false,
theme: ‘custom’,
pageable:false,
sortable: false,
showheader:false,
enablehover: false,
editSettings: {
saveOnPageChange: true,
saveOnBlur: true,
saveOnSelectionChange: false,
cancelOnEsc: true,
saveOnEnter: true,
editOnDoubleClick: false,
editOnF2: false
},
columns: [
{ text: ‘Name’, dataField: ‘name’, editable:true,cellsrenderer:function (row, column, value, rowData) {
return ‘<input type=”checkbox” style=width:25px;height:25px;>’;
}
},
{ text: ‘Product’, dataField: ‘productname’, width: ‘40%’ },
{ text: ‘Quantity’, dataField: ‘quantity’, width: ‘10%’, align: ‘right’, cellsAlign: ‘right’ },
{ text: ‘Unit Price’, dataField: ‘price’, width: ‘10%’, cellsAlign: ‘right’, align: ‘right’, cellsFormat: ‘c2′ }
]
});
//initSimulator(“dataTable”);
});
</script>
</head>
<body class=’default’ style=”width:100%;height:100%;”>
<div id=”demoContainer” class=”device-mobile”>
<div id=”container” class=”device-mobile-container”>
<div style=”border: none;” id=’dataTable’>
</div>
</div>
</div>
</body>
</html>Hi jahnvi25,
1. We do not have Checkbox column in this widget and do not support it.
2. The HTML which you return in the cellsRenderer is incorrect, too. There are syntax errors. The input tag is not closed, the style attribute value is not in quotes, your column does not have any width.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.combut same code is working in normal browser..i even corrected syntax.. but still not working on mobile browser.. why is that ?
i even tried columnType:’template’ and provide initEditor(..) and instead of jqxInput i used jqxCheckBox.. but still same result.. user can not select checkBox.. is this bug ?Hi jahnvi25,
How something which is not supported by us and which is related to your custom code could be a bug on our side? initEditor, etc are for Editors, not for something which you want to be always displayed. I do not know why your custom Cells renderer HTML does not work in your safari browser.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.combut same code is working on desktop browsers.. only on mobile browsers its not working.. why is that ? it does show checkBox on mobile browsers.. just readonly.. user cant check that checkBox.. but on desktop browsers..user can select/check the checkBox ?
Hi jahnvi25,
I cannot know why your custom code does not work on mobile browsers. I already wrote you that Checkbox column is not supported by this widget. The supported features are demonstrated on the Demo page. Writing a custom example and testing it in various browsers is not part of our Forum support.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.