jQWidgets Forums
Forum Replies Created
-
Author
-
but 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 ?i 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>how do i achieve this same functionality ?
one more question along the same line.. do you think jqxdatatable would give better performance and overall would be better to display following table view.
http://postimg.org/image/eab4q4lid/
first column is icon(arrow) and there is hidden column which has checkbox and table also has images and stuff ?
i havent tried mobile demo example locally. but from website it does look good..the only difference i have is
1. we are not calling prepareSimulator and initSimulator methods.. since we are using custom theme.. do i have to do any specific settings for mobile ?
2. and we are using images in renderer and json data type.. do you think it would be better to use array type ?Thanks
Thanks for update..we are building mobile app.. so definitely not needed
here is the link.
July 10, 2014 at 1:38 pm in reply to: create 2 line row in jqxgrid create 2 line row in jqxgrid #57007sorry forgot to attach image..
for some reason i am not able to attach link to image., but here it isthanks for this solution..
Thanks.. i tried this.. but have one more question
so when i call “endcelledit”.. this calls “cellendedit” event.. is there a way to stop this and just call “endcelledit”
Thanks
May 28, 2014 at 8:36 pm in reply to: style grid cell in edit mode style grid cell in edit mode #55048so i am doing following.. and it seem to be working.. but i dont know whether its correct..
basically i am not setting source.. would that be fine ?var inputElement = $(“<input style=’border:1px solid #6F93B9;box-shadow: inset 0 0 2px 2px #E5E5E5;border-radius:0′ />”).prependTo(editor);
inputElement.jqxInput({width: width – 4, height: height – 4 });May 28, 2014 at 7:49 pm in reply to: style grid cell in edit mode style grid cell in edit mode #55045Thanks for reply. but its not working properly in my case.. i have to set data at run time. so getEditorDataAdapter(..) gives me u.localdata undefined error..
is there any other way to get the column Data adapter ?
May 27, 2014 at 5:38 pm in reply to: style grid cell in edit mode style grid cell in edit mode #54986i am sorry for confusion.. but all i want is set the border around editor. i am using default editor.. (cell is text). i just want to set the border around the editing cell..
how can i do that ?
May 19, 2014 at 2:32 pm in reply to: highlight whole row with row details highlight whole row with row details #54645but i am not expanding row.. i am just highlighting whole row with background color and i do want to follow same logic for arrow column. how can i highlight background of arrow column.. for default state,expanded and hover and selected state..
thanks
That works perfect.. thanks.. is it possible to set minheight ?
-
AuthorPosts