Devextreme JS DXGrid how to call cellTemplate in code behind - asp.net

I'm trying call cellTemplate function in code behind but i cant call. Is there any way to call this function from code behind ? I have tried as you can see at below but the rows show "ShowButton"
ListDxColum.Add(new DxColumns(){
dataField = "cor_ref",
caption = "",
allowFiltering = false,
cellTemplate = "ShowButton"
});
JAVASCRIPT
var orders = rec.documentList;
$("#gridContainer").dxDataGrid({
dataSource: {
store: {
type: "array",
key: "ID",
data: orders
}
},
paging: {
pageSize: 8
},
showRowLines: true,
showBorders: true,
selection: {
mode: "single"
},
filterRow: { visible: true },
//searchPanel: {
// visible: true
//},
columns: rec.DxColumHeader,
paging: { pageSize: 6 },
wordWrapEnabled: true,
filterRow: { visible: false },
columnAutoWidth: false
});
function ShowButton(container, options) {
console.log(options.data["cor_ref"]);
}

you can use this code :
var orders = rec.documentList;
var grid = $("#gridContainer").dxDataGrid({
dataSource: {
store: {
type: "array",
key: "ID",
data: orders
}
},
paging: {
pageSize: 8
},
showRowLines: true,
showBorders: true,
selection: {
mode: "single"
},
filterRow: { visible: true },
//searchPanel: {
// visible: true
//},
columns: rec.DxColumHeader,
paging: { pageSize: 6 },
wordWrapEnabled: true,
filterRow: { visible: false },
columnAutoWidth: false,
cellTemplate: function (container, options) {
console.log(options.data["cor_ref"]);
}
}).dxDataGrid('instance');

Related

How to perform custom paging in Ext Grid

I have following Ext Grid,
Ext.onReady(function () {
var dataStore = new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: 'Default.aspx/CustomerData', //'web.aspx',
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'd',
totalProperty: 'totalCount'
}
},
fields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'age', type: 'string' },
{ name: 'phone', type: 'string' }
],
pageSize: 10
});
dataStore.load({ params: { start: 0, limit: 25} });
var myGrid1 = new Ext.grid.GridPanel({
id: 'customerslist',
store: dataStore,
columns: [
{ id: "firstname", header: "First Name", width: 100, dataIndex: "firstname", sortable: true },
{ header: "Last Name", width: 100, dataIndex: "lastname", sortable: true },
{ header: "Age", width: 100, dataIndex: "age", sortable: true },
{ header: "Phone", width: 100, dataIndex: "phone", sortable: true }
],
autoLoad: false,
stripeRows: true,
autoHeight: true,
width: 450,
height: 300,
dockedItems: [{
xtype: 'pagingtoolbar',
store: dataStore,
dock: 'bottom',
displayInfo: true
}],
renderTo: 'grid1'
});
});
I have following server side code for custom paging,
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public static List<tblCustomerList> CustomerData(int rowSize, int pageNumber)
{
DataGridEntities _dbContext = new DataGridEntities();
//Code for custom paging
Customer customer = new Customer();
customer.TotalRecords = //code for total record count
customer.Details = //fetch record based on page number and page size
return customer.Details;
}
}
How can I achieve custom Paging in this.
Paging is done with start and limit per default. And if you don't want to rewrite the whole chain I recommend you to leave it as it is an simply add two more params, in your case
dataStore.load({
params: {
rowSize: dataStore.pageSize,
pagenNumber: dataStore.currentPage || 1
}
});
In addition you will need either a custom paging navigation, a customized version of the paging toolbar or a beforeload eventhandler like this:
function(store,operation,eo){
operation.params: {
rowSize: store.pageSize,
pagenNumber: store.currentPage +1 // I assume that this was not updated before a successful load
}
}
This is untested and should show you how it can be done.

After edit of Grid cell, the value is overlapped with a zero

When I edit a cell in my grid, a zero ("0") is placed in the cell, overlapping the cell value. This zero does not show when the grid loads, and it does not save to the database when the update happens. If I navigate away and come back, the zero is gone. It only happens if I edit the cell; if I only click in the cell and initiate the inline editing, no zero appears. This happens in every cell, even the dates.
My page is an SPA.
This is the code that builds the grid:
function fnLoadStorageVaults(storageid) {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: URL_GETVAULTS,
dataType: "json",
type: "GET",
data: { StorageID: storageid }
},
update: { dataType: "json", url: URL_UPDATEVAULTS, type: "POST" },
destroy: { url: URL_DELETEVAULT, type: "POST" },
create: { url: URL_INSERTVAULT, type: "POST" },
parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
autoSync: true,
schema: {
model: {
id: "StorageVaultID",
fields: {
VaultNumber: { type: "string", editable: true },
Section: { type: "string", editable: true },
Row: { type: "string", editable: true },
DateFrom: { type: "date", editable: true },
DateTo: { type: "date", editable: true },
WarehouseID: { type: "number", editable: true }
}
}
}
});
$("#VaultGrid").kendoGrid({
dataSource: ds
, sortable: true
, editable: true
, navigable: true
, columns: [
{ field: "WarehouseID", title: "Warehouse", width: "60px" }
,{ field: "VaultNumber", title: "Vault Nbr.", width: "60px" }
, { field: "Section", title: "Section" }
, { field: "Row", title: "Row" }
, { field: "DateFrom", title: "Date In" }
, { field: "DateTo", title: "Date Out" }
]
});
}
My apologies, the update was not working after all. The zero was the response from the server. Still curious behavior though.

editurl not passing the parameter

<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$(document).ready(function () {
jQuery("#tOceanC_ds_list").jqGrid({
// add by default to avoid webmethod parameter conflicts
// add by default to avoid webmethod parameter conflicts
url: "Default.aspx?cmd=select",
datatype: "json",
colNames: ['BOQID', 'BOQType', 'Description', 'Quantity'],
colModel:[
{ name: "BOQID", hidden: true, index: "BOQID", jsonmap: "BOQID",search:true,key:true,editable:true },
{ name: "BOQType", summaryTpl: "{0}", editable: true, searchoptions: {}, index: "BOQType", width: 200, align: "center", jsonmap: "BOQType", searchoptions: {}},
//{ name: "Description", editable: true, index: "Description", width: 200, align: "center", jsonmap: "Description", search: true },
{ "editoptions": { dataInit: function (el) { setTimeout(function () { var ec = 'DatePicker1'; if (typeof (jQuery(el).datepicker) !== 'function') alert('JQDatePicker javascript not present on the page. Please, include jquery.jqDatePicker.min.js'); jQuery(el).datepicker(eval(ec + '_dpid')); }, 200); } }, "summaryTpl": "{0}", "editable": true, "edittype": "text", "searchoptions": { dataInit: function (el) { setTimeout(function () { var ec = 'DatePicker1'; if (typeof (jQuery(el).datepicker) !== 'function') alert('JQDatePicker javascript not present on the page. Please, include jquery.jqDatePicker.min.js'); jQuery(el).datepicker(eval(ec + '_dpid')); }, 200); } }, name: "Description", index: "Description" },
{ name: "Quantity", editable: true, index: "Quantity", width: 200, align: "center", jsonmap: "Quantity", search: true }
],
viewrecords: true, scrollrows: false, postBackUrl: "__doPostBack('#tOceanC_ds_list','jqGridParams')",
editDialogOptions: { editCaption: "Edit Dialog", resize: false, closeAfterEdit: true, processData: "Default.aspx", bSubmit: "Submit", bCancel: "Cancel Editing", modal: true, recreateForm: true, errorTextFormat: function (data) { return 'Error: ' + data.responseText } },
addDialogOptions: { recreateForm: true, errorTextFormat: function (data) { return 'Error: ' + data.responseText } },
delDialogOptions: { errorTextFormat: function (data) { return 'Error: ' + data.responseText } },
searchDialogOptions: {left:300,top:400,resize:false},viewRowDetailsDialogOptions: {},jsonReader: { id: "BOQID" },
rowNum: 10,
height: "60%",
rownumbers: true,
autowidth: true,
shrinkToFit: false,
rowList:[10,20,30,50,100],
pager: jQuery("#OceanC_pager"),
viewrecords: true,
multiselect: false,
sortorder: "desc",
caption:"List of Users",
editurl: "Default.aspx",
//serializeGridData: function (data) {
// return $.toJSON(data);
//},
jsonReader: { repeatitems : false, id: "0" }
});
jQuery("#tOceanC_ds_list").jqGrid("navGrid", "#OceanC_pager", { add: false, edit: true, del: true, search: true, view: true,reload:true}, {}, {}, {}, { multipleSearch: false }, jQuery('#tOceanC_ds_list').getGridParam('editDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('addDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('delDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('searchDialogOptions'), jQuery('#tOceanC_ds_list').getGridParam('viewRowDetailsDialogOptions')).bindKeys()
});
function customPhoto(cellVal, options, rowObject){
return "<img src='assets/img/" + cellVal + "' height='50' width='50' >";
}
</script>
The editurl don't pass the parameter to edit the data like oper, del, edit, add
I want editurl to pass these parameter to code behind when I request.querystring["oper"] it return the empty or request.querystring["del"] it return empty
I am using asp.net webform 3.5 framework

Adapted example from Kendo UI music store not works

I am newbie in stackoverflow and newbie with Kendo UI and newbie with web development ... I was born yesterday :). Joking apart my question is not really a question, I know the forum rules over specific questions but I need help.
My problem is this:
I adapted the Kendo UI MVC Music Store tutorial but with use MVC ASP.net (I work with Delphi) and it not works.
I have two files:
Category.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administración de Categorías</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/menuvir.css" type="text/css"/>
<script src="kendo/js/jquery.min.js" type="text/javascript"></script>
<script src="kendo/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="categGrid"></div>
<script src="js/category.js type="text/javascript"></script>
</body>
</html>
and Category.js
(function (window, $, kendo) {
var getCategAsync = function () {
var deferred = $.Deferred(),
translateCateg = function (data) {
deferred.resolve($.map(data.result, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadCateg = function () {
new kendo.data.DataSource({
type: "json",
transport: {
read: "/w/Category?select=ID,Description"
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateCateg(data);
});
};
window.setTimeout(loadCateg, 1);
return deferred.promise();
};
var getLangAsync = function () {
var deferred = $.Deferred(),
translateLang = function (data) {
deferred.resolve($.map(data.result, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadLang = function () {
new kendo.data.DataSource({
type: "json",
transport: {
read: "/w/Language?select=ID,Description"
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateLang(data);
});
};
window.setTimeout(loadLang, 1);
return deferred.promise();
};
var initGrid = function (categs, langs, categEditor, langEditor) {
$("#categGrid").kendoGrid({
sortable: true,
groupable: false, //true,
filterable: false, //true,
pageable: true,
editable: "inline",
toolbar: ["create"],
dataSource: {
type: "json",
pageSize: 10,
serverPaging: false, //true,
serverFiltering: false, //true,
serverSorting: false, //true,
sort: { field: "SortOrder", dir: "asc" },
transport: {
type: "json",
read: {
url: "/w/Category?select=ID,Description",
type: "GET"
}/*,
update: {
url: function (data) {
return store.config.albumsUrl + "(" + data.AlbumId + ")"
},
type: "PUT"
},
destroy: {
url: function (data) {
return store.config.albumsUrl + "(" + data.AlbumId + ")";
},
type: "DELETE"
},
create: {
url: store.config.albumsUrl,
type: "POST"
} */
},
schema: {
data: "result",
//total: store.config.wcfSchemaTotal,
model: {
id: "ID",
fields: {
ID: { type: "number" },
Description: { type: "string", validation: {required: true} },
Language: { type: "number", defaultValue: 1 },
SortOrder: { type: "number", defaultValue: 0 },
Status: { type: "number", defaultValue: 0 },
Parent: { type: "number", defaultValue: 0 }
}
}
},
},
columns: [
{ field: "ID", title: "ID", editable: false, filterable: false, width: 20 },
{ field: "Description", title: "Descripción", filterable: false, width: 150 },
{ field: "Language", title: "Idioma", values: langs, editor: langEditor, filterable: false, width: 50 },
{ field: "SortOrder", title: "Orden", filterable: false, width: 20 },
{ field: "Status", title: "Estado", filterable: false, width: 50 },
{ field: "Parent", title: "Subcategoría de", values: categs, editor: categEditor, filterable: false, width: 150 },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
]
});
};
// Wait for both the genres and artists lists to load.
$.when(getCategAsync(), getLangAsync())
.done(function(categs, langs) {
var categEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: categs
});
};
var langEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: langs
});
};
initGrid(categs, langs, categEditor, langEditor);
});
})(window, jQuery, kendo);
When I execute this nothing is showing and no error in Firebug console.
What's wrong ? Any help is appreciatted.
Thanks in advance and sorry for my english.
UPDATE
Sorry, I forgot update the Category.html code here, but I always had the value right "id" and yet it not works. Thanks for the quick response.
Well, for starters your JQuery is attempting to create a KendoGrid on an ID that isn't present in your HTML
$("#categGrid").kendoGrid(
doesn't match anything in your HTML. Did you mean
$("#grid").kendoGrid({
which would find
<div id="grid"></div>
I solved the problem. I changed some options I adapted erroneously.
This is the code that works.
(function (window, $, kendo) {
var getCategAsync = function () {
var deferred = $.Deferred(),
translateCateg = function (data) {
deferred.resolve($.map(data.items, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadCateg = function () {
new kendo.data.DataSource({
transport: {
read: {
url: "/w/Category?select=ID,Description",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateCateg(data);
});
};
window.setTimeout(loadCateg, 1);
return deferred.promise();
};
var getLangAsync = function () {
var deferred = $.Deferred(),
translateLang = function (data) {
deferred.resolve($.map(data.items, function(item) {
return {
value: item.ID,
text: item.Description
};
}));
},
loadLang = function () {
new kendo.data.DataSource({
transport: {
read: {
url: "/w/Language?select=ID,Description",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'result'/*,
total: store.config.wcfSchemaTotal*/
}
}).fetch(function (data) {
translateLang(data);
});
};
window.setTimeout(loadLang, 1);
return deferred.promise();
};
var initGrid = function (categs, langs, categEditor, langEditor) {
$("#categGrid").kendoGrid({
sortable: true,
groupable: false, //true,
filterable: false, //true,
pageable: true,
editable: "inline",
toolbar: ["create"],
dataSource: {
type: "json",
pageSize: 10,
serverPaging: false, //true,
serverFiltering: false, //true,
serverSorting: false, //true,
sort: { field: "SortOrder", dir: "asc" },
transport: {
read: {
url: "/w/Category?select=*",
type: "GET",
dataType: "json"
}/*,
update: {
url: function(data) {
return "/w/Category?ID=" + data.ID;
},
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function (data) {
return store.config.albumsUrl + "(" + data.AlbumId + ")";
},
type: "DELETE"
},
create: {
url: store.config.albumsUrl,
type: "POST"
} */
},
schema: {
data: "result",
total: function(response) {
return response.result.length;
},
model: {
id: "ID",
fields: {
ID: { type: "number" },
Description: { type: "string", validation: {required: true} },
Language: { type: "number", defaultValue: 1 },
SortOrder: { type: "number", defaultValue: 0 },
Status: { type: "number", defaultValue: 0 },
Parent: { type: "number", defaultValue: 0 }
}
}
},
},
columns: [
{ field: "ID", title: "ID", editable: false, filterable: false, width: 20 },
{ field: "Description", title: "Descripción", filterable: false, width: 150 },
{ field: "Language", title: "Idioma", values: langs, editor: langEditor, filterable: false, width: 50 },
{ field: "SortOrder", title: "Orden", filterable: false, width: 20 },
{ field: "Status", title: "Estado", filterable: false, width: 50 },
{ field: "Parent", title: "Subcategoría de", values: categs, editor: categEditor, filterable: false, width: 150 },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
]
});
};
// Wait for both the genres and artists lists to load.
$.when(getCategAsync(), getLangAsync())
.done(function(categs, langs) {
var categEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: categs
});
};
var langEditor = function (container, options) {
$('<input data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: langs
});
};
initGrid(categs, langs, categEditor, langEditor);
});
})(window, jQuery, kendo);
Thanks.

ExtJS reloading store on button click event with different parameter

I am new to ExtJs and I am using ExtJs4.
Now As shown in below image, There is one textfield named keywords, What I want to do is When I click on the button it will pass data of textfield to servlet and display resulted record in grid.
Now I have no idea how to do this. I am receiving JSON data response from servlet but don't know how to reload the store and refresh the grid.
Below is code for my store and grid.
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
};
}
});
You could use:
{
xtype: 'button',
text: 'Search',
handler: function() {
store.clearFilter(); //clear previous search value
var searchValue = Ext.getCmp("textFieldId").getValue(); //get new value
store.load().filter('jsonGridFielName', searchValue); //load filtered data
}
}
And for for multiple textfield search:
//FILTERS
var searchValue1 = Ext.getCmp("textFieldId1").getValue(); //value1
var searchValue2 = Ext.getCmp("textFieldId2").getValue(); //value2
var noValue = "0000xxxx"; //no Value, for empty field, use value that you are sure it is not going to be searched!!!
var clear = store.clearFilter(); //shortcut
if (!searchValue1 && !searchValue2) {
clear;
store.load().filter("jsonGridFielName1", noValue);
} else if (searchValue1) {
clear;
store.load().filter('jsonGridFielName1', searchValue1);
//...else if(searchValue n...)...
} else {
clear;
store.load().filter('jsonGridFielName2', searchValue2);
}
ezdigrid.js
// Data store for grid start
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'GET',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
//id:'ms',
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Ezdi.Grid.superclass.initComponent.apply(this, arguments);
// load the store at the latest possible moment
this.on({
afterlayout: {
scope: this,
single: true,
fn: function() {
this.store.load({
params: {
start: 0,
limit: 30
}
});
}
}
});
} // eo function initComponent
});
demo.html
//handler for button click event
fbar: [{
xtype: 'button',
text: 'Search',
handler: function() {
var value = Ext.getCmp('_keyword').getValue(); //_keyword is textField
gridDataStore.load().filter('keywords', value);
}
}]
MyServlet
keyword = request.getParameter("keywords");
//code for quesry processing
Use extraParams in your model.
extraParams: {
keywords: 'your-value'
}
Put following code in your button click handler.
gridDataStore.proxy.extraParams.keywords = 'new value';
gridDataStore.load();

Resources