I have list of objects and I need to show it in JSP. Th ajax call action that I am sending to struts.xml is
STRUTS.XML
<action name="getjsondata" class="com.sample.Getjson">
<result type="json"/>
</action>
Getjson.java
List<Employee> employeeList;
//Getter and Setter
public String execute(){
employeeList = new ArrayList<Employee>();
Employee employee = new Employee();
employee.setId(1);
employee.setName("Name 1");
employee.setLastName("Last Name 1");
employee2 = new Employee();
employee2.setId(1);
employee2.setName("Name 1");
employee2.setLastName("Last Name 1");
employeeList.add(employee);
employeeList.add(employee2);
return SUCCESS;
}
MyJSP.jsp
$("#list").jqGrid({
url: "getjsondata.action",
datatype: "json",
mtype: "GET",
multiselect : true,
colNames: ["Id", "Name" , "Last Name"],
colModel: [
{name: "id", width: 80},
{name: "name", width: 150},
{name: "lastname", width: 150}
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "id",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Employee List"
});
The jqgrid is never populated. Can any one suggest what am I doing wrong?
Thanks in advance.
Related
Here is my code below. I need to link the onclick to my Action in my controller for the toolbar button.
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: '#Url.Action("GetCars", "Home")' }
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: [ { name: "create", text: "Add a new car" }],
height: 550,
sortable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 150 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
});
</script>
The way i always did it in Razor was:
.ToolBar(toolbar => toolbar.Custom().Text("Add new car").Action("Create", "Home"))
I found the answer to my problem.
toolbar: [{ name:"create", template: "<input type='submit' value='Add
new' onclick=\"location.href='#Url.Action("Create", "Home")'\" />" }],
In the example below I want to be able to click on the ProductName in the grid so that it takes me to my actionresult in my controller. Any ideas?
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: '#Url.Action("GetCars", "Home")' }
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: [ { name: "create", text: "Add a new car" }],
height: 550,
sortable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 150 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
});
</script>
search functionality is not working. when hitting action method in controller parameters looking like "_search=true", "searchField=null", "searchString=null" ,"searchOper=null", here i am not getting values of searchField,searchString,searchOper. Please can any one help.
if i give loadonce: true property then search is working. but i am getting first page records only. i am not getting other page records. How can i fix this.
My code:
$(function () {
$("#Channelslistgrid").jqGrid({
colNames: ['ChannelName', 'Description', 'status'],
colModel: [
{ name: 'ChannelName', index: 'ChannelName', sortable: true, align: 'left', width: '200',
editable: false, edittype: 'text',search:true
},
{ name: 'Description', index: 'Description', sortable: false, align: 'left', width: '120',
editable: false, edittype: 'text',search:true
},
{ name: 'status', index: 'status', sortable: false, align: 'left', width: '220',
editable: false, edittype: 'text',search:true
},
],
pager: jQuery('#pager'),
sortname: 'Title',
rowNum: 15,
rowList: [15, 20, 25],
sortorder: "desc",
height: 345,
ignoreCase: true,
viewrecords: true,
rownumbers: true,
caption: 'Channels List',
width: 660,
url: "#Url.Content("~/Home/Channelslist")",
datatype: 'json',
mtype: 'GET',
loadonce: true
})
jQuery("#Channelslistgrid").jqGrid('filterToolbar', { searchOnEnter: true, enableClear: false });
});
controller
public ActionResult Channelslist(int page, int rows, string sidx, string sord, bool _search, string searchField, string searchString, string searchOper)
{
//code
}
Instead you can use the below controller code to get the search parameters typed on the filtertoolbar.
public ActionResult Channelslist(int page, int rows, string sidx, string sord, bool _search) {
string ChannelName= "";
string desc= "";
if (Request.Params["ChannelName"] != null) ChannelName = Request.Params["ChannelName"];
if (Request.Params["Description "] != null) desc= Request.Params["Description"];
}
i have problem with jqGrid and dynamical data binding.
The problem is, that I allways get Null for parameter page. I am working with MVC3 and jqGrid 4.4.1.
var dataToSend = {
mrpId: selPRid,
mrpFilter: cookMainFilter,
divId: randomId,
chartId: chartId
};
$("#gridMeasurementsTableView" + randomId).jqGrid({
url: '/DataMonitor/CreateMeasurementTableView/',
datatype: "json",
mtype: 'POST',
postData: $.toDictionary(dataToSend),
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
},
colNames: ['Date', 'Value'],
colModel: [
{ name: 'Timestamp', index: 'Timestamp', width: 280,
formatter: function (cellvalue, options, rowObject) {
return new Date(parseInt(cellvalue.substr(6, cellvalue.length - 8), 10));
}
},
{ name: 'Value', index: 'Value', width: 200, align: 'center' }
],
loadui: "disable",
loadtext: "Loading",
viewrecords: true,
height: "100%",
caption: "Measurements2",
pager: $("#gridpager" + randomId),
rowNum: 10,
sortname: 'Value',
sortorder: "asc",
rowList: [10, 50, 100]
});
and function for getting data is define like this:
public ActionResult CreateMeasurementTableView(string sidx, string sord, int page, int rows, int mrpId, FilterMRPParameters mrpFilter, string divId, string chartId)
br,
Jan
Try to change postData: $.toDictionary(dataToSend) to postData: dataToSend.
I have an Asp.Net MVC app using jqGrid. Can I send the Model that is used to populate a lot of my ui controls(checkboxes, radio buttons, etc) to the server(controler action method). I would like to send this Model to the server instead of reading ui control by ui control. Can this be done?
var myGrid = jQuery("#list").jqGrid({
url: '/Data/GridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Year', 'Overall %'],
colModel: [
{ name: 'Year', index: 'Year', width: 80, align: 'center' },
{ name: 'overallHarvestPercent', index: 'overallHarvestPercent', width: 80, align: 'center'}],
postData: { contactId: jQuery('#contactId').val() },
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'Harvest Data Results'
});
Specify your Model as the data type for the Controller Action's Parameter.
public ActionResult Index(MyModel model)
{
// Do stuff
}