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!
Related
I have a basic ej2 table structure as you can see the image below.
Table
If I click to edit very first time and save, it doesn't trigger the save button function on backend however If I comment foreign keys like this:
{ field: "IssuerId", headerText: 'Issuer', /* foreignKeyField: "IssuerId", foreignKeyValue: "IssuerName",dataSource: dataManagerIssuer, validationRules: { required: true } */},
it works
GIF Demonstration
GIF
I have been trying to solve this issue for 2 days but I couldn't come to fruition
$(function () {
var dataManager = ej.DataManager({
url: "/api/StockOrder",
adaptor: new ej.WebApiAdaptor(),
offline: true
});
var dataManagerIssuer = ej.DataManager({
url: "/api/Issuer",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerProduct = ej.DataManager({
url: "/api/Product",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerWarehouse = ej.DataManager({
url: "/api/Warehouse",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerStockOrderStatus = ej.DataManager({
url: "/api/StockOrder/GetStockOrderStatus",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerStockOrderType= ej.DataManager({
url: "/api/StockOrder/GetStockOrderType",
adaptor: new ej.WebApiAdaptor()
});
dataManager.ready.done(function (e) {
$("#Grid").ejGrid({
dataSource: ej.DataManager({
json: e.result,
adaptor: new ej.remoteSaveAdaptor(),
insertUrl: "/api/StockOrder/Insert",
updateUrl: "/api/StockOrder/Update",
removeUrl: "/api/StockOrder/Remove",
}),
toolbarSettings: {
showToolbar: true,
toolbarItems: ["add", "edit", "delete", "update", "cancel", "search", "printGrid"]
},
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: false,
showDeleteConfirmDialog: false,
editMode: "dialog",
},
isResponsive: true,
enableResponsiveRow: true,
allowSorting: true,
allowSearching: true,
allowFiltering: true,
filterSettings: {
filterType: "excel",
maxFilterChoices: 100,
enableCaseSensitivity: false
},
allowPaging: true,
pageSettings: { pageSize: 10, printMode: ej.Grid.PrintMode.CurrentPage },
columns: [
{ headerText: 'Detail', template: "<a href='/StockOrder/Detail/{{:StockOrderId}}'>Detail</a>" },
{ field: "StockOrderId", headerText: 'SO Id', isPrimaryKey: true, isIdentity: true, visible: false },
{ field: "StockOrderUniqueId", headerText: 'Unique Id', },
{ field: "StockOrderName", headerText: 'Name',},
{ field: "ToProductId", headerText: 'ToProduct',visible:false},
{ field: "StockOrderTypeId", headerText: 'Stock Type', foreignKeyField: "StockOrderTypeId", foreignKeyValue: "StockOrderTypeName", dataSource: dataManagerStockOrderType , validationRules: { required: true } },
{ field: "IssuerId", headerText: 'Issuer', foreignKeyField: "IssuerId", foreignKeyValue: "IssuerName",dataSource: dataManagerIssuer, validationRules: { required: true } },
{ field: "ProductId", headerText: 'Product', foreignKeyField: "ProductId", foreignKeyValue: "ProductName", dataSource: dataManagerProduct, validationRules: { required: true } },
{ field: "WarehouseId", headerText: 'Warehouse', foreignKeyField: "WarehouseId", foreignKeyValue: "WarehouseName", dataSource: dataManagerWarehouse, validationRules: { required: true } },
{ field: "TotalAmount", headerText: 'Amount',},
{ field: "Remarks", headerText: 'Remarks',},
{ field: "StockOrderStatusId", headerText: 'Stock Status', foreignKeyField: "StockOrderStatusId", foreignKeyValue: "StockOrderStatusName", dataSource: dataManagerStockOrderStatus, validationRules: { required: true } },
],
actionComplete: "complete",
actionBegin: "begin",
});
});
});
I cannot bind results from search in kendo grid. I've tried many times, I'm in trouble four days, I don't know what is wrong here,
When i debug action everything is working perfect,data is OK, return grid result are OK, but results aren't shown in kendo.
Here is my code:
<script>
$(function() {
$("a.k-button").on('click', function (e) {
debugger;
e.preventDefault();
var dataObj = serializeByFieldsWrap(".invoiceForm");
var dataUrl = $(this).data('url');
// dataObj.ToolboxId = toolboxId;
$('body').css('cursor', 'wait');
var result = $.ajax({
type: "POST",
url: dataUrl,
dataType: 'json',
data: dataObj,
//complete: $("#invoices-grid").data("kendoGrid").data.read(),
});
result.done(function (data) {
console.log(data);
var grid = $('#invoices-grid').data("kendoGrid");
grid.dataSource.data(data);
});
result.fail(function (error) {
console.log(error);
});
});
});
</script>
Controller:
public ActionResult List(DataSourceRequest command, FinanceListModel model)
{
var searchString = model.SearchJobItemNumber;
var isChecked = model.IsChecked;
var invoices = _invoiceService.GetAllInvoices(searchString, isChecked);
var gridModel = new DataSourceResult
{
Data = invoices.Select(x => {
var jobModel = x.ToModel();
return jobModel;
}),
Total = invoices.TotalCount
};
return Json(gridModel, "application/json", JsonRequestBehavior.AllowGet);
}
Kendo UI Grid:
<script>
$(function() {
$("#invoices-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.Invoices)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerName: { type: "string" },
DepartmentName: { type: "string" },
DateInvoice: { type: "string" },
ValidDays: { type: "number" },
Delivery: { type: "string" },
IsPayed: { type: "boolean" },
Payed: { type: "number" },
Status: { type: "boolean" },
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: function () {
var row = this.element.find('tbody tr:first');
this.select(row);
},
columns: [
#*{
field: "Status",
title: "#T("gp.Jobs.Fields.Status")",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "#T("gp.Invoice.Fields.JobNumber")",
template: '#= JobNumber #'
},
{
field: "CustomerName",
title: "#T("gp.Invoice.Fields.CustomerName")",
template: '#= CustomerName #'
},
{
field: "DepartmentName",
title: "#T("gp.Invoice.Fields.DepartmentName")",
template: '#= DepartmentName #'
},
{
field: "DateInvoice",
title: "#T("gp.Invoice.Fields.DateInvoice")",
template: '#= DateInvoice #'
},
{
field: "ValidDays",
title: "#T("gp.Invoice.Fields.ValidDays")",
template: '#= ValidDays #'
},
{
field: "Delivery",
title: "#T("gp.Invoice.Fields.Delivery")",
template: '#= Delivery #'
},
{
field: "Payed",
title: "#T("gp.Invoice.Fields.IsPayed")",
template: '#= (Payed == 2) ? "Комп." : ((Payed == 1) ? "ДЕ" : "НЕ") #'
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 100,
template: '#T("Common.Edit")'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "popup"
},
scrollable: false,
selectable: true,
change: function(e) {
var selectedRows = this.select();
var jobId = parseInt($(selectedRows).data('job-id'));
var jobItemId = parseInt($(selectedRows).data('job-item-id'));
var result = $.get("#Url.Action("SideDetails", "Production")/" + jobItemId);
result.done(function(data) {
if (data) {
$(".job-edit .jobItemDetails").html(data);
}
});
},
rowTemplate: kendo.template($("#invoiceRowTemplate").html()),
});
});
</script>
DataSourceResult formats your server response like this:
{
Data: [ {JobNumber: "...", FieldName: "bar", ... } ],
Total: 100
}
In other words, the data items array is assigned to a Data field, and the total items count is assigned to a Total field. The Kendo UI DataSource configuration must take this into account by setting schema.data and schema.total:
http://docs.telerik.com/kendo-ui/framework/datasource/crud#schema
http://docs.telerik.com/kendo-ui/framework/datasource/crud#read-remote
schema: {
data: "Data",
total: "Total"
}
I need inline image buttons for EDIT and DELETE functionality.
But, I don't need default inline editing or inbuilt dialog popup as , my design is as follow.
add/edit form is appear first and then, below that section, - grid is appearing.
On click of - row inline "Edit" image button , need to populate row data on above form.
To achieve this, on click of edit image button, I need to have javascript function call along with row data object.
How to achieve this ? Can any one share me the column code and function which can allow me to achieve this ?
Below is jqgrid stuff:
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
postData: { categoryId: 1 },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
colModel: [
{ name: 'Id', index: 'Id', hidden: true, key: true },
{ name: 'Code', index: 'Code', width: 170 },
{ name: 'Description', index: 'Description', width: 170 },
{ name: 'IsActive', index: 'IsActive', width: 170 },
{
name: 'actions', index: 'actions', formatter: 'actions',
formatoptions: {
keys: true,
editbutton: false,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '725',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
return true;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });
You could add custom icons to the actions column of each line on gridComplete. See example below.
$('#CategoriesGrdList').jqGrid({
...
sortorder: 'desc',
gridComplete: function () {
var ids = $("#CategoriesGrdList").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editIcon = "<div style='float: left;' class='ui-pg-div' onclick='myEditRow(\"" + id + "\");'><a class='ui-icon ui-icon-pencil'></a></div>";
var deleteIcon = "<div style='float: left;' class='ui-pg-div' onclick='myDeleteRow(\"" + id + "\");'><a class='ui-icon ui-icon-trash'></a></div>";
$("#gridDocs").jqGrid('setRowData', ids[i], { actions: editIcon + deleteIcon });
}
}
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true });
function myEditRow(rowId) {
var rowData = $("#CategoriesGrdList").jqGrid('getRowData', id);
//do something with the data i.e.
$('#nameEditInput').val(rowData.Code);
}
function myDeleteRow(rowId) {
//your delete code...
$("#" + id).hide();
}
<script type="text/javascript">
$(document).ready(function () {
var data1=[{"Employees": {"Employee": [{ "EmpID": "Beverly Hills","EmpSubject": 90210},{ "EmpID": "Beverly Hills1","EmpSubject": 90210333}]}}];
var source =
{
datatype: "json",
datafields: [
{name: 'subject', map: 'Employees>Employee>EmpSubject'},
{name: 'empid', map: 'Employees>Employee>EmpID'}
],
localdata:data1
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#jqxgrid").jqxGrid(
{
width: 1435,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'Subject', datafield: 'subject'},
{ text: 'ID', datafield: 'empid'}
],
});
});
</script>
Here I want to display two employees details(ie two rows). But the jqxgrid is not >displaying records. Please help in this regard.
Best Regards
Bala
You can find the solution here: http://www.jqwidgets.com/community/topic/get-element-value-from-json-and-bind-the-grid/
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 {};
}
}
);