We Keep Coding

Facing issue with JQ grid

I am trying JqGrid for our application with asp.Net MVC.
I am not able to get the data display.I am not sure what is the issue.
Here is my View Code:
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
#{
ViewBag.Title = "SearchEmployee";
}
<h2>SearchEmployee</h2>
<table id="list2"></table>
<div id="pager2"></div>
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: 'Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EMPLOYEEID', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FIRSTNAME', index: 'FIRSTNAME', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'AGE', index: 'AGE', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'ADDRESS1', index: 'ADDRESS1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'STATE', index: 'STATE', width: 80 },
{ name: 'CITYNAME', index: 'CITYNAME', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
//sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
My Controller Code:
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
The issue is when i tried to get to display Employee list.
In IE,when I tried to run the application,its prompting to download Json file.
Please let me know whats the issue.
I have tried with the source code from the below Link:
http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php

I agree with Abdul Hadi.You need to put a forward slash before the controller name so that your url is - url: '/Employee/Employees', And the column names need to match those in the Employee object(they should be the same case).
In addition to those two changes you have a whole bunch of columns defined that don't have a corresponsing property in the Employee class, so they can be removed. And be careful if you have a _Layout.cshtml page in your MVC application, sometimes this page has script references which will prevent you from using jqGrid.To prevent this from happenening try setting Layout = null; in your view.Here's a complete working example:
Controller:
public class EmployeeController
{
public ActionResult Index()
{
//This will return your Employee page.This should be set as the default action
return View();
}
public ActionResult Employees()
{
//This will return the data to bind to jqGrid
//DON'T CALL THIS DIRECTLY - otherwise you will get a situation where IE prompts you to download the .json file
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
View:
#{
ViewBag.Title = "Index";
Layout = null;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'AGE', 'GENDER', 'STATUS', 'ADDRESS1', 'CITYNAME'],
colModel: [
{ name: 'EmployeeId', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FIRSTNAME', width: 90 },
{ name: 'Age', index: 'AGE', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'Status', index: 'STATUS', width: 80, align: "right" },
{ name: 'Address1', index: 'ADDRESS1', width: 80 },
{ name: 'CityName', index: 'CITYNAME', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
<table id="list2" border="1"></table>
<div id="pager2"></div>
Output:

JavaScript is Case Sensitive and you forget to add slash at beginning of url so your code will be like below:
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FirstName', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'Age', index: 'Age', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'Address1', index: 'Address1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'Status', index: 'Status', width: 80 },
{ name: 'CityName', index: 'CityName', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
sortname: 'EmployeeId',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>

On top of the comments by the other answers.
See the The answer for how you should format your json for jqgrid
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
var jsonData = new
{
total = employeeList.Count,
page = 1,
records = 10,
rows = employeeList.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}

jqGrid shows + sign even after subgrid has no data using xml

I am using jqGrid to show data with subgrid.
Data is in xml format.
$("#UDFs").jqGrid({
ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' },
datatype: 'xmlstring',
datastr: data,
xmlReader: { root: "Response", row: "Data>UDFS>row", repeatitems: false, id: "FieldID" },
subGrid: true,
subgridtype: 'xml',
subGridOptions: { "plusicon": "ui-icon-triangle-1-e", "minusicon": "ui-icon-triangle-1-s", "openicon": "ui-icon-arrowreturn-1-e" },
subGridRowExpanded: function (subgrid_id, row_id) {
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(
{
datastr: $($.parseXML(data)).find('Response>Data>UDFS>row:has(FieldID:contains('+ row_id+'))').XmlToString(),
datatype: "xmlstring",
colNames: [ 'Code', 'Name'],
colModel: [
{ name: "Code", index: "Code", width: 130 },
{ name: "Name", index: "Name", width: 70 }
],
xmlReader: { root: "row", row: "ValidValues>row", repeatitems: false, id: "FieldID" },
rowNum: 20,
pager: pager_id,
height: '100%'
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
},
colNames: ['#', 'TableID', 'SAPType', 'SAPSubType', 'SAPValidation', 'FieldID', 'AliasID', 'Descr', 'TypeID', 'SizeID', 'EditSize', 'Dflt', 'NotNull', 'RTable', 'RelUDO', 'ValidValues'],
colModel: [
{
index: 'Tick',
name: 'Tick',
width: 50,
resizable: false,
editable: true,
align: 'center',
edittype: 'checkbox',
formatter: "checkbox",
formatoptions: { disabled: false },
classes: 'check',
editrules: { required: false }, editoptions: { size: 39, value: "True:False" }
},
{ name: 'TableID', index: 'TableID', align: "left", width: 40, hidden: true },
{ name: 'SAPType', index: 'SAPType', align: "left", width: 80 },
{ name: 'SAPSubType', index: 'SAPSubType', align: "left", width: 80 },
{ name: 'SAPValidation', index: 'SAPValidation', align: "left", width: 80 },
{ name: 'FieldID', index: 'FieldID', align: "left", width: 40, hidden: false },
{ name: 'AliasID', index: 'AliasID', align: "left", width: 180 },
{ name: 'Descr', index: 'Descr', align: "left", width: 180 },
{ name: 'TypeID', index: 'TypeID', align: "left", width: 80 },
{ name: 'SizeID', index: 'SizeID', align: "left", width: 80 },
{ name: 'EditSize', index: 'EditSize', align: "left", width: 80 },
{ name: 'Dflt', index: 'Dflt', align: "left", width: 80 },
{ name: 'NotNull', index: 'NotNull', align: "left", width: 80 },
{ name: 'RTable', index: 'RTable', align: "left", width: 80 },
{ name: 'RelUDO', index: 'RelUDO', align: "left", width: 80, hidden: false },
{ name: 'ValidValues', index: 'ValidValues', align: "left", width: 80, formatter: formatToLink, unformat: UnformatFromLink }
],
rowNum: 15,
mtype: 'POST',
pager: "#UDFsMap",
gridview: true,
rownumbers: true,
loadonce: true,
forceFit: true,
width: 1100,
height: 250,
caption: 'Select UDF from the below list.',
multiselect: false,
loadComplete: function () {
$(this).HideBusy();
},
ondblClickRow: function (rowid, iRow, iCol, e) {
selectedRowId = $("#ObjType").jqGrid('getGridParam', 'selrow');
ObjectTypeID = $("#ObjType").jqGrid('getCell', selectedRowId, 'ObjectTypeID');
// $("#SelectCustomer").dialog('close');
// xmlDoc1 = $.parseXML(xmlString);
// $xml1 = $(xmlDoc1);
// $(this).SetValuesToControl("Landscape", $xml1);
// $("#uxTask").attr("binding", "true");
}
}).jqGrid('navGrid', '#UDFsMap', { edit: false, add: false, del: false, search: true });
When grid displays on page, it shows Plus (+) sign / arrow even if the subgrid does not have data.
Is it possible to hide / remove this Plus (+) sign / arrow when there is no data in subgrid?
UPDATED:
I tried your proposed solution and saw samples also, it works for me from 2nd page onwards. its not working for 1st page.
loadComplete: function (data) {
var grid = $("#UDFs");
var $self = $(this), rowIds = $self.jqGrid("getDataIDs"), item, i, l = rowIds.length;
for (i = 0; i < l; i++) {
item = $self.jqGrid("getLocalRow", rowIds[i]);
debugger;
if (item.ValidValues == null || item.ValidValues.length === 0) {
// subggrid is empty
$("#" + rowIds[i]).find(">.ui-sgcollapsed").unbind("click").html("");
}
}
$(this).HideBusy();
},
When the grid load, it works from 2nd page onward. Please see the screen shot. In the last column (ValidValues), if exist then show subgrid / plus sign otherwise hide.
In below screen shot it is working.

I recommend you to hide the "+" icon of rows which have no subgrids inside of loadComplete callback. The first parameter of callback loadComplete contains all parsed XML data (datastr: data) which you use to fill the grid. See the old answer which describes the main idea of the hiding of the rows. You can get the ids of the rows of the current page by usage of getDataIDs and to find the corresponding item in XML data by the id. Then you can examine the information about subgrids and to hide the icon.
The demo demonstrates the approach in case of usage JSON data. You can do the same with XML data too. You need just change the criteria for testing the input data for the existence of subgrid.
UPDATED: The code which you posed in UDPATED works only with the second part because you use datatype: 'xmlstring'. At the first loading the data in loadComplete are XML data and you should be more careful how to parse it. My demo used JSON instead of XML data. So you should use the demo which I posted as the template, but you have to modify it based on the format of the data which you use.

javascript loading MVC 4 razor

It says the javascript cant be found. I tried using other code for script src but still it doesnt work.Whenever I try to run this it says "Failed to load resource 404 the blah/blah/*js can`t be found.
http://localhost:51835/Scripts/ui.jqgrid.css
I tried googling everything but it still can`t find the script
#using System.Web.Script.Services`enter code here`
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.js")"></script>
<script src="#Url.Content("~/Scripts/ui.jqgrid.css")"></script>
<meta name="viewport" content="width=device-width" />
<title>viewTry</title>
</head>
<body>
<div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '',
datatype: "json",
colNames: ['Id','First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address",'Marital Status'],
colModel: [
{ name: '_id', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details"
});
</script>
<table id="JQGridDemo"></table>
</div>
</body>
</html>

JQgrid set ondblclick to navigation to new page?

I have a very simple jQgrid i am using for a website
<div id="catalogueSearchList" class="dataGrid">
<script type="text/javascript">
var catalogueSearchListConfig = {
id: 'catalogueSearchList',
action: 'List',
controller: 'Catalogue',
//href: '/Jobs/Adverts/',
onDblClick: function (id) { HERE!!! }) },
colNames: ['Name', 'CatalogueType'],
colModel: [
{ name: 'Name', index: 'Name', width: 400, align: 'left' },
{ name: 'Catalogue type', index: 'CatalogueType', width: 175, align: 'left' },
],
sortName: 'Name',
sortOrder: 'asc'
};
</script>
</div>
Where it displays "HERE!!!" what can I put here to allow when a viewer double clicks a value in the jqgrid it will navigate them to another page?

Its ok, the answer is
<div id="catalogueSearchList" class="dataGrid">
<script type="text/javascript">
var catalogueSearchListConfig = {
id: 'catalogueSearchList',
action: 'List',
controller: 'Catalogue',
//href: '/Jobs/Adverts/',
onDblClick: function (id) { window.location.href = "/Catalogue/Category/" + id },
colNames: ['Name', 'CatalogueType'],
colModel: [
{ name: 'Name', index: 'Name', width: 400, align: 'left' },
{ name: 'Catalogue type', index: 'CatalogueType', width: 175, align: 'left' },
],
sortName: 'Name',
sortOrder: 'asc'
};
</script>
</div>
Using javascript you can just select the window and set it's location to what you like :)

JQX Grid Not working in chrome

I used JQX grid widget.And through a javascript i'm populating cell values.This works good for Firefox.But not working in Chrome.Here is the code i have used.
var objCredit = jQuery.parseJSON(returnText);
document.getElementById('txtCustNumber').value = objCredit.CustomerId;
$('[id$=txtCustNumber]').text(objCredit.CustomerId);
getCustomerDetails();
document.getElementById('cmbDocType').value = '3';
***documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', objCredit.Amount);***
Here is my Grid Definition.
var source1 = { totalrecords: 5, unboundmode: true, datatype: "json",
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
],
localdata: data
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{ text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{ text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setAmountEditable() },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{ text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
Thanks in advance

Your initialization is incorrect. datatype: "json" in unbound mode does not make sense. You should remove that. Below is a working sample:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source1 = {
totalrecords: 5, unboundmode: true,
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
]
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
var documentGridContainer = $("#jqxgrid");
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
ready: function()
{
documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', 50);
},
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{
text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{
text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
//showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{
text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{
text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{
text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
</div>
</body>
</html>