delRowData doesn't update the rowcount in groupText

delRowData doesn't update the rowcount in groupText - jqgrid

I am trying to delete a row from jqgrid using the method delRowData which is using the grouping feature. When i delete a row from the jqgrid it doesn't seem to be updating the count in the groupText. Below is the code I have tried
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var mydata = [
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"450.00",tax:"40.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"40.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"35.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"450.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
jQuery("#list3").jqGrid({ data: mydata,
datatype: "local",
height: 400,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:100,
rowList:[10,20,30],
pager: '#pager3',
sortname: 'amount asc, tax',
viewrecords: true,
sortorder: "asc",
loadonce: true,
multiSort: true,
grouping : true,
groupingView : {
groupField : ['invdate'],
groupColumnShow : [false],
groupText : ['<b>{0} - ({1})</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupSummary : [false],
plusicon : 'ui-icon ui-icon-triangle-1-e',
minusicon : 'ui-icon ui-icon-triangle-1-s'
},
caption: "Load Once Example"
});
jQuery("#deleteButton").click(function(){
var rowid = $("#list3").jqGrid ("getGridParam", "selrow");
jQuery("#list3").jqGrid("delRowData",rowid);
});
});
</script>
</head>
<body>
<table id="list3"></table>
<button id="deleteButton">Delete Row</button>
</body>
</html>
I hope I have explained my problem. Please let me know if anything else need to be added.
BTW I am using jqgrid version : "4.5.4"
Thanks in advance
Mobin

I got the solution from the trirand forum
I just had to destroy and recreate the grouping after calling delRowData on the row.
jQuery("#list3").jqGrid('groupingRemove', true);
$('#list3').jqGrid('groupingGroupBy', 'invdate');

Related

Bind Json result to Grid of kendoUI using ODATA

I want to bind Json result to kendoUI grid using ODATA v4 but i am unable to do so. Below code works for the url http://services.odata.org/v2/Northwind/Northwind.svc/Customers which returns a xml result but why dont it work for http://services.odata.org/v4/Northwind/Northwind.svc/Customers which returns a json. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2015.1.408/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://services.odata.org/v2/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
</body>
</html>

Couple of things. I don't think the v4 implementation on services.odata.org supports jsonp. The return value doesn't appear to be wrapped. Also you need to change your type to "odata-v4" for v4 odata.
Also the return array isn't inside a property on the return object called "results", it's now "value" so I had to set that in the schema on the dataSource. I also changed the transport.read into an object and added the requisite properties.
dataSource: {
type: "odata-v4",
transport: {
read: {
url: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",
dataType: "json",
data: {
q: "#kendoui"
}
}
},
pageSize: 20,
schema: {
data: "value"
}
},
See working sample at http://jsbin.com/satafa/1/edit?html,js,output

You need to add "odata-v4" as type in the datasource. Please refer the fiddle
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }

JqGrid with subgrid and local data not working in IE9 - throws - "SCRIPT600: Invalid target element for this operation"

I am new to JQGRID and I am using version 4.7.1.
I am trying to create JQGRID with SUBGRID. The code is working as expected in Google chrome, but I am getting the below mentioned error in IE9.
SCRIPT600: Invalid target element for this operation.
jquery.jqGrid.src.js, line 1639 character 6
How can I resolve the error and make it work in IE9. Kindly do the needful.Thanks in advance.
<html>
<head>
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery- ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
<style>
.ui-jqgrid tr.ui-row-ltr td
{
border-right-color: transparent;
height:auto;
overflow:hidden;
padding-top:6px;
padding-bottom:6px;
position:relative;
vertical-align:text-top;
white-space:normal !important;
}
th.ui-th-column { border-right-color: transparent !important }
.ui-jqgrid .ui-jqgrid-btable
{
table-layout:auto;
}
.top-buffer { margin-top:20px; }
.cursorPointer:hover{
cursor:pointer
}
.ui-jqgrid .ui-jqgrid-htable th div {
height:auto;
overflow:hidden;
padding-top:6px;
padding-bottom:6px;
position:relative;
vertical-align:text-top;
white-space:normal !important;
}
</style>
</head>
<body>
<div >
<table id="grid"></table>
</div>
</body>
<script type="text/javascript">
var mydata = [
{id: "1", label:"No 1", number:"02200220", status:"OPEN", level:"0", parent: "", isLeaf: false, expanded:false, loaded:true},
{id: "2", label:"No 2", number:"77733337", status:"ENTERED", level:"0", parent: "", isLeaf: false, expanded:false, loaded:true},
{id: "6", label:"No 2a", number:"12345123", status:"WIRED", level:"1", parent: "2", isLeaf: false, expanded:false, loaded:true},
{id: "7", label:"No 2a1", number:"1111111111", status:"WIRED", level:"2", parent: "6", isLeaf: true, expanded:false, loaded:true},
{id: "3", label:"No 3", number:"02200111", status:"OPEN", level:"0", parent: "", isLeaf: false},
{id: "4", label:"No 3a", number:"02200221", status:"OPEN", level:"1", parent: "3", isLeaf: true, expanded:false, loaded:true},
{id: "5", label:"No 3b", number:"02242320", status:"CLOSED", level:"1", parent: "3", isLeaf: true, expanded:false, loaded:true}
];
var grid = $("#grid");
grid.jqGrid({
// data: mydata, // doesn't work
datatype: "local",
colNames: ['Id', 'Label', 'Number', 'Status'],
colModel: [
{ name:'id',index:'id', width:60, sortable:false},
{ name: 'label', index: 'label', width: 180, sortable:false},
{ name: 'number', index: 'number', width: 120, formatter: function (cellValue, option, rowObject)
{
return "<span><img src='images/play.png'></img></span><span style='padding-left:10px'><img src='images/Download-icon.png'><span>";
} },
{ name: 'status', index: 'status', width: 120, sortable:false } ],
hidegrid: false,
gridview: true,
sortname: 'id',
loadonce: true,
treedatatype: 'local',
ExpandColumn: 'label',
height: 'auto',
pager : "#gridPager",
caption: "Prouct Page Table"
});
// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
</script>
</html>

TreeGrid don't works with datatype: "local", but one can use datatype: "jsonstring" instead. One need just use datastr: mydata instead of data: mydata. You should use parent: "null" instead of parent: "" additionally for top level icons. It allows to have local sorting additionally. See the answer for the corresponding code example.
The reason of the problem "jquery.jqGrid.src.js, line 1639" could be the bug with the usage of firstElementChild. See the answer for details. You can download code of jquery.jqGrid.src of jqGrid 4.7.0 after the fix from here. Alternatively you can download beta version of new free jqGrid from my fork of jqGrid.

jqGrid load in MVC

I'm new in jqgrid. I try to use jqgrid in my mvc project. I'm using the following code for mapping the data to grid. But its not working. The function GetJqGridData is loading first in my MVC project.
Below is code for Controler.
public ActionResult GetJqGridData()
{
var jqGridData = new JqGridObject()
{
Data = GetSomeSampleData(),
Page = "1",
PageSize = 3, // u can change this !
SortColumn = "1",
SortOrder = "asc"
};
return Json(jqGridData, JsonRequestBehavior.AllowGet);
}
Below is code for VIEW.
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myGrid").jqGrid({
url: '#Url.Action("GetJqGridData")',
datatype: 'json',
myType: 'POST',
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', index: 'Id' },
{ name: 'Name', index: 'Name' }
],
jsonReader: {
root: 'Data',
id: 'id',
repeatitems: false
},
pager: $('#myPager'),
rowNum: 5,
rowList: [2, 5, 10],
width: 600,
viewrecords: true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<table id="myGrid"></table>
<div id="myPager"></div>
This is result i'm getting
Thanks
Bobbin

Try using the following json format:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
for more informations about the format, take a look in this link : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

jqgrid - navigator editing

I'm trying to edit a record in jqgrid ( trying to make a call to the server) using the navigator . However, when I click on the submit I'm getting error Status: 'Not Found'. Error code: 404
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url value="/main/csList" var="csListUrl"/>
<c:url value="/main/editVevaIndividual" var="editUrl"/>
<c:url value="/main/hostListByApp" var="hostListUrl"/>
<c:url value="/users/create" var="addUrl"/>
<c:url value="/users/update" var="editUrl"/>
<c:url value="/users/delete" var="deleteUrl"/>
<html>
<head>
<title>Individual Records </title>
<!--
<script src="/sam/resources/jqueryMenu/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/sam/resources/jqueryMenu/createMenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="/sam/resources/jqueryMenu/menu.css"/>
-->
<script type='text/javascript' src='<c:url value="/resources/jqueryMenu/jquery-1.3.2.min.js"/>'></script>
<script src= '<c:url value="/resources/jqueryMenu/createMenu.js"/>'></script>
<link rel="stylesheet" href= '<c:url value="/resources/jqueryMenu/menu.css"/>'/>
<script>
$(document).ready(function(){
createMenu($("#content"));
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href='<c:url value="/resources/ui.jqgrid.css"/>' />
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src= '<c:url value="/resources/grid.locale-en.js"/>'></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src='<c:url value="/resources/jquery.jqGrid.src.js"/>'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var mydata = [
],
grid = $("#list");
grid.jqGrid({
url:'${csListUrl}',
datatype: 'json',
ignoreCase: true,
mtype: 'GET',
colNames:['INDIVIDUAL ID','LAST NAME','FIRST NAME','VENDOR ID','INACTIVE REASON CODE','INACTIVE DATE'],
colModel:[
{name:'individualId',index:'individualId', width:50 },
{name:'lastName',index:'lastName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'firstName',index:'firstName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'vendorID',index:'vendorID', width:30,} ,
{name:'inactiveReasonCode',index:'inactiveReasonCode', width:30} ,
{name:'inactiveDate',index:'inactiveDate', width:30}
],
postData: {},
rowNum:10,
rowList:[10,20,40,60],
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'individualId',
viewrecords: true,
sortorder: "asc",
editurl:'${editUrl}',
caption:" individual Records",
emptyrecords: "Empty records",
loadonce: true,
loadComplete: function() {},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "individualId"
}
});
$("#search").click(function() {
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"lastName",op:"cn",data:searchFiler});
f.rules.push({field:"firstName",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
grid.jqGrid('navGrid','#pager',
{edit:true, add:false, del:false,refresh:true,view:true},
{}, {}, {},
{ // search
sopt:['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{ // vew options
beforeShowForm: function(form) {
$("tr#trv_id",form[0]).show();
},
afterclickPgButtons: function(whichbutton, form, rowid) {
$("tr#trv_id",form[0]).show();
}
});
});
//]]>
</script>
</head>
<body>
<div style="position:relative; z-index:3;" id="content"></div>
<br></br>
<fieldset >
<input type="text" id="filter"/>
<button type="button" id="search">Search</button>
</fieldset>
<div style="position:relative; z-index:1;">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</body>
</html>

How to assign xml data to jqgrid

jQuery("#assignfixtureTable").jqGrid({
url : successdata,
datatype: "xml",
height: 250,
I want to assign the xml data to jqgrid , I dont want to call the url and assign it to it.

You can use a datatype of xmlstring and pass your xml data using the datastr option. Here is an example from the documentation page:
<script>
var mystr =
"<?xml version='1.0' encoding='utf-8'?>
<invoices>
<rows>
<row>
<cell>data1</cell>
<cell>data2</cell>
<cell>data3</cell>
<cell>data4</cell>
<cell>data5</cell>
<cell>data6</cell>
</row>
</rows>
</invoices>";
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: 'xmlstring',
datastr : mystr,
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55, sorttype:'int'},
{name:'invdate', index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'},
{name:'amount', index:'amount', width:80, align:'right', sorttype:'float'},
{name:'tax', index:'tax', width:80, align:'right', sorttype:'float'},
{name:'total', index:'total', width:80, align:'right', sorttype:'float'},
{name:'note', index:'note', width:150, sortable:false} ],
pager: '#pager',
rowNum:10,
viewrecords: true,
caption: 'My first grid'
});
});
</script>

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

delRowData doesn't update the rowcount in groupText - jqgrid

I got the solution from the trirand forum I just had to destroy and recreate the grouping after calling delRowData on the row. jQuery("#list3").jqGrid('groupingRemove', true); $('#list3').jqGrid('groupingGroupBy', 'invdate');

Related

Bind Json result to Grid of kendoUI using ODATA

JqGrid with subgrid and local data not working in IE9 - throws - "SCRIPT600: Invalid target element for this operation"

jqGrid load in MVC

jqgrid - navigator editing

How to assign xml data to jqgrid

Categories

Resources