w2ui Form : How to validate a form?

actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                var errorList = w2ui['formName'].validate();
                if(errorList.length==0)
                {
                saveFormDataCustomFunction();
                }
            }
        }

w2ui Form : How to update a field on change of another field?

Form: 

onChange: function (event)
{
if(event.target=="fieldName1")
{
event.done(function () {
$('input[type=fieldName2]').w2field('list',
{
items: getFilteredValuesArray
}
);
});
}
if(event.target=="ResourceID")
{
event.done(function () {
refreshCalendar();
});
}
if(event.target=="Start Date")
{
event.done(function () {
refreshCalendar();
});
}
}


Function:

function refreshCalendar()
{
setUnavialableDatesForResource(w2ui['formName'].get('ResourceID').el.value);
$('input[type=start-date]').w2field('date',
{
format: 'm/d/yyyy',
blocked: blockedStartDates
}
);

setUnavialableEndDatesForResource(w2ui['formName'].get('Start Date').el.value);
$('input[type=end-date]').w2field('date',
{
format: 'm/d/yyyy',
blocked: blockedEndDates
}
);
}

HTML:
<input name="Start Date" type="start-date"/>
<input name="End Date" type="end-date"/>

w2ui Form : How to get and set a field's value?

Get:

var val = w2ui['formName'].get('fieldName').el.value;

OR

var val = $("fieldName").val


Set:

$("fieldName").val = "New Value";

OR

w2ui['formName'].get('fieldName').el.value = "New Value";

w2ui grid: Scroll bar not working in IE for editable column of type list

Use 'select' instead of 'list'.

This would work in both Chrome and IE.

[Solved] w2ui grid : Duplicate summary rows issue.

Clear the old summary record using:

w2ui['grid'].summary = [];

How to refresh w2ui grid on dropdown menu index change?

    function onSelectedIndexChange()
   {
    //prepare records using loop
   
    try
     {
          w2ui['grid']. destroy ();
     }
     catch(ex){}

    defineGrid(); // call the function to define grid columns and other properties
    w2ui['grid'].records = listData;
    w2ui['grid'].refresh();
    }

SharePoint: How to prepare group-by data for tree like w2ui grid?

var listData=[];

function loadTable()
{//start loadTable
var val,index,cval,cindex,TypeOne,TypeTwo,Unknown,TypeOneTotal=0,TypeTwoTotal=0,UnknownTotal=0,firstItem=true,rid=0;
$().SPServices({//sart service call
    operation: "GetListItems",
    async: false,
    listName: "List Name",
    CAMLViewFields: "<ViewFields Properties='True' />",
    CAMLQuery: "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Conter'>0</Value></Neq></Where></Query>",
    CAMLRowLimit: 0,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
   
        if($(this).attr("ows_Item_x0020_Type")==undefined)
        {
        TypeOne=0; TypeTwo=0; Unknown=1; UnknownTotal++;
        }
        else if($(this).attr("ows_Item_x0020_Type")=='TypeOne')
        {
        TypeOne=1; TypeTwo=0; Unknown=0; TypeOneTotal++;
        }
else if($(this).attr("ows_Item_x0020_Type")=='TypeTwo')
        {
        TypeOne=0; TypeTwo=1; Unknown=0; TypeTwoTotal++;
        }
        //First record
      if(firstItem==true)
      {
      listData.push({
      recid: ++rid,
      'Column 1': $(this).attr("ows_Column 1"),
      'Column 2': '...',
      'Unknown' : Unknown,
      'TypeOne' : TypeOne,
      'TypeTwo' : TypeTwo,
      'Total':1,
      w2ui: {
                    children: [
                        {
                        recid: ++rid,
                        'Column 1': '',
'Column 2': $(this).attr("ows_Column 2"),
'Unknown' : Unknown,
'TypeOne' : TypeOne,
'TypeTwo' : TypeTwo,
'Total':1,
      }
                    ]
                    }
      });
    firstItem=false;
    rid++;
      }
      else
      {

//Update Column 1 data
val = $(this).attr("ows_Column 1");
index=-1;
for (var i=0; i<listData.length; i++){
     if(listData[i].Column 1==val){
       index = i;
       break;
     }
   
  }

if(index==-1)
{
listData.push({
      recid: rid,
      'Column 1': $(this).attr("ows_Column 1"),
      'Column 2': '...',
      'Unknown' : Unknown,
      'TypeOne' : TypeOne,
      'TypeTwo' : TypeTwo,
      'Total':1,
      w2ui: {
                    children: [
                    {
                    recid: ++rid,
                        'Column 1': '',
      'Column 2': $(this).attr("ows_Column 2"),
      'Unknown' : Unknown,
      'TypeOne' : TypeOne,
      'TypeTwo' : TypeTwo,
      'Total':1,
      }
                    ]
                    }
      });
      rid++;
}
else
{
listData[index]['Unknown'] += Unknown;
listData[index]['TypeOne'] += TypeOne;
listData[index]['TypeTwo'] += TypeTwo;
listData[index]['Total'] += 1;


//Update Column 2 data
cval = $(this).attr("ows_Column 2");
cindex=-1;
for (var i=0; i<listData[index].w2ui.children.length; i++){
     if(listData[index].w2ui.children[i].Column 2==cval){
       cindex = i;
       break;
     }
   
  }

if(cindex==-1)
{
listData[index].w2ui.children.push({
      recid: rid,
      'Column 1': '',
      'Column 2': $(this).attr("ows_Column 2"),
      'Unknown' : Unknown,
      'TypeOne' : TypeOne,
      'TypeTwo' : TypeTwo,
      'Total':1,
      });
      rid++;
}
else
{
listData[index].w2ui.children[cindex]['Unknown'] += Unknown;
listData[index].w2ui.children[cindex]['TypeOne'] += TypeOne;
listData[index].w2ui.children[cindex]['TypeTwo'] += TypeTwo;
listData[index].w2ui.children[cindex]['Total'] += 1;
}

}
     
      }
     
      });
    }
  });//end service call

//summary row
listData.push({
      recid: rid,
      'Column 1': 'All',
      'Column 2': 'All',
      'Unknown' : UnknownTotal,
      'TypeOne' : TypeOneTotal,
      'TypeTwo' : TypeTwoTotal,
      'Total':UnknownTotal+TypeOneTotal+TypeTwoTotal,
      w2ui: { summary: true },
      });

  //someFunction();

}//end loadTable

w2ui Grid: How to set custom icon on toolbar buttons?

.custom-save
{
background-image: url("https://SharePoint/../SiteAssets/save-16.png");
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    background-position: center;
}

toolbar: {

        items: [

        { type: 'break' },

            { type: 'button', id: 'savechanges', caption: 'Save Changes', img: 'custom-save', style:'color:#0062af;font-weight:bold;'}

            

        ],

How to lock a w2ui grid row and column?

To lock a column:

w2ui['grid'].columns[col_index].editable=false;


To lock a row:

w2ui['grid'].records[row_index].w2ui.editable=false;

-or-

w2ui['grid'].records[w2ui['grid'].get($(this).attr("recid"),true)].w2ui.editable=false;

-or-

records: [
recid: $(this).attr("ows_ID"),
'w2ui':{
       style: {},
       editable:($(this).attr("ows_columnName")=="Some Value")?false:true
      }
]

To lock the full grid:

w2ui.grid.lock('Loading...', true); //second parameter is for the optional spinner


To lock a particular cell:

There is no out-of-the-box method to support this. However, you can target some of the HTML attributes of the cell to achieve this. You will have to look deep into w2ui js files to understand the working of editable cells.

Something like this may work:

$(window).load(function (){
disableCells ();
}

function disableCells()
{
var rowArr=w2ui['grid'].records;

  $(rowArr).each(function() {
        if($(this).attr("Column Name")=="SomeValue")
        {
//column index = 5
//column name = Column5
$("#"+"grid_grid_data_"+w2ui['grid'].get($(this).attr("recid"),true)+"_5").html("<span>"+$(this).attr("Column5")+"<span>");
}
});
}


If windows.load fails to lock the cells then use the following:

$(window).on('load', function () {
w2alert('Welcome message/instruction.').done(function () {
    disableCells();
});
});

How to get a cell value from w2ui grid?

var changeArr=w2ui['grid'].getChanges();

$(changeArr).each(function() {

 test = $(w2ui['grid'].get(this.recid)).attr("ColumnName");

//OR

test = w2ui['grid'].getCellValue(w2ui['grid'].get($(this).attr("recid"),true), column_index) ;

});

How to add total row at the bottom of a w2ui grid?

$('#grid').w2grid({
    name    : 'grid',
    columns: [               
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ],
    summary: [
        { recid: 10, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' }
    ]
});


Source: http://w2ui.com/web/docs/1.5/w2grid.summary

How to hide search box in w2ui grid?

show: {
            //...
            toolbarSearch: false,
            searchAll: false,
            toolbarInput: false,
            //...
        },

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;
            }
    },

How to execute w2ui delete event without warning message?

w2ui.grid.on('delete', function(event) {
    event.force = true;
    //console.log('No confirmation required');
});

OR

onDelete: function (event) {
        event.force = true;
...

}

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>

How to update text and tooltip of default save button in w2ui grid?

var btn = w2obj.grid.prototype.buttons;
btn['save'].text = w2utils.lang('New Text');

btn['delete'].text = w2utils.lang('Reject Selected');
btn['delete'].tooltip = null;

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>

[Solved] w2ui table rows not displaying data.

Try using jQuery 2.2.4 or below.

w2ui is not compatible with the higher versions of jQuery.