Anup Ghume's Blog: Store data into SP list using Java Query.

Details functionality with snap

when click on Add new row , one below popup will open .

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.

Fill some data and click on save . The respective data will be stored into JQX grid.

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

<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.

<div id="jqxgrid"></div> - for jq grid

below html use for open popup on "Add new row "button .

<table>

<tr>

<td align="right">Designation:</td>

</tr>

<tr>

<td align="right">Qualification:</td>

</tr>

<tr>

<td align="right">Net Worth:</td>

<span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>

</td>

</tr>

<tr>

</tr>

</table>

</div>

And Below html use for open popup while edit

<table>

<tr>

<td align="right">Designation:</td>

</tr>

<tr>

<td align="right">Qualification:</td>

</tr>

<tr>

<td align="right">Net Worth:</td>

<span id="errors" style="color: Red; display: none">* Input digits (0 - 9)</span>

</td>

</tr>

<tr>

</tr>

</table>

</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>

</div>

We need to add following reference in our .aspx for both form (I.e. New and View form) using SP

Designer

Anup Ghume's Blog

Friday, 27 March 2015

Store data into SP list using Java Query.

No comments:

Post a Comment

Blog Archive