JQWidgets jqxGrid: Dataadapter and Paging - jqxgrid

i have a newbie question, but i’m scratching my head on this one. I have a grid, bound to a dataadapter. On the grid, paging and filtering is explicit disabled, but the GET-call from the dataadapter allways includes following parameters in the GET-url:
?filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&_=1386768031615
I want to get all data, then cache it clientside for paging and filtering, but in the first step i just want to get my data bound to the grid.
Here’s my code:
var source = {
type: "GET",
datatype: "json",
datafields: [
{ name: 'url' },
{ name: 'category', type: 'int' },
{ name: 'info' },
{ name: 'status', type: 'bool' }
],
url: '/api/redirects/Getallredirects',
id: 'id'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
},
downloadComplete: function (data) {
var returnData = {};
returnData.records = data.d;
return returnData;
}
});
$("#jqxgrid").jqxGrid({
source: dataAdapter,
filterable: false,
pageable: false,
virtualmode: false,
columns: [
{ text: 'URL', dataField: 'url', width: 100 },
{ text: 'Category', dataField: 'category', width: 100 },
{ text: 'Info', dataField: 'info', width: 180 },
{ text: 'Status', dataField: 'status', width: 80, cellsalign: 'right' },
]
});
I don’t get any data, the GET-call fails because of the automatically included parameters. How do i get rid of these parameters?
I just found in the jqxGrid documentation a reference to these parameters, but no example, how to remove them:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm
Thanks in advance for any help.

The below will remove the default parameters:
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
return {};
}
}
);

Related

Call knockout method inside kendo grid

I have simple kendo UI grid
$("#Grid").kendoGrid({
dataSource: {
serverPaging: true,
transport: {
read: "Course/Read",
dataType: "json"
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 10
},
pageable: true,
columns:
[
{ field: "CourseName", title: "Name", width: 100 },
{ field: "SpecialtyName", title: "Specialty", width: 100, filterable: false },
{ title: "Edit", template: '<span class="EditIcon"><i data-bind="click:Edit(#: Id#)" class="fa fa-edit"></i></span>', width: 50 },
]
});
the problem is when I am using:
data-bind="click:Edit(#: Id#)"
when click on edit calling function not work inside kendo grid notice that both the grid and function inside knockout viewmodel
function viewmodel() {
var self = this;
self.Load = function () {
$("#Grid").kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
serverPaging: true,
transport: {
read: "Course/Read",
dataType: "json"
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 10
},
pageable: true,
columns:
[
{ field: "CourseName", title: "Name", width: 100 },
{ field: "SpecialtyName", title: "Specialty", width: 100, filterable: false },
{ title: "Edit", template: '<span class="EditIcon"><i data-bind="click:Edit(#: Id#)" class="fa fa-edit"></i></span>', width: 50 },
]
});
}
self.Load();
self.Edit= function (Id) {
////////my code////////
}
}
everything work fine the binding retrieve data, extra except call knockout method inside kendo grid, appreciate any help thanks.
if anyone looking for answer or open this post, this is not related to kendo, this is because the grid render rows after knockout binding done, so you can take viewmodel object in temp var in javascript and use it like tempvar.callfunction().

Kendo grid sending date in wrong format

it is kendoui grid working against webapi (.net mvc 4 project)
the kendoGrid part in my js file:
$("#eventsgrid").kendoGrid({
dataSource: {
transport: {
read: { url: "/Webapi/V2/.../events", type: "GET" },
update: { url: "/Webapi/V2/.../events", type: "PUT" },
create: { url: "/Webapi/V2/.../events", type: "POST" },
destroy: { url: "/Webapi/V2/.../events", type: "DELETE" }
},
pageSize: 10,
schema: {
model: {
id: "eventId",
fields: {
eventId: { type: "number", editable: false, nullable: true },
eventCode: { type: "string" },
eventLocation: { type: "string" },
clientId:{ type: "string" },
startDate:{ type: "date" },
endDate: { type: "date" }
}
}
}
},
columns: [
{ field: 'eventId', title: 'ID', width: '50px', filterable: true },
{ field: 'eventCode', title: 'Code', width: '80px', filterable: true },
{ field: 'eventLocation', title: 'Location', width: '150px', filterable: true },
{ field: 'clientId', title: 'Client', width: '80px', filterable: true },
{ field: 'startDate', title: 'Start', width: '80px', format: "{0:MM/dd/yyyy}", filterable: { ui: "datepicker" } },
{ field: 'endDate', title: 'End', width: '80px', format: "{0:MM/dd/yyyy}", filterable: { ui: "datepicker" } },
{ command: [{ id: "edit", name: "edit", text: "Edit" }, { id: "destroy", name: "destroy", text: "Delete", width: "30px" }, { text: 'Details', click: gotouser }], title: "&nbsp", width: "240px" }
],
sortable: true,
editable: "popup",
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
toolbar: [{ name: "create", text: "Add new Event" }],
pageable: { pageSizes: true | [10, 20, 30] }
});
the problem is: when i edit a record, or post a new one, the value i receive in my mvc controller for any of the date fields, is null.
when i check in my chrome tools, see what the grid sends to the controller (when you hit update in the popup), like this:
clientId: 1
startDate: Tue Jan 20 2015 00:00:00 GMT-0500 (Eastern Standard Time)
endDate: Thu Jan 22 2015 00:00:00 GMT-0500 (Eastern Standard Time)
logo: abcsd.jpg
featured: 4
obviously the date format is wrong, and i suppose that is why the controller does not see it as a date, the conversion/binding fails, and it gives me null.
How do i make it send a different format, like mm/dd/yyyy ? isn't that covered by the format definitions in the columns array?
You can try to use parameterMap function. Look at kendo parameterMap documentation.
Similar to this:
parameterMap: function (data, operation) {
if (operation != "read") {
var parsedDate = kendo.parseDate(data.startDate, "MM/dd/yyyy");;
data.startDate = parsedDate;
return data;
}
}
For kendo parsing dates look at kendo parseDate
in the parameterMap use:
var parsedDate = kendo.toString(data.startDate, "MM/dd/yyyy")
the kendo.parseDate function takes a string as a parameter
OK, I followed Dmitriy's line, and was able to make it work. so for future generations, here is what you need to add to your js:
update: {
url: "/Webapi/..../events",
dataType: "json",
type: "PUT",
data: function (data) {
data.startDate = kendo.toString(data.startDate, "yyyy-MM-dd");
data.endDate = kendo.toString(data.endDate, "yyyy-MM-dd");
// repeat for all your date fields
return data;
}
},
// same thing for your 'create'.
// Sorry, look like a bit of 'Repeat yourself', but at least it's working.
So again, big thanks to Dimitriy!

jqxgrid not displaying busy or loading indicator

I am using jqxgrid and I have below code snippet and i want to display load indicator on button click which calls the Ajax method and hide it on the success method or anyway other to display it as i need to show loading indicator from the time request made till i get the data
$("#btnSearch").bind('click', function () {
//show indicator here
LoadLookUpSearchGrid();
}
//Ajax call to fetch data
function LoadLookUpSearchGrid() {
var filterRows = getGridRows();
$.ajax({
type: 'POST',
dataType: 'json',
async: false,
cache: false,
url: 'AddEditView.aspx/LoadLookUpSearchGrid',
data: JSON.stringify({ FilterType: $('select#ddlFilterType').val() , Id: $("#txtId").val() , Name: $("#txtName").val(), SearchText: '', FilterRows: filterGridRows}),
contentType: 'application/json; charset=utf-8',
success: function (data) {
var source = data.d;
SetSearchFields($('select#ddlFilterType option:selected').text(), source);
},
error: function (err) {
alert(err.text + " : " + err.status);
}
});
};
//source object to format data
function SetSearchFields(fieldName, source) {
var columns;
if (fieldName == "Operating Company") {
source =
{
datatype: "xml",
datafields: [
{ name: 'COMPANY', type: 'string' },
{ name: 'DESCR', type: 'string' }
],
async: false,
root: "Company",
localdata: source
};
columns = [
{ text: 'OPCO ID', dataField: 'COMPANY', width: '30%' },
{ text: 'Company Name', dataField: 'DESCR', width: '65%' }
];
}
lookupSearchResultGrid(source, columns,fieldName);
}
//adaptor to fill source and bind grid
function lookupSearchResultGrid(source, columns,fieldName) {
var searchViewGridDataAdapter = new $.jqx.dataAdapter(source);
$("#divLookupSearch").jqxGrid(
{
width: '100%',
source: searchViewGridDataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
selectionmode: 'checkbox',
columns: columns
});
//hide indicator here on on success method of ajax call
};
On the click of the button call showloadelement and in the Ajax call success callback function call hideloadelement.
$("#btnSearch").bind('click', function () {
$('#divLookupSearch').jqxGrid('showloadelement');
//show indicator here
LoadLookUpSearchGrid();
}
...
success: function (data) {
$('#jqxGrid').jqxGrid('hideloadelement');
var source = data.d;
SetSearchFields($('select#ddlFilterType option:selected').text(), source);
},
...
Best Regards,
Alpesh

extjs 4.2 load store grid when open window

i'am new with extjs. i have an application asp.net mvc with integrated extjs 4.2 mvc. My application will have multi windows. now i one menu with button and onclick event button open the windows. have two windows. each windows there is a grid with different store, but when i open the windows, extjs load wrong store. i don't understand. the store is setting autoload:false. but don't work =(.
store UtenteStore.js:
Ext.define('MyApp.store.UtenteStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.utenteData'
],
constructor: function (cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
autoSave: false,
model: 'MyApp.model.utenteData',
storeId: 'MyJsonStore',
idProperty: 'Id',
proxy: proxy
}, cfg)]);
}
});
var writer = new Ext.data.JsonWriter({
type: 'json',
writeAllFields: true,
allowSingle: false
});
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
type: 'json',
successProperty: 'success',
messageProperty: 'message'
});
var proxy = new Ext.data.HttpProxy({
timeout: 120000,
noCache: false,
reader:reader,
writer: writer,
type: 'ajax',
api: {
read: '/Clienti/Get',
create: '/Clienti/Update',
update: '/Clienti/Update',
destroy: '/Clienti/Delete'
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
});
store FornitoreStore.js:
Ext.define('MyApp.store.FornitoriStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.fornitoriData'
],
constructor: function (cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
autoSave: false,
model: 'MyApp.model.fornitoriData',
storeId: 'MyJsonStore2',
idProperty: 'Id',
proxy: proxy
}, cfg)]);
}
});
var writer = new Ext.data.JsonWriter({
type: 'json',
writeAllFields: true,
allowSingle: false
});
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
type: 'json',
successProperty: 'success',
messageProperty: 'message'
});
var proxy = new Ext.data.HttpProxy({
timeout: 120000,
noCache: false,
reader: reader,
writer: writer,
type: 'ajax',
api: {
read: '/Fornitori/Lista',
create: '',
update: '',
destroy: ''
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
});
this is my first windows Clienti.js:
var editor = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Ext.define('MyApp.view.clienti.Clienti', {
extend: 'Ext.window.Window',
height:600,
width: 800,
shadow: 'drop',
collapsible: true,
title: 'Lista Clienti',
maximizable: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
id: 'gridpanelId',
header:false,
store:'MyApp.store.UtenteStore',
forceFit: true,
columnLines: true,
autoResizeColumns: true,
selType: 'rowmodel',
columns: [
{
dataIndex: 'CodiceCliente',
text: 'Codice',
filter: {
type: 'int',
minValue: 1
}
},
{
xtype: 'gridcolumn',
dataIndex: 'DescrizioneCliente',
text: 'Descrizione',
editor: {
xtype: 'textfield',
allowBlank: true
},
filter: true
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
listeners: {
afterrender: {
fn: me.loadDb,
scope: me
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Inserisci',
listeners: {
click: {
fn: me.inserisciClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Elimina',
listeners: {
click: {
fn: me.eliminaClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Salva',
listeners: {
click: {
fn: me.salvaClick,
scope: me
}
}
}
]
}
],
plugins: [editor, {
ptype: 'filterbar',
renderHidden: false,
showShowHideButton: true,
showClearAllButton: true
}]
}
]
});
me.callParent(arguments);
},
loadDb: function (component, eOpts) {
},
inserisciClick: function (button, e, eOpts) {
editor.cancelEdit();
Ext.getCmp('gridpanelId').getStore().insert(0, "");
editor.startEdit(0, 0);
},
eliminaClick: function (button, e, eOpts) {
var sm = Ext.getCmp('gridpanelId').getSelectionModel();
Ext.getCmp('gridpanelId').getStore().remove(sm.getSelection());
},
salvaClick: function(button, e, eOpts) {
Ext.getCmp('gridpanelId').getStore().sync();
}
});
this is my second windows ListaFornitori.js:
Ext.define('MyApp.view.fornitori.ListaFornitori', {
extend: 'Ext.window.Window',
height: 600,
width: 900,
layout: {
type: 'absolute'
},
title: 'Lista Fornitori',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'Lista',
items: [
{
xtype: 'gridpanel',
id: 'grdListaFornitori',
height: 362,
header: false,
store:'MyApp.store.FornitoriStore',
forceFit: true,
columnLines: true,
autoResizeColumns: true,
title: '',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'CodiceFornitore',
text: 'Codice',
filter: {
type: 'int',
minValue: 1
}
},
{
xtype: 'gridcolumn',
dataIndex: 'DescrizioneFornitore',
text: 'Descrizione',
filter:true
}
],
plugins: [{
ptype: 'filterbar',
renderHidden: false,
showShowHideButton: true,
showClearAllButton: true
}],
viewConfig: {
preserveScrollOnRefresh: true,
listeners: {
afterrender: {
fn: me.loadDb,
scope: me
},
celldblclick: {
fn: me.editClick,
scope: me
}
}
}
}
]
}
]
},
{
xtype: 'button',
x: 750,
y: 450,
text: 'Inserisci',
icon: '/Scripts/ext-4.2/resources/ico/add.png',
listeners: {
click: {
fn: me.inserisciClick,
scope: me
}
}
}
]
});
me.callParent(arguments);
},
loadDb: function (component, eOpts) {
},
editClick: function (tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
Ext.create('MyApp.view.fornitori.InsFornitori', { rIx: rowIndex }).show();
},
inserisciClick: function(button, e, eOpts) {
Ext.create('MyApp.view.fornitori.InsFornitori').show();
}
});
Infine this is my app.js:
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths : {
'MyApp' : '../MyApp'
}
});
Ext.application({
models: [
'utenteData',
'fornitoriData'
],
stores: [
'MyApp.store.UtenteStore',
'MyApp.store.FornitoriStore'
],
views: [
'clienti.Clienti',
'MyViewport',
'fornitori.InsFornitori',
'fornitori.ListaFornitori',
'fornitori.Fornitori'
],
autoCreateViewport: true,
name: 'MyApp',
appFolder: '../MyApp',
});
and this my strucut:
could someone help me? It is some days that I'm stuck?
sorry for my english
There are two ways:
Option 1: This is tested.
xtype: 'gridpanel',
id: 'grdListaFornitori',
... ...
listeners: {
render:{
scope: this,
fn: function(grid) {
//load store after the grid is done rendering
grid.getStore().load();
}
}
}
Option 2: Didn't try this option yet. But It should work.
loadDb: function (component, eOpts) {
component.ownerCt.getStore().load();
},
I am a newbie using extj too, and I can look that you never call the load() method in your stores. You had set autoLoad property to false. Try to call it, and make me know that it works. Good Luck!

Jqgrid - send parameters on setup of grid

I have following setup. I have a view, in asp.net MVC, which loads without any data. On click of a button, we setup a jqgrid (call (#grid).jqGrid) which retrieves data from a server. But, we also want to send some parameters. These parameters will be used as filters on the server side before returning json data for jqgrid. How to do this?
`$('#getrecords').click(function (e) {
e.preventDefault();
debugger;
jQuery("#records").jqGrid({
url: '/Test/Data/',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'left' },
{ name: 'Name', index: 'Name', width: 300, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 50],
viewrecords: true,
caption: 'My first grid',
postData: {
myname: function () { $('#myname').val(); },
childname: function () { $('#child').val(); }
}
});
});
`
You can use the grid's postData option to define parameters that should be passed to the server on each request:
postData: { param1: 'value1', param2: 'value2', etc... }
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Resources