I am a beginner in the jQgrid, Last days i try to learn jQgrid and create a sample
Mvc application. refer on jQgrid Website. http://www.trirand.com/blog/jqgrid/jqgrid.html
I try to make a Grid as Subgrid in jQGrid. I want Add, Edit, Delete functions in all
child grid is possible.
and i am facing a problem when i expand a row in the jQgrid, parent row is not showing
the collapse icon. Please see my image below.
please see the Red box. It's not showing the minus icon. Please see my code below.
<table id="listsg11">
</table>
<div id="pagersg11">
</div>
<script type="text/javascript">
jQuery("#listsg11").jqGrid({
url: '/Home/DynamicGridData/',
datatype: "json",
mtype: 'POST',
height: 190,
width: 600,
colNames: ['Id', 'Votes', 'Title'],
colModel:
[
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Votes', index: 'Votes', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 400, align: 'left' }
],
rowNum: 8,
rowList: [8, 10, 20, 30],
pager: '#pagersg11',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
caption: "Grid as Subgrid"
,
subGridRowExpanded: function (subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created whitin a table data
// the id of this elemenet is a combination of the "sg_" + id of the row
// the row_id is the id of the row
// If we wan to pass additinal parameters to the url we can use
// a method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the flowing
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_table_id).jqGrid({
url: "/Home/DynamicGridData1/",
datatype: "json",
mtype: 'POST',
colNames: ['Id', 'Votes', 'Title'],
colModel:
[
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Votes', index: 'Votes', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 400, align: 'left' }
],
rowNum: 20,
rowList: [8, 10, 20, 30],
pager: pager_id,
sortname: 'Id',
sortorder: "asc",
height: 180,
width: 500,
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: true, add: true, del: true })
}
//,
// subGridRowColapsed: function (subgrid_id, row_id) {
// alert(row_id);
// // this function is called before removing the data
// //var subgrid_table_id;
// //subgrid_table_id = subgrid_id+"_t";
// //jQuery("#"+subgrid_table_id).remove();
// }
});
jQuery("#listsg11").jqGrid('navGrid', '#pagersg11', { add: true, edit: true, del: true });
</script>
Please help.
Why you don't try put the javascript inside of
$(function(){
//here go the script
});
Because one of the reasons are that the jqgrid are not correctly downloaded yet.
So try this!
Good Luck!
Related
At work, we are having performances issues with a kendo grid that has a lot of row. We are thinking about using virtualization of remote data as a solution like you can see on the link below.
https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
The problem we have with that solution is that we allow filters on a lots of our columns and only the rows that are defined in the pagesize of the grid are displayed.
In the link below, you can easily see what I mean by that. I added the filterable attribute to the grid in the telerik demo and only the rendered row are displayed if I try to add a filter.
https://dojo.telerik.com/ayaKidet
The question was previously asked here but without an answer :(
Kendo Grid Virtualization of Lots of Data with Filters?
If anyone know of a way to apply the filter to the whole datasource it would be awesome.
Thank you very much
As well as you have set serverSorting to true in your datasource (the following code is from the dojo link):
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [
{field: "OrderID", title: "Order ID", width: 110},
{field: "CustomerID", title: "Customer ID", width: 130},
{field: "ShipName", title: "Ship Name", width: 280},
{field: "ShipAddress", title: "Ship Address"},
{field: "ShipCity", title: "Ship City", width: 160},
{field: "ShipCountry", title: "Ship Country", width: 160}
]
});
you should set serverFiltering to true. The question is that, by default, filtering is applied to the data that is in memory but, of course, not all records that meet the condition have already been transferred and, of course, you don't want to transfer all data before start filtering.
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true, // Add this to your code
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 100,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
columns: [{
field: "OrderID",
title: "Order ID",
width: 110
},
{
field: "CustomerID",
title: "Customer ID",
width: 130
},
{
field: "ShipName",
title: "Ship Name",
width: 280
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipCity",
title: "Ship City",
width: 160
},
{
field: "ShipCountry",
title: "Ship Country",
width: 160
}
]
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>
In my code below, I want to set "Qty Shipped" & "Qty Ordered" to be editable. However, those columns are not editable even when set to true.
How would I fix this?
<div id="MonthlyTransactionReport"
data-role="grid"
data-resizable="false"
data-navigatable="true"
data-pageable="true"
pagesize="10"
data-scrollable="true"
data-sortable="false"
data-columns="[
{ 'field': 'poNumber', 'title': '<b>PO #', 'width': 70, editable: false },
{ 'field': 'lineNumber', 'title': '<b>Line #', 'width': 65, editable: false },
{ 'field': 'itemNumber', 'title': '<b>Item #', 'width': 100, editable: false },
{ 'field': 'itemDesc', 'title': '<b>Description', 'width': 210, editable: false },
{ 'field': 'qtyOrdered', 'title': '<b>Qty <br> Ordered', 'width': 65, editable: true },
{ 'field': 'qtyShipped', 'title': '<b>Qty <br> Shipped', 'width': 65, editable: true },
Actually the "editable" is option of the grid - please check the example below how to enable it:
<div data-role="grid"
date-scrollable="true"
data-editable="true"
If you need to turn off the editing of given column you can do so using the grid dataSource "schema.model.fields.field.editable" option:
schema: {
model: {
id: "ProductID",
fields: {
ProductName: { type: "string", editable: false },
UnitPrice: { type: "number" }
I have made grid as below:
$("#gvObservationScore").kendoGrid({
dataSource: Data,
columns: [{
title: "Code",
width: 4,
template: "#= getCodeForScoreGrid(TitleCode,componentCode)#"
}, {
field: "CorrelatedTo",
title: "CorrelatedTo",
width: 30,
template: "#= getCorrelationTextForScoreGrid(correlatedTo,CorrScoreID)#"
}
, {
field: "Score",
title: "Score",
width: 5,
template: "#= getScoreTextForScoreGrid(correlationScore,correlatedTo,CorrScoreID)#"
}
, {
field: "NS",
title: "NS",
width: 3,
template: "#= getNSRadioButtonForScoreGrid(correlationScore,correlatedTo,CorrScoreID,CorrID,componentCode)#"
}
, {
field: "1",
title: "1",
width: 3,
template: "#= getOneScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "2",
title: "2",
width: 3,
template: "#= getTwoScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "3",
title: "3",
width: 3,
template: "#= getThreeScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "4",
title: "4",
width: 3,
template: "#= getFourScoreRadioButtonForScoreGrid(correlationScore, correlatedTo, CorrScoreID, CorrID, componentCode)#"
}
, {
field: "AddComment",
title: "Add Comment",
width: 10,
template: "#= getAddCommentButtonForScoreGrid(componentCode,CorrScoreID,CorrID,commentCount) #"
}
//getThreeScoreRadioButtonForScoreGrid
],
sortable: true
});
It looks as follows:
But grid is not getting sorted.
I have already kept sortable:true in my code.
Also tried with :
sortable: {
mode: "single",
allowUnsort: false
}
Then also not getting sorted.
Please help me.
Try this...
$("#gvObservationScore").kendoGrid({
dataSource: Data,
sortable: true,
columns: [{
title: "Code",
width: 4,
sortable: true,
template: "#= getCodeForScoreGrid(TitleCode,componentCode)#"
}, {
field: "CorrelatedTo",
title: "CorrelatedTo",
width: 30,
template: "#= getCorrelationTextForScoreGrid(correlatedTo,CorrScoreID)#"
}
................
I have added sortable to the grid, and a column as an example
EDIT:
Since all are templates, you might be missing the escape characters before the # tags i.e.
template: "//#= getCodeForScoreGrid(TitleCode,componentCode)//#"
I am Using jqgrid in mvc 4. I want to show grid data only those data which match with OrderNo. Grid is showing but data is not showing. Here is Controller where i am writing my sql search method for filtering data. please suggest me the better way to search data in grid view?
public ActionResult getItemsByOrder(string OrdNo)
{
try
{
List<OrderDtl> itm = db.Fetch<OrderDtl>("select * from OrderDtls where OrderNo=" + OrdNo).ToList();
return Json(itm, JsonRequestBehavior.AllowGet);
}
catch
{
return Json(null, JsonRequestBehavior.AllowGet);
}
}
Here is my script. I think my problem is in url: line or in controller. Please Help me to solve my solution.
</script>
<link rel="stylesheet" type="text/css" href="/scripts/css/ui.jqgrid.css" title="coffee" media="screen" />
<script src="~/Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="~/Scripts/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
var ord = $('#OrderNo').val();
jQuery("#list").jqGrid({
url: '/NewOrder/getItemsByOrder/' + ord,
datatype: 'json',
mtype: 'GET',
colNames: ['ItemId', 'ItemName', 'Quantity', 'Rate', 'Amount', 'Action'],
colModel: [
{ name: 'ItemId', index: 'Id', width: 100, align: 'left' },
{ name: 'ItemName', index: 'ItemName', width: 100, align: 'left' },
{ name: 'Quantity', index: 'Quantity', width: 200, align: 'left' },
{ name: 'Rate', index: 'Rate', width: 200, align: 'left' },
{ name: 'Amount', index: 'Amount', width: 200, align: 'left' },
{ name: 'Action', index: 'Action', width: 100, align: 'left' }
],
cellEdit: true,
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'ItemId',
sortorder: "desc",
viewrecords: true,
width: 950,
imgpath: '/scripts/themes/coffee/images',
caption: 'Order Details Grid'
});
});
</script>
I have a jqGrid on which clicking of a row should render a partial view below the jqGrid, but it doesn't happen. I am doing something as shown below:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/json2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/CookieManagement.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jQGridState.js")"></script>
<link href="#Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#Listing').jqGrid({
url: '#Url.Action("Grid", "Name")',
datatype: "json",
edit: false,
add: false,
del: false,
height: 330,
mtype: 'GET',
colNames: ['ID','Name'],
jsonReader: {
root: "Clients",
page: "CurrentPage",
total: "TotalPages",
records: "TotalRecords",
repeatitems: false,
cell: "",
id: "0"
},
colModel: [
{ name: 'Id', index: 'Id', width: 65, align: 'center', sorttype: "int" },
{ name: '#NameMap.STATUS_COLUMN', index: '#NameMap.STATUS_COLUMN', width: 140, align: 'left', sortable: true }],
pager: '#pager',
rowNum: 10,
rowList: [10, 15, 20],
sortname: 'Id',
sortorder: 'asc',
viewrecords: true,
gridview: true,
onSelectRow: function (id) {
$.ajax({
url: '#Url.Action("Details","Name")',
data: { 'Id': id },
success: function (detailsHtml) {
$('#NameDetails').html(detailsHtml);
},
dataType: 'html'
});
},
loadComplete: function () {
$('#NameDetails').html("");
}
});
});
});
</script>
Here Details and Grid are the controller action in the Name Controller. Details which is hooked up to onSelectRow returns a View and $('#NameDetails') is the id of the last div in this page.
My problem is that I am not able to see the details view appearing even though the values inside it are properly getting populated, is there something wrong in my OnSelectRow or do i need to include any other javascript file??
Well that was foolish, but actually I did a spelling mistake in an id called "NameDetails" as "NameDetalis" and that was the reason that my view was not getting rendered.