I have a grid that has a grid in the detailInit and when I add a new row to the grid in the detailInit the detailInit collapses.
How can I stop it from collapsing when a new record is added? I have tried using e.preventDefault() on the button click event of adding a new row but that didn't work out.
You cannot prevent it from collapsing because every time you change something to the data it automatically rebinds and redraw the table.
What you can do however is to capture the rebinding, find the opened details and after the binding finish reopen them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];
$(document).ready(function () {
let expanded = [];
var element = $("#grid").kendoGrid({
dataSource: data,
toolbar: [{name: "create"}],
height: 600,
detailInit: detailInit,
editable: true,
columns: [
{
field: "id",
title: "id",
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{command: ["destroy"]},
],
dataBinding: function (e) {
expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
return $(row).data("uid");
});
},
dataBound: function (e) {
this.expandRow(this.tbody.children().filter(function (idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
},
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(e.data.orders);
},
}
},
});
}
</script>
</div>
</body>
</html>
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" }
My _Layout.cshtml like this
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - E-Reader Statistics</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#* #Scripts.Render("~/bundles/jquery")*#
<link href="~/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script src="~/jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="~/jqGrid/js/jquery-1.9.0.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.src.js"></script>
</head>
in Index.chtml
#model List<LSStatisticalReport.ViewModels.GSViewModel>
#{
ViewBag.Title = "Index";
}
#*<h2>General Statistics</h2>*#
<script type="text/javascript">
// var jq = $.noConflict();
$(document).ready(function () {
var genStatGrid = $('#list');
genStatGrid.jqGrid({
caption: "General Statistics",
url: '/Statistics/GetRecords/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
colNames: ['Student', 'Teacher', 'Date'],
colModel: [
{ name: 'studentDesignation' },
{ name: 'teacherDesignation' },
{ name: 'dateLength' },
],
rowNum: 5
});
});
</script>
But when I am running the project I am getting an error in console:
"Uncaught TypeError: Object [object Object] has no method 'jqGrid' "
This type of error says this : please Define jqgrid library before related init scripts. I have seen this error before, although you have defined related library in head tag. So I solved this problem by removing its library from head tag and placing it at the view before the script and works properly.
I think this occurs because of partial load of page. so use this at the index view:
#model List<LSStatisticalReport.ViewModels.GSViewModel>
#{
ViewBag.Title = "Index";
}
#*<h2>General Statistics</h2>*#
//added
<script src="~/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.src.js"></script>
//end added
<script type="text/javascript">
// var jq = $.noConflict();
$(document).ready(function () {
var genStatGrid = $('#list');
genStatGrid.jqGrid({
caption: "General Statistics",
url: '/Statistics/GetRecords/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
colNames: ['Student', 'Teacher', 'Date'],
colModel: [
{ name: 'studentDesignation' },
{ name: 'teacherDesignation' },
{ name: 'dateLength' },
],
rowNum: 5
});
});
</script>
the purpose is that after editing the text area in a line, and clicking on another row, the first one should get saved and the row should be restored. The code works till saving the record, but not restoring the edited row after saving.. Please help me to rectify the issue.
<?
if(isset($_GET)){
$startDate = $_GET['start_date'];
$endDate = $_GET['end_date'];
$type = $_GET['type'];
}
?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="../js/powertip/jquery.powertip.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/powertip/jquery.powertip-1.1.0.min.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
.ratingDetails{
font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;
}
</style>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'driver_name',
viewrecords: true,
sortorder: "asc",
subGrid : true,
subGridUrl: 'feedbacks_bookings_rated_pagination.php?booking=424519',
subGridModel: [{
name:['Booked on','Trip Type/ Amount','Driver Details','Local Office Phone','Essential Feedbacks','Other Feedbacks'],
width: [90,90,130,100,160,200]}
],
onSelectRow:
function(id){
//alert(lastSel+"-hi-"+id);
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel);
jQuery("#rowed2").jqGrid('restoreRow',lastSel);
//jQuery("#rowed2").trigger("reloadGrid");
}
lastSel = id;
}
jQuery(this).jqGrid('resetSelection');
jQuery(this).editRow(id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: true,save: true, del: false, reload: true});
jQuery.fn.editRow = function(param) {
var rowid = param;
var booking_id = jQuery("#rowed2").jqGrid ('getCell', param, 'booking_id');
jQuery("#rowed2").jqGrid('editRow',rowid, {
keys : true,
oneditfunc: function() {
}
});
};
jQuery.fn.saveRow = function(param) {
var rowid = param;
jQuery("#rowed2").jqGrid('saveRow',rowid, {
successfunc: function(response) {
//obj = eval('(' + response.responseText + ')');
//$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
},
url : "feedbacks_bookings_rated_pagination.php",
mtype : "POST",
});
};
jQuery.fn.restoreRow = function(param) {
var rowid = param;
alert("rstore-"+rowid);
jQuery("#rowed2").jqGrid('restoreRow',rowid, {
afterrestorefunc : function( response ) {
alert("aaaa");
obj = eval('(' + response.responseText + ')');
$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
}
});
};
})
function closeAction(bkId){
if(confirm("Are you sure to close the action?")){
//Ok button pressed...
$.post('feedbacks_bookings_rated_pagination.php?action=close',{booking_id: bkId},
function(response){
alert(response.responseText);
$("#rowed2").trigger("reloadGrid");
return true;
},
"json"
);
}
}
// Function to display rating crieteria values as a tooltip on mouseover of Rating caption
function showRatingDetailsToolTip(id) {
$('#rating'+id).data('powertiptarget', 'tooltip'+id);
$('#rating'+id).powerTip({placement: 'e',smartPlacement: true,mouseOnToPopup: true});
}
</script>
</body>
</html>
Again.. given below a rectified code.. here also, the previous row not getting back from edit mode on clicking next row. Can you tell me the problem?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true,editable:true,edittype:'text'},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'booking_id',
viewrecords: true,
sortorder: "asc",
onSelectRow:
function(id){
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel,{url : "feedbacks_bookings_rated_pagination.php",mtype : "POST"});
jQuery(this).jqGrid('editRow',lastSel, false);
}
lastSel = id;
}
jQuery(this).jqGrid('editRow',id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: false,save: false, del: false, reload: true});
})
</script>
</body>
</html>
=====================
At last I could find the real problem.
It is not with the content of 'action_taken' field, but with the just previous field. In that I put a table inside a hidden DIV under the actual content, used for a tooltip content.
What happens is that after editing the action_taken field in next column and the server response is received, the edited content of 'action_taken' field was set to the content and title of the first TD of this table in previous column. Also, the edited column does not return from edit mode. If I remove the table from previous column, everything works ok. I tried with different id/style class for the table, but no change. What could be the problem? The table structure in previous column causing the issue is given below.
<table id='ratingdata32380' width='189' border='0' cellpadding='0' cellspacing='0' bordercolor='#000000' bgcolor='#4f9de2'>
<tr><td align='left' valign='middle' class='ratingDetails'>Was On Time?</td><td align='center' valign='middle' class='ratingDetails'>aaaa</td></tr>
</table>
The class 'ratingDetails' is nothing but just the font definition.
.ratingDetails{font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;}
Any idea ?
You should decide which behavior should have your grid. You you want save the data from the previously editing row then you should call saveRow. If you want to discard the current changes and to restore the previous one you should call restoreRow. Calling of restoreRow after saveRow like you do currently inside of onSelectRow callback has no sense.
So if I understand correctly what you want to implement you should remove the line with saveRow which is before calling of restoreRow.
I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQGRID Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
createGrid();
});
function createGrid() {
$("#jqgrid-table").jqGrid({
colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'age', index:'age', width:50},
{name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
{name:'type', index:'type', width: 56}
],
width: 800,
datatype:'local',
pager: '#pager2',
viewrecords: true,
caption:"JSON Example"
});
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true,
Find: 'Filter'
};
jQuery("#jqgrid-table").jqGrid('navGrid',
'#pager2',
{search:true, edit:false, add:false, del:false, refresh:false},
null, null, null, searchOptions
);
var data = getData();
for(var i =0; i < data.length; i++) {
var r = data[i];
jQuery("#jqgrid-table").addRowData(r.id, r);
}
}
function getData() {
return [
{id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'},
{id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
{id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
];
}
</script>
</head>
<body>
<div id='jqgrid-div'>
<table id='jqgrid-table'></table>
<div id="pager2"></div>
</div>
</body>
</html>
I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function() {
$('input.delete-rule:first',searchDialog).unbind('click');
// set fucus in the last input field
setTimeout(function() {
// set fucus in the last input field
$('input[type="text"]:last',searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function() {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
You can see the corresponding demo here.