jqgrid in SharePoint 2013 in less than 10 mins using spwrap.js

, , 2 Comments

This post is to show an example on how you can add jqgrid in SharePoint 2013 using spwrap.js

Check out the video

 


 

Following is the code used in the video

<link href="/_layouts/15/jquery/css/smoothness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" type="text/css" />
<link href="/_layouts/15/jqgrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/_layouts/15/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/_layouts/15/jquery/js/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/_layouts/15/SPRESTJsWrap/spwrap.js"></script>
<script type="text/javascript" src="/_layouts/15/jqgrid/js/jquery.jqGrid.min.js"></script>

<table id="lists"></table>

<script type="text/javascript">// <![CDATA[
$(function(){
       var tbl = $("#lists");
       tbl.jqGrid({
              dataType:'local',
              colNames:["Title"],
              colModel:[{ name:'Title'}],
              caption:'Tasks List'
           });
var rowCounter = 0;
tbl.spwrap({
         listConfigs:[
                      {
                        listName:'tasks',
                        fieldsToGet:[{internalName:'Title', displayName:'Title'}],
                        timedUpdates:false,
                        beforeRowAdd: function(row){
                          tbl.jqGrid('addRowData',rowCounter+1,row);
                        }
                      }]
});
});
// ]]>
</script>

you can download spwrap.js from downloads page (link @ top of the page)

  • Kumar

    Hi It doesn’t work for me on SharePoint 2010 Task List. Any help would be greatly appreciated

  • Hmd

    Hi, This only works if it is used in root site! The rest URL it is calling to get the list from SharePoint site starts with “/_api/xxxx” and does not include the site collection path which results an error of “List does not exist”!
    Thanks,
    Hmd