SharePoint 2013 Hosting – HostForLIFE.eu :: How to Display SpServices with JqGrid in Page Load SharePoint?

Today I will teach you how to display SPServices getlistitems in JqGrid SharePoint page load event.Here is the code. here my list name is ProjectDetails. Now write the following code:

<head runat="server">  
        <meta name="WebPartPageExpansion" content="full" />  
        <meta http-equiv="X-UA-Compatible" content="IE=10" />  
        <SharePoint:CssRegistration Name="default" runat="server"/>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
        <style type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"></style>  
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"></link>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-el.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>  
        <script></script>  
        <script>  
    $(document).ready(function() {  
    var mydata;  
    var JqData1=[];  
    GetMyData();  
    function ForGettingUserName() {  
      var userName = $().SPServices.SPGetCurrentUser({  
          fieldName : "Title",  
          debug : false  
        });  
      return userName;  
    }  
      
    function GetMyData() {  
    ForGettingUserName();  
      
      sortIdexName = jQuery("#list").getGridParam("sortname"); //Maintaining Consitant SortName after the Sortcol event  
      sortOrderName = jQuery("#list").getGridParam("sortorder"); //Maintaining Consistant Sort Order  
      Query = "  
            <Query>  
                <Where>  
                    <Eq>  
                        <FieldRef Name='ApprovalStatus' />  
                        <Value Type='Text'>Pending</Value>  
                    </Eq>  
                </Where>  
            </Query>";  
      //Query = GetTheOrderByType(sortIdexName, sortOrderName);  
      
      var CAMLViewFields ="  
            <ViewFields>"+"   
                <FieldRef Name='ProjectId' />"+  
      "  
                <FieldRef Name='ProjectName' />  
                <FieldRef Name='DeliveryManager' />  
                <FieldRef Name='ApprovalStatus' />  
            </ViewFields>"  
      GetDataOnLoad(Query, CAMLViewFields);  
    }  
    //Function for Getting the Query Type and the particular WHERE CLAUSE TO send the Query to GetListItem function  
    /*function GetTheOrderByType(index, sortOrder, userName) {
      var OrderByType;
      if (index == "ProjectName") {
        if (sortOrder == "desc") {
          OrderByType = "
            <Query>" +
             + "
                <Where>
                    <Or>" + "
                        <Eq>" + "
                            <FieldRef Name='deliveryManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>" + "
                        </Eq>"
             + "
                        <Eq>
                            <FieldRef Name='projectManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>
                        </Eq>" + "
                    </Or>
                </Where>" +
             + "
                <OrderBy>
                    <FieldRef  Name='projectName' Ascending='FALSE' />
                </OrderBy>" +
             + "
            </Query>";
        } else {
          OrderByType = "
            <Query>" +
             + "
                <Where>
                    <Or>" + "
                        <Eq>" + "
                            <FieldRef Name='deliveryManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>" + "
                        </Eq>"
             + "
                        <Eq>
                            <FieldRef Name='projectManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>
                        </Eq>" + "
                    </Or>
                </Where>" +
             + "
                <OrderBy>
                    <FieldRef  Name='projectName' Ascending='FALSE' />
                </OrderBy>" +
             + "
            </Query>";
        }
      } else if (index == "ApprovalStatus") {
        if (sortOrder == "desc") {
          OrderByType = "
            <Query>" +
             + "
                <Where>
                    <Or>" + "
                        <Eq>" + "
                            <FieldRef Name='deliveryManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>" + "
                        </Eq>"
             + "
                        <Eq>
                            <FieldRef Name='projectManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>
                        </Eq>" + "
                    </Or>
                </Where>" +
             + "
                <OrderBy>
                    <FieldRef  Name='approvalStatus' Ascending='FALSE' />
                </OrderBy>" +
             + "
            </Query>";
        } else {
          OrderByType = "
            <Query>" +
             + "
                <Where>
                    <Or>" + "
                        <Eq>" + "
                            <FieldRef Name='deliveryManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>" + "
                        </Eq>"
             + "
                        <Eq>
                            <FieldRef Name='projectManager'/>
                            <Value Type='Text'>"
             + userName + "</Value>
                        </Eq>" + "
                    </Or>
                </Where>" +
             + "
                <OrderBy>
                    <FieldRef  Name='approvalStatus' Ascending='FALSE' />
                </OrderBy>" +
             + "
            </Query>";
        }
        return OrderByType;
      }
    }*/  
      //This function gets the data from List using SpServices  
      function GetDataOnLoad(Query, CAMLViewFields) {  
        $().SPServices({  
          operation : "GetListItems",  
          async : false,  
          listName : "ProjectDetails",  
          CAMLQuery : Query,  
          CAMLViewFields : CAMLViewFields,  
          completefunc : processResult  
        });  
      }  
      
    //Processing the XML result to formatted Json so that We can bind data to grid in Json format  
    function processResult(xData, status) {  
      var counter = 0; // Gets the total number of records retrieved from the list (We can also use xData.ItemCount method for counting the number of rows in the data )  
      var newJqData = "";  
    alert(xData.responseText);  
      $(xData.responseXML).SPFilterNode("z:row").each(function () {  
      
        var JqData={};  
        if (counter == 0) {  
         JqData.PID= $(this).attr("ows_ID");  
         JqData.PName=$(this).attr("ows_ProjectName");  
         JqData.PManager=$(this).attr("ows_DeliveryManager");  
      JqData.PStatus=$(this).attr("ows_ApprovalStatus");  
          counter = counter + 1;  
        } else {  
          JqData.PID= $(this).attr("ows_ID");  
          JqData.PName=$(this).attr("ows_ProjectName");  
          JqData.PManager=$(this).attr("ows_DeliveryManager");  
      JqData.PStatus=$(this).attr("ows_ApprovalStatus");  
      
          counter = counter + 1;    
          }  
          JqData1.push(JqData);  
      });  
    //];  
     // FinalDataForGrid(newJqData, counter);  
    }  
    /*
    function FinalDataForGrid(jqData, resultCount) {
      dataFromList = jqData;
      //var a;
      var currentValue = jQuery("#list").getGridParam('rowNum');
      var totalPages = Math.ceil(resultCount / currentValue);
      var PageNumber = jQuery("#list").getGridParam("page"); // Current page number selected in the selection box of the JqGrid  //formatting rows
     newStr = "{total:" + '"' + 1 + '"' + "," + "page:" + '"' + 1 + '"' + ","
         + "records:" + '"'
         + resultCount + '"' + ","
         + "rows:"
         + "[" + dataFromList + "]}";
         alert(newStr );
      var a = jQuery("#list")[0];
      a.addJSONData(newStr); //Binding data to the grid which is of JSON Format
     //jQuery("#list").addJSONData(newStr);
    }
    */  
    //var a = jQuery("#list")[0];  
     jQuery("#list").jqGrid({  
      data: JqData1,  
      datatype: "local",  
       height: 150,  
       width:900,  
             hidegrid: false,  
      colNames: ['PID', 'PName','PManager','PStatus'],  
             colModel: [  
                 { name: 'PID', index: 'PID', width: 100, align: "center", sorttype: 'int' },  
                 { name: 'PName', index: 'PName', width: 100, align: "left" },  
                 { name: 'PManager', index: 'PManager', width: 100, align: "left" },  
                 { name: 'PStatus', index: 'PStatus', width: 100, align: "left" }  
                       ],  
      
      pager: true,  
      pager: '#pager',  
      pageinput: true,  
      rowNum: 5,  
      rowList: [5, 10, 20, 50, 100],  
      sortname: 'ApprovalStatus',  
      sortorder: "asc",  
      viewrecords: true,  
      autowidth: true,  
      emptyrecords: "No records to view",  
      loadtext: "Loading..."  
    });  
    jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false, search: true, refresh: true });  
      
      
    });  
      
        </script>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
            <div id='tblMain' style="float:left;width:600px">  
                <table  id="list" ></table>  
                <div id="pager" style="text-align:center;"></div>  
            </div>  
        </form>  
    </body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

<SharePoint:CssRegistration Name="default" runat="server"/>

$(document).ready(function() {

var mydata;

var JqData1=[];

GetMyData();

function ForGettingUserName() {

var userName = $().SPServices.SPGetCurrentUser({

fieldName : "Title",

debug : false

});

return userName;

}

function GetMyData() {

ForGettingUserName();

sortIdexName = jQuery("#list").getGridParam("sortname"); //Maintaining Consitant SortName after the Sortcol event

sortOrderName = jQuery("#list").getGridParam("sortorder"); //Maintaining Consistant Sort Order

Query = "

<Query>

<Where>

<Eq>

<Value Type='Text'>Pending</Value>

</Eq>

</Where>

</Query>";

//Query = GetTheOrderByType(sortIdexName, sortOrderName);

var CAMLViewFields ="

<ViewFields>"+"

<FieldRef Name='ProjectId' />"+

</ViewFields>"

GetDataOnLoad(Query, CAMLViewFields);

}

//Function for Getting the Query Type and the particular WHERE CLAUSE TO send the Query to GetListItem function

/*function GetTheOrderByType(index, sortOrder, userName) {

var OrderByType;

if (index == "ProjectName") {

if (sortOrder == "desc") {

OrderByType = "

<Query>" +

+ "

<Where>

<Or>" + "

<Eq>" + "

<Value Type='Text'>"

+ userName + "</Value>" + "

</Eq>"

+ "

<Eq>

<Value Type='Text'>"

+ userName + "</Value>

</Eq>" + "

</Or>

</Where>" +

+ "

</OrderBy>" +

+ "

</Query>";

} else {

OrderByType = "

<Query>" +

+ "

<Where>

<Or>" + "

<Eq>" + "

<Value Type='Text'>"

+ userName + "</Value>" + "

</Eq>"

+ "

<Eq>

<Value Type='Text'>"

+ userName + "</Value>

</Eq>" + "

</Or>

</Where>" +

+ "

</OrderBy>" +

+ "

</Query>";

}

} else if (index == "ApprovalStatus") {

if (sortOrder == "desc") {

OrderByType = "

<Query>" +

+ "

<Where>

<Or>" + "

<Eq>" + "

<Value Type='Text'>"

+ userName + "</Value>" + "

</Eq>"

+ "

<Eq>

<Value Type='Text'>"

+ userName + "</Value>

</Eq>" + "

</Or>

</Where>" +

+ "

</OrderBy>" +

+ "

</Query>";

} else {

OrderByType = "

<Query>" +

+ "

<Where>

<Or>" + "

<Eq>" + "

<Value Type='Text'>"

+ userName + "</Value>" + "

</Eq>"

+ "

<Eq>

<Value Type='Text'>"

+ userName + "</Value>

</Eq>" + "

</Or>

</Where>" +

+ "

</OrderBy>" +

+ "

</Query>";

}

return OrderByType;

}

}*/

//This function gets the data from List using SpServices

function GetDataOnLoad(Query, CAMLViewFields) {

$().SPServices({

operation : "GetListItems",

async : false,

listName : "ProjectDetails",

CAMLQuery : Query,

CAMLViewFields : CAMLViewFields,

completefunc : processResult

});

}

//Processing the XML result to formatted Json so that We can bind data to grid in Json format

function processResult(xData, status) {

var counter = 0; // Gets the total number of records retrieved from the list (We can also use xData.ItemCount method for counting the number of rows in the data )

var newJqData = "";

alert(xData.responseText);

$(xData.responseXML).SPFilterNode("z:row").each(function () {

var JqData={};

if (counter == 0) {

JqData.PID= $(this).attr("ows_ID");

JqData.PName=$(this).attr("ows_ProjectName");

JqData.PManager=$(this).attr("ows_DeliveryManager");

JqData.PStatus=$(this).attr("ows_ApprovalStatus");

counter = counter + 1;

} else {

JqData.PID= $(this).attr("ows_ID");

JqData.PName=$(this).attr("ows_ProjectName");

JqData.PManager=$(this).attr("ows_DeliveryManager");

JqData.PStatus=$(this).attr("ows_ApprovalStatus");

counter = counter + 1;

}

JqData1.push(JqData);

});

//];

// FinalDataForGrid(newJqData, counter);

}

function FinalDataForGrid(jqData, resultCount) {

dataFromList = jqData;

//var a;

var currentValue = jQuery("#list").getGridParam('rowNum');

var totalPages = Math.ceil(resultCount / currentValue);

var PageNumber = jQuery("#list").getGridParam("page"); // Current page number selected in the selection box of the JqGrid //formatting rows

newStr = "{total:" + '"' + 1 + '"' + "," + "page:" + '"' + 1 + '"' + ","

+ "records:" + '"'

+ resultCount + '"' + ","

+ "rows:"

+ "[" + dataFromList + "]}";

alert(newStr );

var a = jQuery("#list")[0];

a.addJSONData(newStr); //Binding data to the grid which is of JSON Format

//jQuery("#list").addJSONData(newStr);

}

//var a = jQuery("#list")[0];

jQuery("#list").jqGrid({

data: JqData1,

datatype: "local",

height: 150,

width:900,

hidegrid: false,

colNames: ['PID', 'PName','PManager','PStatus'],

colModel: [

{ name: 'PID', index: 'PID', width: 100, align: "center", sorttype: 'int' },

{ name: 'PName', index: 'PName', width: 100, align: "left" },

{ name: 'PManager', index: 'PManager', width: 100, align: "left" },

{ name: 'PStatus', index: 'PStatus', width: 100, align: "left" }

pager: true,

pager: '#pager',

pageinput: true,

rowNum: 5,

rowList: [5, 10, 20, 50, 100],

sortname: 'ApprovalStatus',

sortorder: "asc",

viewrecords: true,

autowidth: true,

emptyrecords: "No records to view",

loadtext: "Loading..."

});

jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false, search: true, refresh: true });

});

</script>

</head>

<body>

</div>

</form>

</body>

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options.

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Display SpServices with JqGrid in Page Load SharePoint?

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Display SpServices with JqGrid in Page Load SharePoint?

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags