Clear the old summary record using:
w2ui['grid'].summary = [];
Showing posts with label grid. Show all posts
Showing posts with label grid. Show all posts
Wednesday, 27 March 2019
[Solved] w2ui grid : Duplicate summary rows issue.
Clear the old summary record using:
w2ui['grid'].summary = [];
Thursday, 2 August 2018
How to add custom buttons in w2ui grid?
toolbar: {
items: [
{ type: 'break' },
{ type: 'button', id: 'mybutton', caption: 'My other button', img: 'w2ui-icon-check' }
],
onClick: function (event) {
switch (event.target) {
case 'mybutton':
//business logic here
break;
}
},
Wednesday, 1 August 2018
How to add conditional style in w2ui grid to highlight individual cell?
Add following while preparing records array:
'w2ui':{style: {
10: ($(this).attr("ows_Column1")=="Approved")?"background-color: green":"red",
11: ($(this).attr("ows_Column2")=="Approved")?"background-color: yellow":"",
}}
To highlight specific header:
<style type="text/css">
td[col="6"].w2ui-head,td[col="7"].w2ui-head {
border:dashed 2px #0099f8 !important;
font-weight:bold;
}
</style>
Saturday, 31 March 2018
How to get and update SharePoint list using SPServices and w2ui grid table?
Sample Page (SharePoint Designer):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/w2ui-1.5.rc1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://domain.com/sites/siteName/SiteAssets/scripts/w2ui-1.5.rc1.min.css" />
<script language="javascript" type="text/javascript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var cmlQuery="<Query><Where><Eq><FieldRef Name='Column Name'/><Value Type='Text'><![CDATA[" + decodeURI(getParameterByName('queryStringParameter',window.location.href))+ "]]></Value></Eq></Where></Query>";
var listData=[];
var counter=0;
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "List Name",
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: cmlQuery,
CAMLRowLimit: 0,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
listData.push({recid: $(this).attr("ows_ID"),Boolean: ($(this).attr("ows_Check_x0020_Box")=="1"),Resource: $(this).attr("ows_Enterprise_x0020_ID").split('#')[1]});
});
}
});
});
function UpdateItem(_id,_boolean)
{
$().SPServices({
operation: "UpdateListItems",
listName: "List Name",
ID: _id,
valuepairs: [["Check_x0020_Box", _boolean]],
completefunc: function (xData, Status) {
//alert(Status);
}
});
}
$(function () {
$('#grid').w2grid({
name: 'grid',
show: {
toolbar: true,
footer: true,
toolbarSave: true
},
columns: [
// { field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true,show:false },
{ field: 'Boolean', caption: 'Boolean', size: '60px', sortable: true, resizable: true, style: 'text-align: center',
editable: { type: 'checkbox', style: 'text-align: center' }
},
{ field: 'Resource', caption: 'Resource', size: '120px', sortable: true, resizable: true}
],
onSave: function (event) {
var changeArr=w2ui['grid'].getChanges();
$(changeArr).each(function() {
UpdateItem($(this).attr("recid"),$(this).attr("Boolean"));
});
w2alert('Saved!');
},
records:listData
});
if(w2ui['grid'].records.length==0)
{
$("#grid").hide();
w2alert('No pending items. Thanks!');
}
});
</script>
</head>
<body>
<div id="grid" style="width: 100%; height: 400px;"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/w2ui-1.5.rc1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://domain.com/sites/siteName/SiteAssets/scripts/w2ui-1.5.rc1.min.css" />
<script language="javascript" type="text/javascript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var cmlQuery="<Query><Where><Eq><FieldRef Name='Column Name'/><Value Type='Text'><![CDATA[" + decodeURI(getParameterByName('queryStringParameter',window.location.href))+ "]]></Value></Eq></Where></Query>";
var listData=[];
var counter=0;
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "List Name",
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: cmlQuery,
CAMLRowLimit: 0,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
listData.push({recid: $(this).attr("ows_ID"),Boolean: ($(this).attr("ows_Check_x0020_Box")=="1"),Resource: $(this).attr("ows_Enterprise_x0020_ID").split('#')[1]});
});
}
});
});
function UpdateItem(_id,_boolean)
{
$().SPServices({
operation: "UpdateListItems",
listName: "List Name",
ID: _id,
valuepairs: [["Check_x0020_Box", _boolean]],
completefunc: function (xData, Status) {
//alert(Status);
}
});
}
$(function () {
$('#grid').w2grid({
name: 'grid',
show: {
toolbar: true,
footer: true,
toolbarSave: true
},
columns: [
// { field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true,show:false },
{ field: 'Boolean', caption: 'Boolean', size: '60px', sortable: true, resizable: true, style: 'text-align: center',
editable: { type: 'checkbox', style: 'text-align: center' }
},
{ field: 'Resource', caption: 'Resource', size: '120px', sortable: true, resizable: true}
],
onSave: function (event) {
var changeArr=w2ui['grid'].getChanges();
$(changeArr).each(function() {
UpdateItem($(this).attr("recid"),$(this).attr("Boolean"));
});
w2alert('Saved!');
},
records:listData
});
if(w2ui['grid'].records.length==0)
{
$("#grid").hide();
w2alert('No pending items. Thanks!');
}
</script>
</head>
<body>
<div id="grid" style="width: 100%; height: 400px;"></div>
</body>
</html>
Subscribe to:
Posts (Atom)