How can I put and set in Javascript/AngularJS the title attribute for each cell of the Kendo UI Grid with a specified value?
Thanks.
Below is the Snippet with AngularJS Combination and Title comes up through title attribute.
Reference URL:
Demo: http://demos.telerik.com/kendo-ui/grid/angular
Similar Answer: In a kendo grid, can I set column attributes dynamically with a function?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City" /></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
})
</script>
</body>
</html>
Related
This is a simple todo-list example, where I'd like the checkboxes to be checked or not, depending on the task being completed or not.
After unchecking a checkbox under the "Complete tasks" section, the next checkbox will appear unchecked, even though it's still checked in the "All tasks" section.
To reproduce easily, uncheck "Go to the store" in the "Complete tasks" section. "Clean room" will appear unchecked, even though it's still checked in "All tasks", and still completed in the data.
How can I fix this ?
<html>
<head>
<title>VueJS</title>
</head>
<body>
<div id="root">
<h1>All tasks</h1>
<ul>
<li v-for="task in tasks">
{{ task.description }}
<input type="checkbox" v-model="task.completed" :id="task.id">
</li>
</ul>
<h1>Complete tasks</h1>
<ul>
<li v-for="completeTask in completeTasks">
{{ completeTask.description }}
<input type="checkbox" v-model="completeTask.completed" :id="completeTask.id">
</li>
</ul>
<h1>Incomplete tasks</h1>
<ul>
<li v-for="incompleteTask in incompleteTasks">
{{ incompleteTask.description }}
<input type="checkbox" v-model="incompleteTask.completed" :id="incompleteTask.id">
</li>
</ul>
</div>
<script src="https://unpkg.com/vue#2.6.12/dist/vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
tasks: [
{id: 1, description: 'Go to the store', completed: true},
{id: 2, description: 'Finish X', completed: false},
{id: 3, description: 'Do Y', completed: false},
{id: 4, description: 'Clear inbox', completed: false},
{id: 5, description: 'Make Z', completed: false},
{id: 6, description: 'Clean room', completed: true},
],
},
computed: {
completeTasks() {
return this.tasks.filter(task => task.completed);
},
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
},
});
</script>
</body>
</html>
The issue is that Vue is trying to be smart and "reuse" the DOM. But in this case it will work against you.
To fix this you need add a key to each element with a v-for, this way Vue can track which <li> is which based on the key.
It's explained more in-depth on the docs:
https://v2.vuejs.org/v2/guide/list.html#Maintaining-State
<html>
<head>
<title>VueJS</title>
</head>
<body>
<div id="root">
<h1>All tasks</h1>
<ul>
<li v-for="task in tasks" :key="task.id">
{{ task.description }}
<input type="checkbox" v-model="task.completed" :id="task.id">
</li>
</ul>
<h1>Complete tasks</h1>
<ul>
<li v-for="completeTask in completeTasks" :key="completeTask.id">
{{ completeTask.description }}
<input type="checkbox" v-model="completeTask.completed" :id="completeTask.id">
</li>
</ul>
<h1>Incomplete tasks</h1>
<ul>
<li v-for="incompleteTask in incompleteTasks" :key="incompleteTask.id">
{{ incompleteTask.description }}
<input type="checkbox" v-model="incompleteTask.completed" :id="incompleteTask.id">
</li>
</ul>
</div>
<script src="https://unpkg.com/vue#2.6.12/dist/vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
tasks: [
{id: 1, description: 'Go to the store', completed: true},
{id: 2, description: 'Finish X', completed: false},
{id: 3, description: 'Do Y', completed: false},
{id: 4, description: 'Clear inbox', completed: false},
{id: 5, description: 'Make Z', completed: false},
{id: 6, description: 'Clean room', completed: true},
],
},
computed: {
completeTasks() {
return this.tasks.filter(task => task.completed);
},
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
},
});
</script>
</body>
</html>
I have a html file and a js file using jqgrid and jquery tabs having 3 table tabs. Server side data was loaded properly in the 1st tab but NOT loaded in the 2nd and 3rd tab. Please suggest what I'm missing here.
$('#tabs').tabs({ // inside Ajax success callback
activate: function (event, ui) {
if (jsondata.object1.total > 0) {
if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
colD = jsondata.object1.colData; // server Json str
colN = jsondata.object1.colNames;
colM = jsondata.object1.colModel;
jQuery("#list").jqGrid({
jsonReader: {
cell: "",
repeatitems: false,
root: "colData",
id: "0"
},
mtype: 'POST',
datatype: 'jsonstring',
datastr: colD,
colNames: colN,
sortable: true,
colModel: colM,
autowidth: true,
height: '50%',
pager: jQuery('#pager'),
rowNum: 50,
rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
viewrecords: true
});
initGrids[ui.newTab.index()] = true;
}
}
if (jsondata.object2.total > 0) {
if (ui.newTab.index() === 1 && initGrids[ui.newTab.index()] === false) {
colD = jsondata.object2.colData;
colN = jsondata.object2.colNames;
colM = jsondata.object2.colModel;
jQuery("#list2").jqGrid({
jsonReader: {
cell: "",
repeatitems: false,
root: "colData",
id: "0"
},
mtype: 'POST',
datatype: 'jsonstring',
datastr: colD,
colNames: colN,
sortable: true,
colModel: colM,
autowidth: true,
height: '50%',
pager: jQuery('#pager2'),
rowNum: 50,
rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
viewrecords: true
});
initGrids[ui.newTab.index()] = true;
}
}
if (jsondata.object3.total > 0) {
if (ui.newTab.index() === 2 && initGrids[ui.newTab.index()] === false) {
colD = jsondata.object3.colData;
colN = jsondata.object3.colNames;
colM = jsondata.object3.colModel;
jQuery("#list3").jqGrid({
jsonReader: {
cell: "",
repeatitems: false,
root: "colData",
id: "0"
},
mtype: 'POST',
datatype: 'jsonstring',
datastr: colD,
colNames: colN,
sortable: true,
colModel: colM,
autowidth: true,
height: '50%',
pager: jQuery('#pager3'),
rowNum: 50,
rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
viewrecords: true
});
initGrids[ui.newTab.index()] = true;
}
}
}
});
<div id="gridWrapper">
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div id="tabs-1">
<table id="list"> // this table works perfectly
<tr>
<td/>
</tr>
</table>
<div id="pager"/>
</div>
<div id="tabs-2">
<table id="list2">
<tr>
<td/>
</tr>
</table>
<div id="pager2"/>
</div>
<div id="tabs-3">
<table id="list3">
<tr>
<td/>
</tr>
</table>
<div id="pager3"/>
</div>
</div>
Please check this code why server side data as json is only loaded in the first tab of the jqgrid table.
You have a error in your html definition in case you use html4 or html 5 - the div tag can not have self closing tag. - i.e the definition should be changed to:
<div id="gridWrapper">
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div id="tabs-1">
grid 1
<table id="list">
<tr>
<td><td>
</tr>
</table>
<div id="pager"></div>
</div>
<div id="tabs-2">
grid 2
<table id="list2">
<tr>
<td><td>
</tr>
</table>
<div id="pager2"></div>
</div>
<div id="tabs-3">
grid 3
<table id="list3">
<tr>
<td><td>
</tr>
</table>
<div id="pager3"></div>
</div>
</div>
The same apply for the table data element td.
I checked your code and it works perfectly.
Also you will need to check your conditions
if (jsondata.object2.total > 0) {
if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
...
i am using jqgrid one grid contain master data and other grid contain detail data , when i click master grid row detail will show in detail grid (Master detail) so i am using onselectRow event i want to use edit button link in master when i use previous code then onselectrow event not fire and data not show in master grid , and this code working good in master detail grid . kindly expert tell what is the problem when i use edit button link in master grid then why event not fire .
Jqgrid
jQuery(document).ready(function ($) {
// master grid
var $grid = $("#jqGrid");
$grid.jqGrid({
url: '#Url.Action("RequisitionGrid")',
datatype: "json",
jsonReader: { id: 'Req_ID' },
colModel: [
{ name: 'Req_ID', index: 'Req_ID', label: 'Req ID', hidden: true, editable: true, editable: "disabled", align: "center", width: 12 },
{ name: 'Comp_ID', index: 'Comp_ID', label: 'Comp ID', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 2 },
{ name: 'GL_Year', index: 'GL_Year', label: 'GL Year', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 40 },
{
name: 'ReqDate', index: 'ReqDate', label: 'Date', width: 3,
editable: true, edittype: 'text',
editoptions: {
size: 10, maxlengh: 10,
dataInit: function (element) {
$(element).datepicker({ dateFormat: 'yy/mm/dd' })
}
}
},
{ name: 'Job', index: 'Job', label: 'Job', width: 15, editable: true },
{ name: 'ApprovedBy', index: 'ApprovedBy', label: 'Approved by', width: 7, editable: true },
{ name: 'IsApproved', index: 'IsApproved', hidden: true, label: 'Approved', width: 10, editable: true },
{
name: 'Req_ID', label: '', search: false, width: '3', formatter: function (cellvalue, options, rowObject, rowdata) {
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqMainUpdateMethod(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
}
},
],
height: 250,
shrinkToFit: true,
search: true,
autowidth: true,
rowNum: 20,
viewrecords: true,
page: 1,
scroll: 1,
viewrecords: true,
rownumbers: true, // show row numbers
rownumWidth: 25,
navOptions: {
reloadGridOptions: { fromServer: true }
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: {
fromServer: true
}
},
forceClientSorting: true,
loadonce: true,
caption: 'Requisition Main',
emptyrecords: 'No Records are Available to Display',
onSelectRow: function (ids) {
if (ids != null) {
var data = $("#jqGrid").getRowData(ids);
$("#jqGridDetails").jqGrid('setGridParam', { url: "/Home/RequisitionDetailGrid/" + data.Req_ID, datatype: 'json' });
$("#jqGridDetails").jqGrid('setCaption', 'Requisition Detail For :: <b style="color: Red">' + data.Job + '</b>');
$("#jqGridDetails").trigger("reloadGrid");
}
},
onSortCol: clearSelection,
onPaging: clearSelection,
pager: "#jqGridPager"
});
});
// detail grid
$("#jqGridDetails").jqGrid({
url: '#Url.Action("RequisitionDetailGrid")',
mtype: "GET",
datatype: "json",
page: 1,
colModel: [
{ key: true, name: 'Req_ID_Det', index: 'Req_ID_Det', label: 'Req Det ID', hidden: true, editable: true, align: "center", width: 12 },
{ name: 'ReqNo', index: 'ReqNo', label: 'Req No', hidden: true, align: "left", width: 40 },
{ name: 'SrNo', index: 'SrNo', label: 'Sr No', align: "left", width: 3 },
{ name: 'GL_Year', index: 'GL_Year', hidden:true,editable:true, label: 'GL_Year', width: 5 },
{ name: 'ItemDesc', index: 'ItemDesc', label: 'Item Desciption', width: 20 },
{ name: 'Qty', index: 'Qty', label: 'Qty', width: 2 },
{ name: 'Remarks', index: 'Remarks', label: 'Remarks', width: 10 },
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodFormatter(cellvalue, options, rowObject);
}
},
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodDelete(cellvalue, options, rowObject);
}
},
],
autowidth: true,
shrinkToFit: true,
navOptions: {
reloadGridOptions: { fromServer: true }
},
rowNum: 5,
loadonce: true,
height: '100',
viewrecords: true,
caption: 'Requisition Detail',
emptyrecords: 'No Records are Available to Display',
pager: "#jqGridDetailsPager"
});
function clearSelection() {
jQuery("#jqGridDetails").jqGrid('setGridParam', { url: "RequisitionDetailGrid", datatype: 'json' }); // the last setting is for demo purpose only
jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid:: none');
jQuery("#jqGridDetails").trigger("reloadGrid");
}
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:getbyID(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
function MethodDelete(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqDelete(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Delete</a>';
}
HTML
<!--Requsitition Detail Update Model-->
<div class="modal fade" id="ReqMainUpdateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Update Requisition Main</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<form id="NewOrderForm">
<div class="modal-body">
<div class="form-row">
<div class="col" id="Req_ID">
<div class="md-form">
#Html.TextBoxFor(m => m.Req_ID, new { #class = "form-control mr-sm-3", #id = "txtReqIDmain", Required = true })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<!-- Requisition Date-->
<label for="lblReqDate">Req Date</label>
<div class="md-form">
#Html.TextBoxFor(m => m.ReqDate, new { #class = "form-control mr-sm-3", #id = "txtReqDateMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblJOB"> JOB</label>
<div class="md-form">
#Html.TextBoxFor(m => m.Job, new { #class = "form-control mr-sm-3", #id = "txtReqjOBMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApprovedBy"> Approved By </label>
<div class="md-form">
#Html.TextBoxFor(m => m.Approvedby, new { #class = "form-control mr-sm-3", #id = "txtApprovedByMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApproved"> Approved </label>
<div class="md-form">
#Html.CheckBoxFor(m => m.IsApproved, new { #class = "form-control mr-sm-3", #id = "txtIsApprovedMain" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="ReqMainUpdate" type="submit" class="btn btn-danger" onclick="RequisitionDetail_Update();">Update Record</button>
</div>
</div>
</form>
</div>
<!--/.Content-->
</div>
</div>
I am using Typeahead Jquery plugin. Each time I click on the button a Bootstrap modal will be shown and I can select multiple options inside my input.
my problem is :
When I close the modal and reopen it the previous selected values are still shown inside the input. I need to empty cache each time and reload my page so that next time the input will be empty.
I used different ideas when the modal is closed it will reset the input to empty but still not working.
here my ideas :
$('.typeahead').typeahead().bind('typeahead:closed', function () {
$(this).val("");
});
or
$("#myinput").val('');
Any suggestions please ? Here is my code. Thank you for your help.
$(document).ready(function() {
var dataDefaultColumns = [{
"name": "country",
"id": "country",
"type": "Shipment"
}, {
"name": "customer name",
"id": "customer name",
"type": "Shipment"
}, {
"name": "order number",
"id": "order number",
"type": "Serial"
}, {
"name": "line number",
"id": "line number",
"type": "Serial"
}];
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead-input",
minLength: 0,
maxItem: false,
hint: true,
highlight: true,
searchOnFocus: true,
cancelButton: true,
mustSelectItem: true,
backdropOnFocus: true,
group: {
key: "type",
template: function(item) {
var type = item.type;
return type;
}
},
emptyTemplate: 'no result for {{query}}',
groupOrder: ["Shipment", "Serial"],
display: ["name"],
correlativeTemplate: true,
dropdownFilter: [{
key: 'type',
template: '<strong>{{type}}</strong> Report',
all: 'All Reports'
}],
multiselect: {
matchOn: ["id"],
data: function() {
var deferred = $.Deferred();
return deferred;
}
},
template: '<span>' +
'<span class="name">{{name}}</span>' +
'</span>',
source: {
groupName: {
data: dataDefaultColumns
}
}
});
$("#mybutton").click(function(){
$("#myModal").modal('show'); });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.2/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>
<button type="button" id="mybutton" class="btn btn-primary" data-target="#myModal">Click Me
</button>
<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Default</h4>
</div>
<div class="modal-body">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="myinput"
class="js-typeahead-input"
name="input[query]"
type="search"
placeholder="Search"
autofocus
autocomplete="on">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JQGrid is awesome for displaying data with jQuery, but it doesn't exactly have great documentation.
I'm having a problem with the grid when the grid has only one element to display. For some reason, it's aligning the single row to the bottom rather than to the top.
Here's a picture of a single misaligned row:
Here are the jqgrid options I'm passing in:
jQGridOptions = {
"recordtext": '{0} - {1} of {2}',
"url": 'data.json',
'datatype': 'json',
'mtype': 'GET',
'colModel': [
{ 'name': 'Rank', 'align': 'center', 'index': 'Rank', 'sortable': false, 'search': false },
{ 'name': 'Name', 'index': 'Name', 'sortable': false, 'search': true },
{ 'name': 'Score', 'index': 'Score', 'sortable': false, 'search': false }
],
'pager': '#ranking-pager',
'rowNum': 10,
'altRows': true,
'scrollOffset': 0,
'colNames': ["Rank", "Name", "Score"],
'width': 696,
'height': 'auto', // '100%', // 300,
'page': 1,
'sortname': 'Rank',
'sortorder': "asc",
'hoverrows': true,
'viewrecords': true,
'gridComplete': function () {
$('.ui-jqgrid-bdiv').jScrollPane({ showArrows: true, scrollbarWidth: 17, arrowSize: 17, scrollbarMargin: 0 });
if (selectedRank !== -1) {
selectRank(selectedRank);
selectedRank = -1;
}
},
'jsonReader': {
id : 'Rank',
'repeatitems': false
}
};
As requested, here's the result from data.json:
{
"page":1,
"total":1,
"records":1,
"rows": [{
"Name":"Gil Agostini",
"Score":94,
"Rank":1
}]
}
Call to jQGrid:
$(document).ready(function () {
$("#ranking-table").jqGrid(jQGridOptions);
});
Html:
<div style="float: left;">
<div class="hvy-border1">
<div class="hvy-border2">
<div class="hvy-top-left hvy-corner">
<div>
<!-- -->
</div>
</div>
<div class="hvy-top-right hvy-corner">
<div>
<!-- -->
</div>
</div>
<div class="clear">
<!-- -->
</div>
<div id="table-and-pager" style="margin: 3px;">
<table id="ranking-table" class="scroll" cellpadding="0" cellspacing="0" style="height: 300px">
</table>
<div id="ranking-pager" class="scroll" style="text-align: center;">
</div>
</div>
<div class="clear">
<!-- -->
</div>
<div class="hvy-bottom-left hvy-corner">
<div>
<!-- -->
</div>
</div>
<div class="hvy-bottom-right hvy-corner">
<div>
<!-- -->
</div>
</div>
</div>
</div>
</div>
Can anyone give me any clue what I maybe doing wrong here?
How do I get the row to align to the top rather than the bottom?
I can not reproduce the problem which you describes. I suppose that you use some additional setting for jqGrid: you don't post the whole JavaScript code of your example.
Nevertheless I can definitively say that you has some problems in the format of the JSON data returned from the server. Important is that every row of data must has an unique id. For example
{ "id":123, "Name":"Gil Agostini", "Score":94, "Rank":1 }
instead of
{ "Name":"Gil Agostini", "Score":94, "Rank":1 }
The id can has also string type and not be only numeric. Moreover you have to define jsonReader parameter of jqGrid, because your data has named elements instead of the standard array of strings (which is more compact and small data). In the case you should at least use jsonReader: {repeatitems: false}.
If some other grid column (like the Name column) can be interpret as the id, you can either include key:true in the corresponding column definition or use id:'Name' as a property of the jsonReader.
For example the following jsonReader
jsonReader: {
repeatitems: false,
id: 'Name'
}
can be used to read your current JSON data (see live here). Using any tool which you prefer you can verify the id value of the <tr> element of the grid.