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/
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.
I am trying to create two combo boxes, one enabling users to select a state and the other a local government area (LGA), and have it so the LGAs are filtered on the basis of the state selected. I'm using Ext 3.4 and populating data stores using an AJAX request. The filtering is being done with a REST query to Django.
I believe the issue I'm having is coming down to variable scope, as the first combo box works fine but once I select a state I get an error stating "Uncaught TypeError: Cannot call method 'request' of undefined" when I'm trying to load the URL for the LGA combo box's data store. I've indicated where this is happening with a comment in the code (see below). I'm struggling to understand how I need to rejig the code to make things work. I'm a bit of a newbie to programming so apologies if the solution is a simple one. My code is below.
Thanks in advance for any help.
Ext.onReady(function() {
var stateStore = new Ext.data.JsonStore({
autoDestroy: true,
url: 'states.json',
storeId: 'ste-store',
root: 'records',
id: 'ste-store',
fields: ['state']
});
var lgaStore = new Ext.data.JsonStore({
autoDestroy: true,
url: '',
storeId: 'lga-store',
root: 'records',
id: 'lga-store',
fields: ['lga']
});
var stateCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'ste-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: stateStore,
displayField: 'state',
valueField: 'state',
listeners: {
render: function(e) {this.getStore().load()},
select: function(combo, record, index) {
var selectedState = record.get('state');
var lgaUrl = 'lgas.json?state=' + selectedState;
lgaStore.url = lgaUrl; //Error is traced back to here
lgaCombo.getStore().load();
}
}
});
var lgaCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'lga-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: lgaStore,
displayField: 'lga',
valueField: 'lga',
});
});
first mistake of your code in mode. If you fetching data from back-end mode should be remote.
Another i advice your use select event of first combo box to get the data from server .
here is my two combo box which fetch the data remotely
new Ext.form.ComboBox({
id:"myB",
hiddenName:'myserId',
store: myStore(),
emptyText:'Select App ...',
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
listWidth : 345,
anchor : '90%',
selectOnFocus:true,
listeners: {
// 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
select: function(combo, record, index){
var geoStorageCB = Ext.getCmp('geoCB');
geoStorageCB.getStore().proxy.setUrl('../test', true);
geoStorageCB.getStore().load({
params:{
id:combo.getValue()
}
});
}
}
}),new Ext.form.ComboBox({
id:"geoCB",
hiddenName:'geoId',
hidden : true,
store:myGeoStorage(),
emptyText:'Select GeoStorage ...',
displayField: 'storageName',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'local',
listWidth : 345,
editable: false,
maxLength: 50,
anchor : '90%',
selectOnFocus:true
})
This Example from sencha forum can give you an idea how cascading combo works. I think the main problem of your code is your lgaStore loading method (inside stateCombo listener) doesn't use correct way to pass parameters to Django for the query. As naresh mentioned, you'd better use "lgaCombo.getStore().load({params:{...}});"
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..
I have a grid which uses a remote store and remote pagination because I have too many records.The store for the main grid is:
Ext.define('ArD.store.RecordsListStore', {
extend: 'Ext.data.Store',
model: 'ArD.model.RecordsListModel',
autoLoad: true,
autoSync: true,
remoteSort: true,
remoteFilter: true,
pageSize: 15,
proxy: {
type: 'ajax',
actionMethods: 'POST',
api: {
read: g_settings.baseUrl + 'index.php/recordslist/getAll',
destroy: g_settings.baseUrl + 'index.php/recordslist/deleteRecord'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
successProperty: 'success'
},
writer: {
root: 'data',
writeAllFields: true,
encode: true
}
}
});
then I populate my grid and and it's all fine. But the problem is that I have a combobox which looks like this:
{
xtype: 'combo',
id: 'records_list_form_id',
emptyText: 'Choose Form',
editable: false,
store: 'FilterRecordsByForm',
displayField: 'title',
valueField: 'id',
lastQuery: '',
triggerAction: 'all',
queryMode: 'remote',
typeAhead: false,
width: 200,
listeners: {
select: this._filterRecords
}
}
And when I select something from the combobox there's the function :
_filterRecords: function()
{
var recStore = Ext.getStore('RecordsListStore');
var a = Ext.getCmp('records_list_form_id').getValue( );
var rec = Ext.getStore('FilterRecordsByForm').getAt(a);
console.log(recStore);
},
mostly just trying some things but I can get the ID of the selected element from the combobox and that is where I am.
What I need is having the id to make a new query usign my AJAX api (PHP/SQL backend) and populate the grid with the info related with this id. In my case I have 1:M relations so when I pass the Id i expect M records which I want to render on the place of the old grid.
Thanks
Leron
Use filter() method. Provide information that you need to filter by and store object will automatically request updated info from the server (you already have remoteFilter configured).
Look at Ext.Ajax() to make an on-demand ajax call to the server-side to load up your data and then use Store.loadData() or something like that to re-populate the Grid.
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.