True scrolling data in JQGrid not working with MVC 3 - jqgrid

Can someone help me with this issue?
I have a jqgrid(4.4.0) and I want to implement true scrolling. The problem is that it only loads datarows once, meaning the first page only. So when I scroll, it doesn't fetch the other pages. I have checked this issue and still not working.
Here is the jqgrid:
jQuery("#deptProjectsGrid").jqGrid({
url: '#Url.Action("GetUserProjects", "TimesheetByWeek")',
datatype: 'json',
mtype: 'GET',
colNames: ['Projekt', 'Oprettet af'],
colModel: [
{ name: 'project', index: 'project', sortable: true, align: 'left' },
{ name: 'creator', index: 'creator', align: 'left' }
],
height: 300,
width: 250,
altRows: true,
pager: '#pager1',
scroll: 1,
rowNum: 15,
rownumbers: true,
viewrecords: true,
sortname: 'project',
sortorder: 'desc',
gridview: true,
caption: "Projekter",
onSelectRow: function (ids) {
if (ids == null) {
ids = 0;
if ($taskgrid.jqGrid('getGridParam', 'records') > 0) {
$taskgrid.jqGrid('setGridParam', { url: '#Url.Action("GetProjectTasks", "TimesheetByWeek")/' + ids });
$taskgrid.jqGrid('setCaption', "No Tasks " + ids).trigger('reloadGrid');
}
} else {
var data = $("#deptProjectsGrid").getRowData(ids);
$taskgrid.jqGrid('setGridParam', { url: '#Url.Action("GetProjectTasks", "TimesheetByWeek")/' + ids });
$taskgrid.jqGrid('setCaption', "Tasks for " + data.project).trigger('reloadGrid');
}
}
});
The controller action looks like this:
public JsonResult GetUserProjects(int page, int rows, string search, string sidx, string sord)
{
try
{
using (DanishEntities db = new DanishEntities())
{
int totalRecords = 0;
var allProjectEntities = _projectRepository.GetProjectsPaged(page, rows, out totalRecords, db);
var projects = Mapper.Map<List<Project>, List<ProjectModel>>(allProjectEntities);
var totalPages = (int)Math.Ceiling(totalRecords / (float)rows);
var jsonData = new
{
total = rows,
page = page++,
records = totalRecords,
rows = (
from p in projects
select new
{
id = p.ID,
cell = new object[] { p.Name, "john doe" }
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}
catch (Exception)
{
throw;
}
}
and the query is:
public List<Project> GetProjectsPaged(int page, int rows, out int totalCount, DanishEntities dbContext)
{
List<Project> pagedProjectEntities = new List<Project>();
try
{
totalCount = dbContext.Projects.Count();
pagedProjectEntities = dbContext.Projects
.OrderBy(p => p.ID)
.Skip((page-1) * rows)
.Take(rows)
.ToList();
}
catch (Exception)
{
throw;
}
return pagedProjectEntities;
}
I have wasted 4 hours of my life trying to figure this out and I just can't see the problem. I have even set "total = totalPages" in the controller action but nothing is working. Help please!!
Just another quick question on jqGrid: How do I disable "rowNum" in a jqGrid so that the grid shows all available rows returned by the query in the data set?

Related

Display the 25K records from DB to JQGrid in a fastest manner

Currently, I am using the following Datahandler, which takes lots of time to load the data.
Could anybody send me a working sample which really works with huge amount of records.
Is there any way to bind the data directly to JSON ( I feel the for loop also taking time to load).
JQGridHandler.ahsx
<%# WebHandler Language="C#" Class="JQGridHandler" %>
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data;
using System.Data.Common;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Collections.Specialized;
public struct JQGridResults
{
public int page;
public int total;
public int records;
public JQGridRow[] rows;
}
public struct JQGridRow
{
public Int64 Col1;
public string Col2 ;
public string Col3 ;
public string Col4;
public Int64 Col5;
public Int64 Col6;
public Int64 Col7;
}
[Serializable]
public class User
{
public Int64 Col1 { get; set; }
public string Col2 { get; set; }
public string Col3 { get; set; }
public string Col4 { get; set; }
public Int64 Col5 { get; set; }
public Int64 Col6 { get; set; }
public Int64 Col7 { get; set; }
}
public class JQGridHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
System.Collections.Specialized.NameValueCollection forms = context.Request.Form;
HttpRequest request = context.Request;
HttpResponse response = context.Response;
string _search = forms.Get("_search");
string numberOfRows = forms.Get("rows");
string pageIndex = forms.Get("page");
string sortColumnName = forms.Get("sidx");
string sortOrderBy = forms.Get("sord");
string strOperation = forms.Get("oper");
int totalRecords;
Collection<User> users = new Collection<User>();
var provider = DbProviderFactories.GetFactory("Cassandra.Data.CqlProviderFactory");
var connection = provider.CreateConnection();
connection.ConnectionString = "Contact Points=localhost;Port=9042";
connection.Open();
var command = connection.CreateCommand();
string keyspaceName = "EmpTableSpace";
command = connection.CreateCommand();
command.CommandText = "select Col2, Col3, Col4, Col5, Col6, Col7 from " + keyspaceName + ".Emptable;";
DbDataReader reader = command.ExecuteReader();
User user;
int idx = 1;
while (reader.Read())
{
user = new User();
user.Col1 = idx++;
user.Col2 = Convert.ToString(reader["Col2"]);
user.Col3 = Convert.ToString(reader["Col3"]);
user.Col4 = String.Format("{0:MM/dd/yyyy HH:mm:ss}", reader["Col4"].ToString());
user.Col5 = Convert.ToInt16(reader["Col5"]);
user.Col6 = Convert.ToInt16(reader["Col6"]);
user.Col7 = Convert.ToInt16(reader["Col7"]);
users.Add(user);
}
totalRecords = Convert.ToInt32(reader["Col2"]);
string strResponse = string.Empty;
if (strOperation == null)
{
string output = BuildJQGridResults(users, Convert.ToInt32(numberOfRows), Convert.ToInt32(pageIndex), Convert.ToInt32(totalRecords));
response.Write(output);
}
////else if (strOperation == "del")
////{
//// var query = Query.EQ("_id", forms.Get("Col2").ToString());
//// users.Remove(query);
//// strResponse = "Employee record successfully removed";
//// context.Response.Write(strResponse);
////}
else
{
string strOut = string.Empty;
AddEdit(forms, users, out strOut);
context.Response.Write(strOut);
}
}
private string BuildJQGridResults(Collection<User> users, int numberOfRows, int pageIndex, int totalRecords)
{
JQGridResults result = new JQGridResults();
List<JQGridRow> rows = new List<JQGridRow>();
foreach (User user in users)
{
JQGridRow row = new JQGridRow();
row.Col1 = Convert.ToInt64(user.Col1);
row.Col2 = user.Col2;
row.Col3 = user.Col3;
row.Col4 = user.Col4;
row.Col5 = user.Col5;
row.Col6 = user.Col6;
row.Col7 = user.Col7;
rows.Add(row);
}
result.rows = rows.ToArray();
result.page = pageIndex;
result.total = totalRecords / totalRecords;
result.records = totalRecords;
return new JavaScriptSerializer().Serialize(result);
}
public bool IsReusable
{
get
{
return false;
}
}
private void AddEdit(NameValueCollection forms,Collection<User> users, out string strResponse)
{
string strOperation = forms.Get("oper");
Int64 strRowID = 0;
if (strOperation == "add")
{
strRowID = Convert.ToInt64(forms.Get("Col1"));
}
else if (strOperation == "edit")
{
var result = users.AsQueryable<User>().Select(c => c.Col2).Max();
strRowID = (Convert.ToInt32(result) + 1);
}
string strCol2 = forms.Get("Col2").ToString();
string strCol3 = forms.Get("Col3").ToString();
string dtCol4 = String.Format("{0:MM/dd/yyyy HH:mm:ss}", forms.Get("Col4").ToString());
int intCol5 = Convert.ToInt16(forms.Get("Col5"));
int intCol6 = Convert.ToInt16(forms.Get("Col6"));
int intCol7 = Convert.ToInt16(forms.Get("Col7"));
User objEmp = new User();
objEmp.Col1 = strRowID;
objEmp.Col2 = strCol2;
objEmp.Col3 = strCol3;
objEmp.Col4 = dtCol4;
objEmp.Col5 = intCol5;
objEmp.Col6 = intCol6;
objEmp.Col7 = intCol7;
users.Add(objEmp);
strResponse = "Record(s) successfully updated";
}
}
Default.aspx
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
LOADING DATA IN JQGRID
</h2>
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: 'JQGridHandler.ashx',
datatype: "json",
colNames: ['Col1', 'Col2', 'Col3', 'Col4', 'Col5', 'Col6', 'Col7'],
colModel: [
{ name: 'Col1', index: 'Col1', width: 20, sortable: true },
{ name: 'Col2', width: 30, sortable: true },
{ name: 'Col3', width: 50, sortable: true },
{ name: 'Col4', width: 55, sortable: true },
{ name: 'Col5', width: 30, sortable: true },
{ name: 'Col6', width: 30, sortable: true },
{ name: 'Col7', width: 30, sortable: true }
],
rowNum: 10,
mtype: 'GET',
height: 450,
width: 1200,
scroll: true,
loadonce: false,
rowList: [1000, 2000, 3000],
prmNames: { npage: 'npage' },
pager: '#jQGridDemoPager',
sortname: 'Col2',
viewrecords: true,
sortorder: 'desc',
caption: "Response Times",
editurl: 'JQGridHandler.ashx'
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
refreshstate: 'current',
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'ew', 'en', 'cn', 'nc', 'nu', 'nn', 'in', 'ni']},
{
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
multipleSearch:true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true,//Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true }]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
</script>
</asp:Content>
It's important to understand, that if one uses loadonce: true option (and datatype: "json" or datatype: "xml") or if datatype is neither "json" nor "xml" then jqGrid makes filtering, sorting and searching on the client side. You use loadonce: false (which is default value of jqGrid) so jqGrid just send the information about the filter to the server. The server is responsible to filter the data and the return the requested page of the filtered results. The old answer or this one provides demos with server side filtering in C#.
Your current server code don't have server side implementation of sorting, filtering and paging. So I would recommend you first of all to try to use loadonce: true without scroll: true (just remove it). I recommend you additionally to add gridview: true option to improve performance (see the answer). If you would have reliable performance you will don't need to make modification of your server code.

MVC3 AD Role based authorization for JQGrid Edit link

I am very new to JQgrid and mvc3 . I have a very basic jQgrid with edit functionality.
I want to disable edit link in jqgrid.navgrid for certain user (autheticated by AD) when JqGrid load and enable it for other user which has diffewrent roles.
I am able to restrict user from editing the grid data but that's not sufficient .I want user not to even see that editable link in JqGrid .
Here is the JqGrid which I have in my view( index.cshtml):
jQuery(document).ready(function () {
jQuery('#list').jqGrid({
colNames: ['id', 'CountryCode','Node','EligFactor'],
colModel: [
{ name: 'id', index: 'id', width: 150, height: 100, align: 'left' },
{ name: 'CountryCode', index: 'CountryCode', width: 150, align: 'left' },
{name: 'Node', index: 'Node', width: 150, height: 100, align: 'left' },
{name: 'EligFactor', index: 'EligFactor', width: 150, height: 100, align: 'left', editable: true, edittype: 'text' }
],
url: '#Url.Action("DynamicGridData")',
datatype: 'json',
mtype: 'POST',
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 15, 20, 25],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
imgpath: '',
caption: 'Eligibility Factor Grid',
imgpath: '/Content/images',
height: '210px'
}).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: true },
{ url: '#Url.Action("EditRecord")', closeAfterEdit: true },
{},
{});
});
2, Here is the edit method in controller which is being used when user try to edit the grid data :
[Authorize(Roles=#"MyDomain\SecurityLists\User1")]
public ActionResult EditRecord(int id, string eligFactor)
{
bool success = false;
var context = new EligibilityFactorDataContext();
EligibilityControl eg = context.EligibilityControls.Single(p => p.id == id);
eg.EligFactor = Convert.ToSingle(eligFactor);
try
{
context.SubmitChanges();
success = true;
return Json(success);
}
catch (Exception e)
{
success = false;
return Json(success);
}
}
can someone pl. help me to achieve this . very appreciated !
var context = new EligibilityFactorDataContext();
var isAuth = true;
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = context.EligibilityControls.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var eligibilitycontrols = context.EligibilityControls.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
userdata = isAuth,
rows = (
from eligibilitycontrol in eligibilitycontrols
select new
{
id = eligibilitycontrol.id,
cell = new string[] {
eligibilitycontrol.id.ToString() ,
eligibilitycontrol.CountryCode,
eligibilitycontrol.Node.ToString(),
Convert.ToSingle(eligibilitycontrol.EligFactor).ToString()}
}).ToArray()
};
return Json(jsonData);
}
Add a check if the user is authenticated and pass a bool in your viewmodel to your view if the user is authenticated or not and modify the nav pager based on this.
Ex
var userIsAuth = '#Model.UserIsAuth' == 'true';
jQuery('#list').jqGrid().navGrid('#pager', { edit: (userIsAuth ? true : false), add: false, del: false, search: false, refresh: true },
{ url: '#Url.Action("EditRecord")', closeAfterEdit: true },
{},
{});
So in the controller you need to define the UserData in a similar manner Ex
userdata = new {ExampleName = ExampleValue},
Then in your loadComplete: function()
var myPassedUserData = $(this).getGridParam('userData');
var ExampleVariable = myPassedUserData.ExampleName
Edit- Use Ternary operation to simplify the code. Possibly the url: property could also be disabled via the userIsAuth bool.

How to navigate in jqgrid

i'm starter in jqgrid, i write this code for create and fill jqgrid(i'm use repository pattrn in asp.net )
namespace Clearance.Helper
{
using System;
public class JQGridRow
{
public int id;
public string[] cell;
}
}
namespace Clearance.Helper
{
public class JQGridResults
{
public int Page { get; set; }
public int Total { get; set; }
public int Records { get; set; }
public JQGridRow[] rows;
}
}
namespace Clearance.Business
{
using System;
using System.Linq;
using Model;
using Clearance.Repository;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using Clearance.Helper;
public class TransportTypesBusiness : GenericBusiness<CLEARANCEEntities, TRANSPORT_TYPES>
{
public List<TRANSPORT_TYPES> GetAll(int pageSize, int pageIndex)
{
var repository = new TransportTypesRepository(this.Context);
return (List<TRANSPORT_TYPES>) repository.GetAll().OrderBy(c => c.TRANSPORT_ID).Skip(pageIndex * pageSize).Take(pageSize);
}
public string BuildJQGridResults(int numberOfRows = 0, int pageIndex = 0, int totalRecords = 0)
{
var result = new JQGridResults();
var rows = new List<JQGridRow>();
var list = GetAll(numberOfRows, pageIndex);
int li = list.Count();
totalRecords = list.Count();
foreach (var item in list)
{
var row = new JQGridRow { id = item.TRANSPORT_ID, cell = new string[4] };
row.cell[0] = item.TRANSPORT_ID.ToString();
row.cell[1] = item.TRANSPORT_NAME;
row.cell[2] = item.TRANSPORT_ABBR;
row.cell[3] = item.REMARK;
rows.Add(row);
}
result.rows = rows.ToArray();
if ((numberOfRows != 0) && (pageIndex != 0) && (totalRecords != 0))
{
result.Page = pageIndex;
result.Total = (totalRecords + numberOfRows - 1) / numberOfRows;
result.Records = totalRecords;
}
return new JavaScriptSerializer().Serialize(result);
}
}}
and js code
$(function () {
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
editurl: 'jQGridHandler.ashx',
postData: { ActionPage: 'TransportType', Action: 'Fill' },
ajaxGridOptions: { cache: false },
datatype: 'json',
height: 'auto',
colNames: ['TRANSPORT_ID', 'TRANSPORT_NAME', 'TRANSPORT_ABBR', 'REMARK'],
colModel: [
{ name: 'TRANSPORT_ID', index: 'TRANSPORT_ID', key: true, hidden: true, editable: false },
{ name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
{ name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
{ name: 'REMARK', width: 100, sortable: true, editable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
prmNames: { nd: null },
gridview: true,
sortname: 'TRANSPORT_ID',
viewrecords: true,
caption: '',
rownumbers: true
});
when jqgrid load data set current page is 0 and icon next and privice is enable. please help me. thanks all
The problem with page number can be easy to solved. The class JQGridResults has properties Page, Total, Records and rows, but default names which jqGrid wait for are page, total, records and rows. So the rows are the only property which will be read correctly.
To fix the problem you can either rename the property in the JQGridResults or include the following additional parameter in jqGrid:
jsonReader: {page: "Page", total: "Total", records: "Records"}
More additional information (inclusive full working Visual Studio demo project) about the usage of jqGrid together with ASHX handler you can find in the answer.

jqGrid Retain Invalid Cell Value After EditRules Pop Up

#Oleg - I am new to jqGrid.I have three issues. Urgent help required.
I am using jqGrid 3.8, inline edit mode.
I want to retain the invalid cell values after the pop up for invalid cell.
Also I want to set the focus back to the invalid cell.
I have "add row" and filter tool bar feature in my jqGrid. I have used Oleg's solution in creating drop down for filter tool bar (posted in another jQuery thread).
**
- Problem:
** I am calling setSearchSelect from afterSaveCell, because I want to add new values in filter drop down every time I add or delete column.(Note: column is a textbox). But the filter tool bar isn't getting refreshed even if I use
var sgrid = $("#list")[0];
sgrid.triggerToolbar();
See the code below for setting the toolbar.
<script type="text/javascript">
var mydata = [
{id:"1", Name:"Miroslav Klose", Category:"sport", Subcategory:"football"},
{id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"},
{id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"},
{id:"4", Name:"Blaise Pascal", Category:"science", Subcategory:"mathematics"}
],
grid = $("#list"),
getUniqueNames = function(columnName) {
var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i=0;i<textsLength;i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
},
buildSearchSelect = function(uniqueNames) {
var values=":All";
$.each (uniqueNames, function() {
values += ";" + this + ":" + this;
});
return values;
},
setSearchSelect = function(columnName) {
grid.jqGrid('setColProp', columnName,
{
stype: 'select',
searchoptions: {
value:buildSearchSelect(getUniqueNames(columnName)),
sopt:['eq']
}
}
);
};
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name:'Name', index:'Name', width:200 ,editable:true},
{ name:'Category', index:'Category', width:200,editable:true },
{ name:'Subcategory', index:'Subcategory', width:200,editable:true }
],
sortname: 'Name',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
editurl: "clientArray",
multiselect: true,
pagination:true,
cellEdit: true,
cellsubmit: 'clientArray',
//ignoreCase: true,
pager: '#pager',
height: "auto",
enableSearch: true,
caption: "How to use filterToolbar better locally",
afterSaveCell: function(rowid,name,val,iRow,iCol) {
setSearchSelect(name);
jQuery("#list").('setColProp', name,
{
width:100
}
);
var sgrid = $("#list")[0];
sgrid.triggerToolbar();
alert(name);
},
loadComplete: function () {
setSearchSelect('Category');
}
}).jqGrid('navGrid','#pager',
{edit:false, add:false, del:false, search:false, refresh:true});
setSearchSelect('Category');
setSearchSelect('Subcategory');
grid.jqGrid('setColProp', 'Name',
{
searchoptions: {
sopt:['cn'],
dataInit: function(elem) {
$(elem).autocomplete({
source:getUniqueNames('Name'),
delay:0,
minLength:0
});
}
}
});
grid.jqGrid('filterToolbar',
{stringResult:true, searchOnEnter:true, defaultSearch:"cn"});
function addRow(tableId){
var loopRow = document.getElementById("addRowsInput").value;
var recordCount = '';
var rwData = '';
//var selRowIds = getRowIDs('list');
var gridProducts = $("#list");
var resetFirstRow = jQuery("#list").getRowData( 1 );
jQuery("#list").setRowData( 1, resetFirstRow );
if(loopRow == null || loopRow == "" || loopRow == "Enter number of units to be added")
{
loopRow = 1;
}
for(i=0; i< loopRow; i++)
{
recordCount = jQuery("#list").getGridParam("records") ;
var emptydata = [
{id:(recordCount+1), Name:"", Category:"", Subcategory:""}]
gridProducts.jqGrid('addRowData', recordCount+1, emptydata[0]);
}
}
</script>
#Oleg - one more question on the solution you suggested. Sorry I tried myself to find it but couldn't.
In the buildSearchSelect: method , how can I include filter for empty string.
As explained above I have a "Add Row" button. So when the user wants to filter rows with empty columns I need a filter value.
The implementation of setSearchSelect function from my old answer work only if the searching toolbar not yet exist. If the toolbar exist one have to modify the options of the select element or autocomplete source of the jQuery UI autocomplete widget.
I extended the code. You can see the new version of the demo here. In the same way one could use inline editing instead of the cell editing.
Here is the modified JavaScript code:
var mydata = [
{id:"1", Name:"Miroslav Klose", Category:"sport", Subcategory:"football"},
{id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"},
{id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"},
{id:"4", Name:"Blaise Pascal", Category:"science", Subcategory:"mathematics"}
],
grid = $("#list"),
getUniqueNames = function(columnName) {
var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i=0;i<textsLength;i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
uniqueTexts.sort();
return uniqueTexts;
},
buildSearchSelect = function(uniqueNames) {
var values=":All";
$.each (uniqueNames, function() {
values += ";" + this + ":" + this;
});
return values;
},
setSearchSelect = function(columnName) {
var $select = $('select#gs_'+columnName), un = getUniqueNames(columnName),
htmlForSelect = '<option value="">All</option>', i, l=un.length, val;
grid.jqGrid('setColProp', columnName,
{
stype: 'select',
searchoptions: {
value:buildSearchSelect(un),
sopt:['eq']
}
}
);
if ($select.length > 0) {
// The searching toolbar already exist. One have to update it manually
for (i=0;i<l;i++) {
val = un[i];
htmlForSelect += '<option value="'+val+'">'+val+'</option>';
}
$select.html(htmlForSelect);
}
},
setAutocomplete = function(columnName) {
var $input = $('input#gs_'+columnName), un = getUniqueNames(columnName);
grid.jqGrid('setColProp', columnName,
{
searchoptions: {
sopt:['cn'],
dataInit: function(elem) {
$(elem).autocomplete({
source:un,
delay:0,
minLength:0
});
}
}
});
if ($input.length > 0) {
// The searching toolbar already exist. One have to update the source
$input.autocomplete('option', 'source', un);
}
},
selectColumns = ['Category','Subcategory'], autocompleteColumns = ['Name'];
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name:'Name', index:'Name', width:200 ,editable:true},
{ name:'Category', index:'Category', width:200,editable:true },
{ name:'Subcategory', index:'Subcategory', width:200,editable:true }
],
sortname: 'Name',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
cellEdit: true,
cellsubmit: 'clientArray',
ignoreCase: true,
pager: '#pager',
height: "auto",
caption: "How to use filterToolbar better locally including local cell editing",
afterSaveCell: function(rowid,name,val,iRow,iCol) {
if ($.inArray(name,selectColumns) !== -1) {
setSearchSelect(name);
} else if ($.inArray(name,autocompleteColumns) !== -1) {
setAutocomplete(name);
}
}
}).jqGrid('navGrid','#pager',
{edit:false, add:false, del:false, search:false, refresh:true});
$.each(selectColumns,function() {
setSearchSelect(String(this));
});
$.each(autocompleteColumns,function() {
setAutocomplete(String(this));
});
grid.jqGrid('filterToolbar',
{stringResult:true, searchOnEnter:true, defaultSearch:"cn"});

Difficulty sorting Linq expression with jqGrid

I have seen this code Sortable JqGrid using LINQ to MySQL (DbLinq) and Dynamic LINQ - Orderby doesn't work
and trying to make it work. But it's giving error:
Cannot order by type 'System.Object'
See the line in the code with Error Here.
[HttpPost]
public ActionResult MyGridData(string sidx, string sord, int page, int rows)
{
IQueryable<Company> repository = companyRepository.GetGridCompanies();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = repository.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
// first sorting the data as IQueryable<Ticket> without converting ToList()
IQueryable<Company> orderdData = repository;
PropertyInfo propertyInfo = typeof(Company).GetProperty(sidx);
if (propertyInfo != null)
{
orderdData = String.Compare(sord, "desc", StringComparison.Ordinal) == 0 ?
(from x in repository
orderby propertyInfo.GetValue(x, null) descending
select x) :
(from x in repository
orderby propertyInfo.GetValue(x, null)
select x);
}
// paging of the results
IQueryable<Company> pagedData = orderdData
.Skip((page > 0 ? page - 1 : 0) * rows)
.Take(rows);
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from o in pagedData //ERROR HERE : Cannot order by type 'System.Object'
select new
{
i = o.companyID,
cell = new string[] { o.companyID.ToString(), o.companyName, o.companyCity, o.companyState }
}).ToArray()
};
return Json(jsonData);
}
public class CompanyRepository
{
SandGridDataContext db = new SandGridDataContext();
// Send Total Number of Companies
public int CompanyCount()
{
return db.Companies.Count();
}
public IQueryable<Company> GetGridCompanies()
{
return db.Companies;
}
public Company GetCompany(int id)
{
return db.Companies.SingleOrDefault(d => d.companyID == id);
}
}
//JS code
jQuery().ready(function () {
var lastSel;
jQuery("#sandgrid").jqGrid({
url: '/JQSandbox/MyGridData/',
datatype: 'json',
mtype: 'POST',
height: 255,
width: 640,
colNames: ['Index', 'Name', 'City', 'State'],
colModel: [
{ name: 'companyID', index: 'companyID', width: 5 },
{ name: 'companyName', index: 'companyName', width: 30 },
{ name: 'companyCity', index: 'companyCity', width: 30 },
{ name: 'companyState', index: 'companyState', width: 4, sortable: false}],
pager: jQuery('#sandgridp'),
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'companyID',
sortorder: "desc",
viewrecords: true,
altRows: true,
caption: 'Sandbox Grid',
ondblClickRow: function (id) {
if (id && id !== lastSel) {
jQuery('#sandgrid').restoreRow(lastSel);
lastSel = id;
alert("You've seleted " + id);
}
},
subGrid: true,
subGridUrl: '/JQSandbox/MySubGridData/',
subGridModel: [
{
name: ['Name', 'Department', 'Hire Date', 'Supervisor'],
width: [80, 20, 80, 10],
align: ['left', 'left', 'left', 'center'],
params: ['companyID']
}]
}).navGrid('#sandgridp', { edit: false, add: false, del: false });
//Company class is Linq to Sql entity with fields below.
companyID,
companyName,
companyCity,
companyState
I spent too much time to resolve this.
Please check Order LINQ by "string" name.

Resources