I just started using the jqGrid. I have come across two different types of jqGrids as below.
one looks like below
<trirand:JQGrid ID="Jqgrid3" runat="server">
<Columns>
<trirand:JQGridColumn DataField="OrderID" PrimaryKey="True" />
<trirand:JQGridColumn DataField="Freight" Editable="true" />
<trirand:JQGridColumn DataField="OrderDate" Editable="true"/>
<trirand:JQGridColumn DataField="ShipCity" Editable="true" />
</Columns>
</trirand:JQGrid>
and the other one something looks like below
$("#list").jqGrid({
url: ResolveUrl() + '/DoctorList',
datatype: 'local',
postData: { "searchText": searchText },
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (jsondata) { return JSON.stringify(jsondata); },
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page",
total: "d.total", records: "d.records" },
colNames: ['Add', 'DoctorID', 'Last Name', 'First Name', 'Address'],
colModel: [
{ name: 'AddAction', width: 80, fixed: true,
sortable: false, resize: false, align: "center" },
{ name: 'ID', index: 'ID', width: 50, sortable: false, hidden: false },
{ name: 'LastName', index: 'LastName', width: 100,
hidden: false, frozen: true, sortable: false },
{ name: 'FirstName', index: 'FirstName', width: 100, hidden:
false, frozen: true, sortable: false },
{ name: 'Address', width: 420, hidden: false, sortable: false,
jsonmap: function (obj) {
var street = obj.Address.Address1
var city = obj.Address.City
var state = obj.Address.StateProvince
var zip = obj.Address.PostalCode
if (street != '') { street = street + ', ' }
if (city != '') { city = city + ', ' }
if (state != '') { state = state + ', ' }
var Address = street + city + state + zip
return Address
}
}],
For the previous type I can do some thing like this in codebehind
Jqgrid3.DataSource = GetTable()
Jqgrid3.DataBind()
I do not know if there is a way to access the cclist jqGrid from the code behind page.
Can some one please help me understand how do I understand the above two different types and are there any advantages over the other and what scenarios they are suited best?
Thanks,
Dave
Your first grid is the purchased version that includes wrappers methods to simplify working with the grid, especially if you are unfamiliar with Jquery/Javascript. Also it comes with a support package, and an additional suite of components.
Developer Explanation:
jqGrid is and will always be licensed under the most permissive and
free MIT license. However, many customers and organizations require
commercial grade licenses, support and features. This is why we
launched our official commercial website http://www.trirand.net. We
decided to keep both sites separate, so that there is less confusion
for customers.
We started with jqGrid and built a whole suite of components called
jqSuite for 3 different platforms – PHP, ASP.NET WebForms and ASP.NET
MVC. These components include HTML5 charts, treeviews, form builders,
schedulers and many more. In addition to pure HTML5/Javascript
functionality, they are strongly tied to their respective platform and
feature powerful server-side API, binding to various datasources,
codeless support for many data providers like Oracle, MySQL, MS SQL
and many others. This comes with full commercial support, guaranteed
responses, active forums with more than 10,000 posts (as of today) and
written and supported by the very same guys that created jqGrid. In
fact, your questions will be answered only by developers that created
the respective product.
Our commercial licensing is pretty simple and straight-forward – “per
developer” licensing with unlimited everything (no limit on servers,
projects, time, etc). Just the number of developers on the team
working with the products. Prices are reasonable and can save you
months of development time.
The second grid is the free version and is better suited for those familiar with Jquery/Javascript. There is a wiki and demos available that are of a great help, and a little Googling and you can find many examples of the server side code in any supported language.
Performance wise the grids are pretty much identical, and it just boils down to ease of use for you the developer, and whether or not you need the extra components and support..
Related
I'm just trying to display a very simple JQGrid with data from an ajax call to a controller. All I'm seeing is the grid headers, no data. Can someone please help me figure out what I'm doing wrong? Thanks in advance!
Here's the Ajax call and JQGrid setup..
$("#grid").jqGrid({
url: '#Url.Action("GetLoanReport", "Report")',
datatype: "json",
height: "auto",
colNames: ['Name', 'Random Stuff'],
colModel: [
{ name: 'Name', index: 'Name', width: 150, sortable: true },
{ name: 'RandomStuff', index: 'RandomStuff', width: 500, sortable: false }
],
jsonReader: {
repeatitems: true,
root: 'rowdata',
page: 'currpage',
total: 'totalpages',
records: 'totalrecords'
},
rowNum: 10,
rowList: [5, 10, 30],
rownumbers: false,
gridview: true,
loadonce: true,
pager: "#page",
caption: "Flat Data Example"
});
Here's the controller code...
Function GetLoanReport() As JsonResult
ViewData("Ribbon") = "partials/_statsRibbon"
Dim response As New Response
Dim model As New ReportModel
model.Name = "Mark"
model.RandomStuff = "Highfield"
response.currpage = 1
response.totalpages = 1
response.totalrecords = 1
response.rowdata = model
Return Json(response, JsonRequestBehavior.AllowGet)
End Function
The main problem: rowdata should be array of items (array of objects) instead of one object only with Name and RandomStuff properties.
Additionally you should decide whether you implement server side paging of data or you want to return all the data from GetLoanReport at once and jqGrid should make local paging, sorting and filtering/sorting the data? In the case you should use loadonce: true option. Additionally it's important to choose the fork of jqGrid, which you use: free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7. I develop free jqGrid fork, which I can recommend you. If you use it, then I would recommend you to add forceClientSorting: true option additionally to loadonce: true. It will allows you to use sortname and sortorder options to sort the data returned from the server before it will be displayed.
How to add grid view in MVC-6?
I would like to use webgrid something for listing the details. Is it possible to use System.Web.Helpers as namespace. But I am not getting it supporting
This project could fit your requirements, a simple grid control for ASPNET MVC (using Razor): MVC6.Grid.Web
You can also try NetCoreControls.
Built specifically for .NET MVC Core.
The Grid Control is server side, uses AJAX, and supports, paging, filter and events.
Check the documentation and demo website.
You can use the Shield UI for ASP.NET Core NuGet package and integrate it with the free Shield UI Lite via Bower, or the commercial Shield UI suite.
Their Grid widget is awesome!
I would suggest to use the jqGrid(or may be some other java scripts grid). From the MVC controller return the ActionResult as JSON object
public ActionResult UserList()
{
object userListData = null;
try
{
List<UserListViewModel> users = 'your code to get the user list'
userListData = new
{
page = 1,
records = users.Count,
rows = users
};
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.MaxJsonLength = int.MaxValue;
return new ContentResult()
{
Content = serializer.Serialize(userListData),
ContentType = "application/json",
};
}
and call this on page load/jQuery document Ready some thing like this.
$("#userTable").jqGrid({
url: '../User/UserList,
mtype: 'GET',
datatype: "json",
autowidth: true,
colNames: ['Id', 'First Name', 'Last Name'],
colModel: [
{ name: 'Id', key: true, hidden: true, fixed: false, shrinkToFit: false, align: 'left' },
{ name: 'FirstName', fixed: false, shrinkToFit: false, align: 'left' },
{ name: 'LastName', fixed: false, shrinkToFit: false, align: 'left' }
],
for more information about jqGrid, please see demo at http://jqgrid.com/
i had a script like this
<script type="text/javascript">
var gridimgpath = 'themes/basic/images';
//alert($("jqContextMenu"));
jQuery("#VWWMENU").jqGrid(
{
url:'loadstatic.php?q=2&t=CORE_VW_WMENUS',
datatype: "json",
mtype: "POST",
colNames:['Id', 'Module'],
colModel:
[
{
name:'id',
index:'id',
width:7,
editable:true,
edittype:'text',
editrules:{required:true},
editoptions:{maxlength:10, size:10},
formoptions:{rowpos:2, elmprefix:' '},
key:true
},
{
name:'modulename',
index:'modulename',
width:15,
editable:true,
edittype:'select',
editrules:{required:true},
editoptions:{maxlength:10, size:0, dataUrl:'combopub.php?t=MODULE'},
formoptions:{rowpos:1, elmprefix:' '}
}
...
</script>
the 'modulename' form is a combobox which taken its data from a table named 'module'. in this 'module' table there is a column named "fromid" and "toid". now how can i get these two values to be the range for the 'id' form? so when i input a value to form 'id' and then i submit it, it will show a message about id that i entered is out of range. i also don't know how to make the message that to appear when this error happened. so would you guys please help me on this?
i am still a total noob about this javascript or jquery kind of thing, so your help would be much appreciated.
i hope this would help to make it clearer of what i mean.
here is table module:table_module. from left to right (exclude column covered with the red line) idmodule, namemodule, idchildfrom, idchildto. and the module name that shown on the screen is actually a concate of idmodule and namemodule
now if you pick 2 from modulename combobox like this combobox_1 then you should get the range id from 201-400. and that means if you input a value of 300 into id and you press submit button, there would be an error message appear telling you that your input is more is out of range.
i hope this explanation can help you to understand more of what i actually wants to do
If I understand you correctly you can use relatively new feature (it exist starting with jqGrid 4.4.2) implemented based on my suggestion. It allows to use postData defined as function:
{
name: "modulename",
width: 15,
editable: true,
edittype: "select",
editrules: {required: true},
editoptions: {
maxlength: 10,
size: 0,
dataUrl: "combopub.php",
postData: function (rowid) {
return { id: rowid, t: "MODULE" };
}
},
formoptions: {rowpos: 1, elmprefix: " "}
}
See the answer and the pull request for more details.
We have performance issues with JQgrid rendering. Please advise.
JQGrid v4.3.2, jquery-1.7.2.min.js, jquery-ui-1.8.1.sortable.min.js, jquery-ui-1.8.20.custom.min.js
Browser: IE6,7
Every user is shown data in 2 grids - actions and fyi's. Typical data range is ~300 rows in each grid. The list of columns could vary for user groups and hence the colModel structure is dynamic. After getting data we apply conditional styles to each row (to be bold or not etc) and change the number formatting.
Code sample for grid is as below:
jQuery('#ActionItems').jqGrid({
url: 'http://actionsurl',
mtype: 'GET',
datatype: 'json',
page: 1,
colNames: actionsColNames,
colModel: actionsColModel,
viewrecords: true,
loadonce: true,
scrollrows: false,
prmNames: { id: "PrimaryID" },
hoverrows: false,
jsonReader: { id: "PrimaryID" },
sortname: 'CreateDt',
sortorder: 'desc',
gridComplete: function () {
fnActionsGridComplete();
},
recordtext: "Displaying {1} of {2} Records",
emptyrecords: "No data to view",
emptyDataText: "No data found.",
loadtext: "Loading...",
autoWidth: true,
rowNum: 1000,
grouping: true,
groupingView: groupingViewOp
});
Formatting code in fnActionsGridComplete():
Set column widths in %
Iterate thru rows to apply conditional css styles
$("#Actions").find("tbody tr").each(function () {
if ($(this)[0].id != '') {
var data = $(this).find('.IsItemNew').html();
if(data == "Y") {
$(this).css("fontWeight", "bold");
}
}
});
Formatting for specific columns.
Currently we have performance issues for >200 rows of data in any grid. After analysis we found that formatting and rendering is taking most time.
Can you suggest any optimal way to improve performance here. (paging is no-no)
Regards,
Rajani
- We did testing on IE9 and its lot better. But users cant immediately upgrade.
The reason is the code fnActionsGridComplete. I recommend you to read the answer which explains why it's very important to use gridview: true and reduce the number of changes of DOM elements of the page.
What you try to do seems could be implemented by adding cellattr to the column "IsItemNew". The code could be about the following
cellattr: function (rowId, value) {
// additional parameter of cellattr: rawObject, cm, rdata are optional
if (value === "Y") {
return ' style="font-weight:bold;"';
}
}
Alternatively you can add class attribute instead of style and define font-weight: bold in the class.
I recommend you to read the answer, this one, this one etc. If you would need to set some properties on the whole row instead of the cell only you can use rowattr (see the answer).
If you would include gridview: true and use cellattr, rowattr or custom formatters you would see that the performance of the grid will be on absolutely another level.
I'm trying to turn jqGrid within MODx, as do other data exchange using "$. ajax", move the call from a URL to a resource protected by a password and from there call a snippet of code in PHP, so the security framework, the ajax call is guaranteed
This is one example of a chunk $.ajax:
$.ajax ({
url :'[[~94]]',
type: 'post',
async: false,
success: function(rsp) {
$.Cookie("xxxxxx-tipodirlist", rsp);
}
});
*[[~94]] is a protected resource is within a snippet call [[!SnpBridgedata_blabla]]
the system works perfectly well throughout the web application, receiving and sending data safely and securely.
Now a customer asked me for a completed application wanted web results in a good grid and after seeing a bit of code I decided to use jqGrid for my project.
integration was quick and I am very happy to have changed "DataTable" with "jqGrid," but when I finished the test, change the absolute path to xxxxxx.php with the call to snippet
this is the code for jqGrid:
chargeSedi function (idx)
{
// Test with file. Php !work fine!
// Var esURL = 'http://xxxxx.com/xxxxxxx.php?IDX =' + idx;
// Test with MODx resource !not work!
esURL var = '[[~ 97]] & IDX =' + idx;
csURL var = '[[~ 96]] & IDX =' + idx;
tipodirlist = $ var. cookie ("xxxxxxxx-tipodirlist");
tiposedelist = $ var. cookie ("xxxxxxx-tiposedelist");
$("#sediTable").ready(function() {
$("#sediTable").jqGrid({
url:csURL,
datatype: "json",
height: 250,
autowidth:true,
colNames:[ 'ID','CODICE', 'NOME','TDIR', 'DIR','COMUNE', 'PROVINCIA','CAP', 'TSEDE','NOTA'],
colModel:[
{name:'ID',index:'ID', width:25, editable: false},
{name:'CODICE',index:'CODICE', width:60, editable: true},
{name:'NOME',index:'NOME', width:60, editable: true},
{name:'TDIR',index:'TDIR', width:60, editable: true,edittype:"select",editoptions:{value:tipodirlist}},
{name:'DIR',index:'DIR', width:200, sortable:false,editable: true},
{name:'COMUNE',index:'COMUNE', width:170, sortable:false,editable: true},
{name:'PROVINCIA',index:'PROVINCIA', width:170, sortable:false,editable: true},
{name:'CAP',index:'CAP', width:40, sortable:false,editable: true},
{name:'TSEDE',index:'TSEDE', width:90, editable: true,edittype:"select",editoptions:{value:tiposedelist}},
{name:'NOTA',index:'NOTA', width:170, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} ],
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
loadonce: true,
editurl: esURL ,
caption: "Sedi" });
});
]
and for my surprise the MODx deny Access to jqGrid ajax calls, as if you were out of session, but after hours testing and watching the traffic with wireshark I realized that jqGrid sends a POST variable called "id" and call MODx a GET variable "id". this in other environments is possible without problem, but it is not possible MODx and there's the problem.
my question is how I can change the name of the POST variable "id" jqGrid, without changing the source of jqGrid?
at the same time wanted to ask, you can customize the import of a select the value and not the index
example of trame POST:
{Name: 'TDIR', index: 'TDIR', width: 60, editable: true, EditType: "select" editoptions: {value: tipodirlist}}
tipodirlist = 1:via;2:piazza;3:ect
TDIR=2
CODICE=1&NOME=principale&TDIR=2&DIR=Roma&COMUNE=Torino&PROVINCIA=Torino&CAP=10000&TSEDE=2&NOTA=NO=edit&id=0
for this:
TDIR=piazza
CODICE=1&NOME=principale&TDIR=piazza&DIR=Roma&COMUNE=Torino&PROVINCIA=Torino&CAP=10000&TSEDE=2&NOTA=NO=edit&id=0
without having to filter the results on the server.
I hope I've explained well and clear. as I asked myself, the team "StackOverflow" before asking this question
Thank you so much
Regards
niro.
PS.I hope that GOD "Oleg" help me:)
I don't know and don't use MODx. Nevertheless I hope that your problem is: how to rename the name of the id parameter to have no conflict with the id parameter used by MODx.
If I understand your question correct you should just add additional prmNames parameter which set the new name of id parameter used in editing operations:
prmNames: {id: 'myId'}
The example will rename the default id parameter name ({id: "id"}) to myId which you should you in your server part.