How to Save jqGrid when iam adding One More column Dynamically
My Requirment is:When iam dragging Node from Treeview to grid it has to be add column in jqGrid4.4.4 ...It is working bt every time it is coming with fresh data..i Need Existing Data+Previously Dragged Column+Cureently draggedNode ...Here is the code...Please Check and Help Me...Its Urgent
<script src="Scripts/grid.setcolumns.js" type="text/javascript"></script>
<script src="Scripts/jquery.tablednd.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<link href="Styles/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
jQuery("#gvData").jqGrid({
datatype: "local",
colNames: ['Account Owner', 'Account Name', 'Type'],
colModel: [
{ name: 'AccountOwner', index: 'AccountOwner', width: 100, sorttype: "string" },
{ name: 'AccountName', index: 'AccountName', width: 100, sorttype: "string" },
{ name: 'Type', index: 'Type', width: 100 },
],
rowNum: 10,
rowList: [5, 10, 20, 50, 100],
pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
caption: "Manipulating Grid Data HardCoded"
});
var gridData = [
{ AccountOwner: "Owner1", AccountName: "Account1", Type: "Own" },
{ AccountOwner: "Owner2", AccountName: "Account2", Type: "Own2" },
{ AccountOwner: "Owner3", AccountName: "Account3", Type: "Own3" }
];
for (var i = 0; i <= gridData.length; i++)
jQuery("#gvData").jqGrid('addRowData', i + 1, gridData[i]);
});
$(document).ready(function () {
$(".treeNode").draggable({ revert: true, helper: "clone" });
$("#droppable").droppable({
drop: function (event, ui) {
var columnName = $(ui.draggable).text();
if (columnName != null) {
var Data = JSON.stringify({ columnname: columnName });
$("#gvData").GridUnload();
$.ajax({
type: "POST",
url: "../Default.aspx/GetColumns",
data: Data,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (Data) {
var obj = Data.d[0];
$.extend($.fn.fmatter, {
actionFormatter: function (cellvalue, options, rowObject) {
return cellvalue.substr(0, 2);
}
});
var gridDataFunction = function () {
jQuery("#gvData").jqGrid({
datatype: "local",
colNames: ['Account Owner', 'Account Name', 'Type', obj],
colModel: [
{ name: 'AccountOwner', index: 'AccountOwner', width: 100, sorttype: "string" },
{ name: 'AccountName', index: 'AccountName', width: 100, sorttype: "string" },
{ name: 'Type', index: 'Type', width: 100 },
{ name: 'Action', index: 'ID', label: 'Action', width: 280, fixed: true, sortable: false, align: 'center', formatter: 'actionFormatter' },
],
rowNum: 10,
rowList: [5, 10, 20, 50, 100],
pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
caption: "Calling Grid Data Inside a Function"
});
var newGridData = [
{ AccountOwner: "Owner1", AccountName: "Account1", Type: "Own" },
{ AccountOwner: "Owner2", AccountName: "Account2", Type: "Own2" },
{ AccountOwner: "Owner3", AccountName: "Account3", Type: "Own3" }
];
for (var i = 0; i <= newGridData.length; i++) {
jQuery("#gvData").jqGrid('addRowData', i + 1, newGridData[i]);
}
jQuery("#gvData").jqGrid("clearGridData", false).trigger("reloadGrid")
};
alert(gridDataFunction());
jQuery("#gvData").remapColumns([0, 1, 2, 3], true, true);
},
error: function (x, e) {
alert(x.readyState + " " + x.status + " " + e.msg);
}
});
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView2" runat="server" Style="font-weight: 700" ImageSet="BulletedList"
NodeIndent="10" NodeWrap="True" CssClass="ui-widget-content">
<HoverNodeStyle Font-Underline="False" />
<Nodes>
<asp:TreeNode Text="AccountType" Value="AccountType">
<asp:TreeNode Text="Own" Value="1"></asp:TreeNode>
<asp:TreeNode Text="Lead" Value="2"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
<NodeStyle CssClass="treeNode" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
<br />
<div id="droppable" class="ui-widget-header">
<p>Drop Here</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
</Services>
</asp:ScriptManager>
<table id="list" >
</table>
<div id="pager">
</div>
<br />
<br />
<table id="gvData">
</table>
<div id="pager1">
</div>
</div>
</form>