how to unable kendo grid checkbox? - javascript

In the code snippet is the example of grid, I would like to unable the checkbox in the grid when the remark have invalid value. In the code below will have 3 sample records.
Output:
The first and third checkbox set to unable, the second checkbox are enable to let user to select.
var userRecord=[{reason:"Invalid",UserName:"test"},
{reason:"",UserName:"test1"},
{reason:"Invalid2",UserName:"test2"}]
var grid=$("#grid").kendoGrid({
columns: [
{ field: "", width: "40px", template: "<input name='Discontinued' class='checkbox' type='checkbox' />" },
{ field: "reason", title: "Remark" },
{ field: "UserName", title: "User Name" },
],
dataSource: {
data: userRecord
},
dataBound: function (e) {
$(".checkbox").bind("change", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(e.target).closest("tr");
row.toggleClass("k-state-selected");
var data = grid.dataItem(row);
});
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
</body>
</html>


Try something like this: #= (reason=='')? 'disabled=disabled' : ''#
I am not sure if you want first and third disabled or you want the middle one disabled but I think you got the idea.
var userRecord=[{reason:"Invalid",UserName:"test"},
{reason:"",UserName:"test1"},
{reason:"Invalid2",UserName:"test2"}]
var grid=$("#grid").kendoGrid({
columns: [
{ field: "", width: "40px", template: "<input name='Discontinued' class='checkbox' #= (reason=='')? 'disabled=disabled' : ''# type='checkbox' />" },
{ field: "reason", title: "Remark" },
{ field: "UserName", title: "User Name" },
],
dataSource: {
data: userRecord
},
dataBound: function (e) {
$(".checkbox").bind("change", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(e.target).closest("tr");
row.toggleClass("k-state-selected");
var data = grid.dataItem(row);
});
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
</body>
</html>

Related

How to set multiple value in selectize input?

I try some solution but didn't work
<input id="select1" name="select1" type="text" class="select1 demo-default"/>
var $select = $("#select1").selectize();
var selectize = $select[0].selectize;
selectize.setValue(["test1","test2"]);`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
</head>
<body>
<div id="wrapper">
<input type="text" id="input-tags1" class="demo-default test">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<script>
var $select = $('.demo-default').selectize({
persist: false,
createOnBlur: true,
create: true,
});
var selectize = $select[0].selectize;
selectize.addOption([{text: "puja", value: "puja"}, {text: "raxit", value: "raxit"},]);
selectize.setValue(['puja','raxit']);
</script>
</body>
</html>

how to move dojo datagrid after a hidden control is shown

1 - a simple form that contains a select (let's call it select1) and a dojo datagrid below it.
2 - when you change the value of select1 it toggles the visibility of another select, let's call it select2, located between select1 and datagrid1
3 - when select2 appears, datagrid1 doesn't move to make room for it. I need that to happen
PLEASE NOTE: due to something with arcgis.com, sometimes the snippet does not run at first click.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

What you need is to resize the BorderContainer after changing the content height.
So you need to call borderContainer.resize();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
borderContainer.resize();
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-id="borderContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Loading arrays through select2 with text containing HTML-entities are not showing as the special characters

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div>
<select style="width: 50%" id="div">
</select>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</body>
and in javascript:
$('select').select2();
array =
[
{ id: 0, text: "μ" },
{ id: 1, text: "¢" },
];
$("#div").select2({ data: array })
The result will be a select with option "& m u ; " and "& c e n t;" and not "μ" and "¢". Does anyone have any idea how to fix this?

I see
array = [
{ id: 0, text: "μ" },
{ id: 1, text: "¢" },];
You have no problems with the coding?
An example of working with symbols - http://codepen.io/anon/pen/oXomLP

Ext.JS 5: How to use single components (combobox)

I've just downloaded the trial version of Ext JS 5 and I'm wondering how to use a single component instead of the whole framework. The Ext's guide doesn't seem to have a guide on this. I'm trying to use this http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html
Can I just include a JS and some images like jQuery UI?

Looking at sencha fiddle you could add the following cdn files (or pull them local) and it'll load the extjs framework. Then you could add Ext.onReady and create extjs elements on your page:
Js Files Required:
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
CSS Files Required:
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
And here is an example index.html file that loads a message box when Ext is ready:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
});
</script>
</head>
<body>
<p>TEST SITE</p>
</body>
</html>
Edit 1 (Adding Combobox):
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
Ext.create('Ext.panel.Panel', {
renderTo:'testDiv',
width: 500,
height: 500,
title: 'This is another test',
items: [{
html: 'Another test here too.'
},{
xtype:'combobox',
width:400,
displayField: 'descr',
valueField: 'descr',
store: Ext.create('Ext.data.Store',{
fields:['descr'],
data: [{
descr: 'Example 1'
},{
descr: 'Example 2'
}]
})
}]
})
});
</script>
</head>
<body>
<p>TEST SITE</p>
<div id="testDiv"></div>
</body>
</html>

Jgrid Problem Generating XML

i am using Jgrid. i am injecting the data to the Grid using Xml as we most of us do.
i want the batch update to database, my requirement that when i click on the "Save Change" it generate the Xml of current(updated) grid data.
So, how can i generate the Xml of Jgrid data.
please help.
here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
//debugger;
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'id',index:'id', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'note',index:'note', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:"}}
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#test').jqGrid('restoreRow',lastsel3);
jQuery('#test').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
rowNum:10,
rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Cell Edit Example",
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='invdate') {
jQuery("#"+iRow+"_invdate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
afterSaveCell : function(rowid,name,val,iRow,iCol) {
if(name == 'amount') {
var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
}
if(name == 'tax') {
var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
}
}
});
jQuery("#test").jqGrid('navGrid','#pgwidth',{edit:true,add:true,del:true});
});
</script>
</head>
<body>
<form id="form1">
<div>
<table id="test">
</table>
</div>
</form>
</body>
</html>
Thanks.

To export data to XML you can use jQuery("#test").jqGrid ('getGridParam', 'data') in combination with xmlJsonClass.json2xml from JsonXml.js which included to jqGrid.
I created a working example which demonstrate this way: http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm. You can use external button or a button in the jqGrid navigator to make the export. In the example I just display the exported data with respect of alert function. The same data as a file you find here.

Hi Oleg I am using the ths same code but it not produce the correct output.. My code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<!-- <script type="text/javascript">
debugger;
alert($!retrivexml);
</script>-->
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
var grid = jQuery("#test");
var MyExportToXml = function (grid) {debugger;
var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') };
var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
alert(xmldata);
};
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
//url: $!retrivexml,
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
{name:'Role',index:'Role', width:80, align:"right",editable:true},
{name:'Task',index:'Task', width:80, align:"right",editable:true},
{name:'SDate',index:'SDate', width:90,editable:true},
{name:'EDate',index:'EDate', width:90,editable:true},
{name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
{name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}
],
rowNum:10,
//rowList:[10,20,30],
pager: '#pagediv',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Project Planning",
forceFit : false,
cellEdit: true,
editurl:'clientArray',
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='SDate') {
jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
if(name=='EDate') {
jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
// afterSaveCell : function(rowid,name,val,iRow,iCol) {
// if(name == 'amount') {
// var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
// }
//
//
//
// if(name == 'tax') {
// var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
// }
// }
});
jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false});
$("#export").click(function(){
MyExportToXml (grid);
});
jQuery("#bedata").click(function(){
jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus',
onClickButton:function(id){
var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
Deliverables:"",Complete:""};
var lastsel2 = id;
//debugger;
var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
// if (su) {
// jQuery('#test').editRow(lastsel2,true);
//
//
// }
},
title:"New Button",
position:"last"
});
//jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
});
});
</script>
</head>
<body>
<form id="form1">
<div id="pagediv">
</div>
<table id="test">
</table>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<input type="BUTTON" id="export" value="Export" />
</form>
</body>
Please..correct the code if i m doing some mistake here

Categories