Details
functionality with snap
when I fill some data into these text box . the particular
data should stored to one SP List fields so my JSON will use that data . For that I have created
" ContactPersonDetails" field in SP List.
We can edit also - for edit go to edit button - one popup will open with some value which we wanted to edit
and edited value will be stored into JQX grid.
Finally click on Sharepoint save button will store these data
into SP list field " ContactPersonDetails".
In SP List we have a column name : ContactPersonDetails
where I will store these data so while displaying data my JSON will use these
field.
I will use this column "ContactPersonDetails" when I
wanted to display data in JQX grid OR
display data while edit. My JSON will refer these field.
will set display none for " ContactPersonDetails"
field in .aspx
<div style="visibility:hidden;">
<SharePoint:FormField runat="server"
id="ff5{$Pos}" ControlMode="New" FieldName="ContactPersonDetails"
__designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@ContactPersonDetails')}"/>
</div>
We need to js one will be use for New form [In new form will add all JS field into SP list field ContactPersonDetails ] and other will be use for Edit form.
1] .JS for new form
var editrow = -1;
var editrowEdit = -1;
$(document).ready(function (source, arguments) {
ExecuteOrDelayUntilScriptLoaded(HideForNewForm, "sp.js");
$('input[title="Date"]')[0].readOnly = true;
$('input[title="NameOfBusinessPartner"]').focus();
//$('input[title="Purpose"]')[0].css("width","500px");
});
function HideForNewForm() {
var data = null;
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'Designation', type:'string' },
{ name: 'Qualification', type: 'string' },
{ name: 'NetWorth', type: 'int' }
],
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);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 745,
height: 350,
source: dataAdapter,
altrows: true,
sortable: true,
autoheight: true,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Designation', datafield: 'Designation', width: 150,align: 'center' },
{ text: 'Qualification', datafield: 'Qualification', width: 438,align: 'center' },
{ text: 'Net Worth', datafield: 'NetWorth', width: 100, columntype: 'numberinput',align: 'center' },
{ text: 'Edit', datafield: 'Edit', width: 55, columntype: 'button', align: 'center', cellsrenderer: function () {
return "Edit";
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrowEdit = row;
var offset = $("#jqxgrid").offset();
$("#popupWindowEdit").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked row's data and initialize the input fields.
var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrowEdit);
$("#EditDesignation").val(dataRecord.Designation);
$("#EditQualification").val(dataRecord.Qualification);
$("#EditNetWorth").val(dataRecord.NetWorth);
// show the popup window.
$("#popupWindowEdit").jqxWindow('open');
}
}
]
});
$("#popupWindow").jqxWindow({
width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
});
$("#popupWindowEdit").jqxWindow({
width: 400, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
});
//$("#jsonExport").jqxButton({ theme: theme });
$("#addnewRow").click(function () {
//editrow = row;
$('#popupWindow').css('display', '');
editrow = editrow + 1;
var offset = $("#jqxgrid").offset();
$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked row's data and initialize the input fields.
//var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
$("#Designation").val("");
$("#Qualification").val("");
$("#NetWorth").val("");
// show the popup window.
$("#popupWindow").jqxWindow('open');
});
$("#jsonExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
});
///This event fires when add new row in popup and save the row
$("#Save").click(function () {
if (editrow >= 0) {
var row = {
Designation: $("#Designation").val(), Qualification: $("#Qualification").val(), NetWorth: $("#NetWorth").val()
};
//var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
$('#jqxgrid').jqxGrid('addrow', null, row);
//var datarow = generaterow();
//var commit = $("#jqxgrid").jqxGrid('addrow', null, null);
$("#popupWindow").jqxWindow('hide');
var MaterialdescriptioJSON = $("#jqxgrid").jqxGrid('exportdata', 'json');
//alert(MaterialdescriptioJSON);
//var MaterialDescription=$('inout[title="MaterialDescription"]');
$('textarea[title="ContactPersonDetails"]').val("");
var MaterialDescription = $('textarea[title="ContactPersonDetails"]').val(MaterialdescriptioJSON);
}
});
$("#SaveEdit").click(function () {
if (editrowEdit >= 0) {
var row = {
Designation: $("#EditDesignation").val(), Qualification: $("#EditQualification").val(), NetWorth: $("#EditNetWorth").val()
};
var rowID = $('#jqxgrid').jqxGrid('getrowid', editrowEdit);
$('#jqxgrid').jqxGrid('updaterow', rowID, row);
$("#popupWindowEdit").jqxWindow('hide');
var MaterialdescriptioJSON = $("#jqxgrid").jqxGrid('exportdata', 'json');
//alert(MaterialdescriptioJSON);
//var MaterialDescription=$('inout[title="MaterialDescription"]');
$('textarea[title="PartDetails"]').val("");
var MaterialDescription = $('textarea[title="PartDetails"]').val(MaterialdescriptioJSON);
}
});
}
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
2] .JS for Display/View form
$(document).ready(function (source, arguments) {
ExecuteOrDelayUntilScriptLoaded(BusinessPartnersLOIDetails, "sp.js");
//$('span[title="Data Entry"]').find('input [Type="radio"]')[0].onchange = TypeofEntry_OnChange;
//$('span[title="Upload File"]').find('input [Type="radio"]')[0].onchange = TypeofEntry_OnChange;
//$('span[title="Data Entry"]').children()[0].onchange = TypeofEntry_OnChange;
//$('span[title="Upload File"]').children()[0].onchange = TypeofEntry_OnChange;
});
function BusinessPartnersLOIDetails() {
var MaterialDescJSON = $('#anchorLOIDetails')[0].innerHTML;
//alert(MaterialDescJSON);
var Decoded = MaterialDescJSON.replace(/&quot;/g, '"');
//alert(Decoded);
var NewDecoded = Decoded.replace(/,"Edit":""/g, '');
//alert(NewDecoded);
//var Decoded = JSON.parse(MaterialDescJSON);
//alert(Decoded); //var Decoded = JSON.stringify(MaterialDescJSON);
//alert(Decoded);
var data="";
if(Decoded!="" && Decoded!=null){
data=Decoded;
}
else{
data=null;
}
var source =
{
datatype: "json",
localdata: data,
//datafields:
//[
//{ name: 'SrNo', type: 'string' },
//{ name: 'MaterialDescription', type: 'string' },
//{ name: 'Unit', type: 'int' },
//{ name: 'RequiredQty', type: 'int' },
//{ name: 'IssuedQty', type: 'int' },
//{ name: 'Remark', type: 'string' }
//]
datafields:
[
{ name: 'Designation', type: 'string' },
{ name: 'Qualification', type: 'string' },
{ name: 'Net Worth', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 745,
source: dataAdapter,
autoheight: true,
columnsresize: true,
columns: [
{ text: 'Designation', datafield: 'Designation', width: 200,align: 'center'},
{ text: 'Qualification', datafield: 'Qualification', width: 445 ,align: 'center'},
{ text: 'Net Worth', datafield: 'Net Worth', width: 100,align: 'center' }
]
});
$('#anchorLOIDetails')[0].className = 'hide';
///This event fires when add new row in popup and save the row
}
Here I am going to design two form using SP Designer One for New
I.e. Form will open when click on
New Item And another for View.
1] Form for new item - Click on

In .aspx for new we need to add reference of BisunessPartnerLOIForm.js
, jquery-1.11.1.min.js and others .js
file which will support for JQX Grid , We can get these js from here .
we need to add below one for "Add New Row" button.
<input
id="addnewRow" style="cursor:pointer;"
type="button" value="Add New Row"></input>
<div id="jqxgrid"></div> - for jq grid
below html use for open popup on "Add new row
"button .
<div id="popupWindow"
style="display:none;width:150px;">
<div>Add New Row</div>
<div style="overflow:
hidden;">
<table>
<tr>
<td
align="right">Designation:</td>
<td
align="left"><input id="Designation" /></td>
</tr>
<tr>
<td
align="right">Qualification:</td>
<td
align="left"><input id="Qualification"
/></td>
</tr>
<tr>
<td
align="right">Net Worth:</td>
<td align="left"><input
id="NetWorth" onkeypress="return IsNumeric(event);"
ondrop="return false;" onpaste="return false;"
/><br></br>
<span
id="error" style="color: Red; display: none">* Input
digits (0 - 9)</span>
</td>
</tr>
<tr>
<td
align="right"></td>
<td
style="padding-top: 10px;" align="right"><input
style="margin-right: 5px;" type="button"
id="Save" value="Save" /><input id="Cancel"
type="button" value="Cancel" /></td>
</tr>
</table>
</div>
</div>
And Below html use for open popup while edit
<div id="popupWindowEdit" style="display:none;width:150px;">
<div>Edit</div>
<div style="overflow:
hidden;">
<table>
<tr>
<td
align="right">Designation:</td>
<td align="left"><input
id="EditDesignation" /></td>
</tr>
<tr>
<td
align="right">Qualification:</td>
<td
align="left"><input id="EditQualification"
/></td>
</tr>
<tr>
<td
align="right">Net Worth:</td>
<td
align="left"><input id="EditNetWorth"
onkeypress="return IsNumerics(event);" ondrop="return
false;" onpaste="return false;" /><br></br>
<span
id="errors" style="color: Red; display: none">* Input
digits (0 - 9)</span>
</td>
</tr>
<tr>
<td
align="right"></td>
<td
style="padding-top: 10px;" align="right"><input
style="margin-right: 5px;" type="button"
id="SaveEdit" value="Save" /><input
id="Cancel" type="button" value="Cancel"
/></td>
</tr>
</table>
</div>
</div>
2] Form for View
In .aspx for view we need to put below html. and set a
reference of js for Display/View form.
<div style="visibility:hidden;" id="divLOIDetails">
<a id="anchorLOIDetails"
style="font-size:15px;color:black;text-decoration:none;"><xsl:value-of
select="@ContactPersonDetails"/></a>
</div>
<div id="divDataEntry" >
<div
id="jqxgrid"></div>
</div>
We need to add following reference in our .aspx for both
form (I.e. New and View form) using SP
Designer
<link rel="stylesheet"
href="../../Style%20Library/jqwidget/styles/jqx.base.css"
type="text/css"> </link>
<script
src="../../Style%20Library/jqwidget/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script src="../../Style
Library/BusinessPartnersLOIForm/DispBusinessPartnerLOIForm.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxcore.js"
type="text/javascript"></script>
<script src="../../Style%20Library/jqwidget/jqxbuttons.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxscrollbar.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxmenu.js"
type="text/javascript"></script>
<script src="../../Style%20Library/jqwidget/jqxcheckbox.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxgrid.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxgrid.selection.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxgrid.columnsresize.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxdata.js"
type="text/javascript"></script>
<script src="../../Style%20Library/jqwidget/jqxdata.export.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxgrid.export.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxgrid.sort.js"
type="text/javascript"></script>
<script src="../../Style%20Library/jqwidget/generatedata.js"
type="text/javascript"></script>
<script
src="../../Style%20Library/jqwidget/jqxwindow.js"
type="text/javascript"></script>





