Format Kendo Grid to display dollars sign and allow up to two decimal? - kendo-ui

I have a kendo Grid that I create like this:
function drawInvoiceTable() {
invoiceTable = $('#invoiceGrid').kendoGrid({
sortable: true,
pageable: true,
dataSource: {
data: getData(),
pageSize: 10,
schema: {
model: {
id: 'test',
fields: {
active: false
}
}
}
},
columns: [
{ template: "<input type='checkbox' id='chkInvoices' class='invoiceDisplay' name='chkInvoices' #= active ? checked='checked' : '' #/>", width: 30 },
{ field: 'accountNumber', title: 'Account', attributes: { 'class': 'accountnumber' }, sortable: true },
{ field: 'transactionDate', title: 'Trans Date', attributes: { 'class': 'transdate' }, width: 100, sortable: true },
{ field: 'TransType', title: 'Type', attributes: { 'class': 'transType' }, width: 60, sortable: true },
{ field: 'TransReferenceNumber', title: 'Reference Number', attributes: { 'class': 'refnumber' }, width: 135, sortable: true },
{ field: 'transactionDebitAmount', title: 'Amount', attributes: { 'class': 'amount' }, width: 90, sortable: true },
{ field: 'openBalance', title: 'Balance', width: 90, attributes: { 'class': 'balance' }, template: '#= kendo.format("{0:p}", openBalance) #', sortable: true },
{ field: 'discountAmount', title: 'Discount', format: "{0:c}", attributes: { 'class': 'discount', 'data-format': 'c' }, width: 90, sortable: false },
{ field: 'discountApplied', title: 'Discount Applied', width: 95, attributes: { 'class': 'discapplied' }, sortable: false },
{ field: 'paymentApplied', title: 'Payment Applied' , width: 95, attributes: { 'class': 'paymentapplied' }, sortable: false },
{ field: 'discountDate', title: 'Discount Date', attributes: { 'class': 'discountDate' } },
{ field: 'dueDate', title: 'Due Date', width: 90, sortable: true }
]
});
grid = $('#invoiceGrid').data('kendoGrid');
dataSource = grid.dataSource;
data = dataSource.data();
}
How can I have the values in some of my columns formatted with the dollar sign and allow up to 2 decimal such as $12541.23 ?


In the column definition use format: "{0:c2}":
{ field:"price", title:"Price", format:"{0:c2}" },
c stands for currency and 2 is the number of decimals


You would want to set the column.format to "{0:c2}"
"c2" is the number format (currency, 2 decimal places) which is defined here.

Related

When I selected columns on filter the selected columns unchecked but the order of the rows changed -kendo grid

`
class TransactionsGrid {
constructor(productInfoWindowId) {
this._productInfoWindowId = productInfoWindowId;
this._gridTransactionsSelectorId = this._productInfoWindowId + " " + "#gridTransactions";
}
async setGrid(inventoryId, productId) {
this._inventoryId = inventoryId;
this._productId = productId;
let userStore = new UserStore();
$(this._gridTransactionsSelectorId).kendoGrid({
allowCopy: true,
resizable: true,
reorderable: true,
columnMenu: true,
scrollable: true,
selectable: "row",
persistSelection: true,
navigatable: true,
sortable: true,
filterable: {
mode: "menu"
},
pageable: {
pageSizes: [100, 200, 300, "all"],
numeric: false
},
height: window.innerHeight - 200,
columns: [
{
field: "OrderType",
title: userStore.translatedString("frmPurchaseOrder.OrderType"),
width: 120
},
{
field: "DocumentNo",
title: userStore.translatedString("frmCreatePurchaseOrders.DocumentNo"),
width: 130,
},
{
field: "ActorNo",
title: userStore.translatedString("Common.ActorNo"),
width: 120
},
{
field: "Actor",
title: userStore.translatedString("Common.Actor"),
width: 120,
},
{
field: "TransactionDate",
title: userStore.translatedString("uctrlInventoryTrans.TransactionDate"),
width: 125,
attributes: {
style: 'text-align: right;'
},
format: "{0:yyyy-MM-dd}"
},
{
field: "Quantity",
title: userStore.translatedString("Common.Quantity"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
},
{
field: "QtyAfterTransactions",
title: userStore.translatedString("Common.QtyAfterTransactions"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
}
],
dataBound: async function (e) {
var rows = e.sender.content.find('tr');
rows.each(function (index, row) {
var dataItem = e.sender.dataItem(row);
if (dataItem.QtyAfterTransactions < 0) {
$(row).children().addClass('lightRed');
}
});
},
dataSource: {
dataType: "json",
schema: {
model: {
fields: {
InventoryId: { type: "number", editable: false },
ProductID: { type: "number", editable: false },
OrderType: { type: "string", editable: false },
DocumentNo: { type: "number", editable: false },
ActorNo: { type: "number", editable: false },
Actor: { type: "string", editable: false },
TransactionDate: { type: "date", editable: false},
Quantity: { type: "decimal", editable: false },
QtyAfterTransactions: { type: "decimal", editable: false }
}
}
},
batch: false,
transport: {
read: function (options) {
$.ajax({
url: "/ProductRowInfoSite/GetTransactions",
data: {
"inventoryId": inventoryId,
"productId": productId
},
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
success: function (result) {
// notify the data source that the request succeeded
options.success(result);
misc.SelectFirstRowInGrid(self._gridTransactionsSelectorId);
},
error: function (jqXHR, textStatus, errorThrown) {
displayAjaxError(jqXHR, textStatus, errorThrown);
// notify the data source that the request failed
options.error(jqXHR);
},
type: 'POST'
});
}
},
pageSize: 100
}
});
}
}
` $(this._gridTransactionsSelectorId).kendoGrid({
allowCopy: true,
resizable: true,
reorderable: true,
columnMenu: true,
scrollable: true,
selectable: "row",
persistSelection: true,
navigatable: true,
sortable: true,
filterable: {
mode: "menu"
},
pageable: {
pageSizes: [100, 200, 300, "all"],
numeric: false
},
height: window.innerHeight - 200,
columns: [
{
field: "OrderType",
title: userStore.translatedString("frmPurchaseOrder.OrderType"),
width: 120
},
{
field: "DocumentNo",
title: userStore.translatedString("frmCreatePurchaseOrders.DocumentNo"),
width: 130,
},
{
field: "ActorNo",
title: userStore.translatedString("Common.ActorNo"),
width: 120
},
{
field: "Actor",
title: userStore.translatedString("Common.Actor"),
width: 120,
},
{
field: "TransactionDate",
title: userStore.translatedString("uctrlInventoryTrans.TransactionDate"),
width: 125,
attributes: {
style: 'text-align: right;'
},
format: "{0:yyyy-MM-dd}"
},
{
field: "Quantity",
title: userStore.translatedString("Common.Quantity"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
},
{
field: "QtyAfterTransactions",
title: userStore.translatedString("Common.QtyAfterTransactions"),
width: 120,
attributes: {
style: 'text-align: right;'
},
format: "{0:n2}"
}
],

Sencha Ext JS - how to refresh the Tabs after date picking?

I have MVC app, it's a Tab Panel containing few Tabs with a chart on each, there is also a Date Picker with Refresh button, and a Combo box to choose which data source is being used for the 'Date Range'.
The app currently loads the charts with all available data but the purpose is to select 1 of 3 available data sources, select a date range and refresh every chart tab by clicking a button, how do I do it?
Fiddle sample

Something like this:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 800,
width: 800,
layout: 'border',
defaults: {
collapsible: false,
split: true,
},
items: [{
title: 'PanelCenter',
xtype: 'tabpanel',
region: 'center',
itemId: 'centerPanel',
bodyPadding: 10,
activeTab: 0,
items: [{
title: "Tab1",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 7,
}, {
name: 'metric three',
value: 5,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab2",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 3,
}, {
name: 'metric two',
value: 5,
}, {
name: 'metric three',
value: 10,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab3",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 3,
}, {
name: 'metric three',
value: 9,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}]
}, {
xtype: 'form',
title: 'PanelTop',
layout: {
type: 'hbox',
},
region: 'north',
border: false,
bodyPadding: 10,
height: '100',
width: '100%',
margin: '0 0 5 0',
region: 'north',
items: [{
xtype: 'combo',
name: 'data_type',
itemId: 'dataTypeSelect',
emptyText: 'Select date type',
displayField: 'source',
store: {
fields: ['code', 'source'],
data: [{
code: 'created',
source: 'Sales date'
}, {
code: 'invoice',
source: 'Invoice date'
}, {
code: 'bookIn',
source: 'Order date'
}]
},
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateFromSearchField',
fieldLabel: 'From',
labelAlign: 'right',
name: 'from_date',
format: 'd/m/Y',
maxValue: new Date(),
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateToSearchField',
fieldLabel: 'To',
labelAlign: 'right',
name: 'to_date',
format: 'd/m/Y',
maxValue: new Date(),
value: new Date(),
padding: '0 30 0 0',
allowBlank: false
}, {
xtype: 'button',
itemId: 'refreshButton',
region: 'center',
text: 'Refresh',
formBind: true,
handler: function () {
const formData = this.up('panel').getValues();
if (
formData.data_type && formData.from_date && formData.to_date
) {
const tabPanel = Ext.ComponentQuery.query('tabpanel#centerPanel')[0];
const cartesianCharts = tabPanel.query('cartesian');
Ext.Array.each(cartesianCharts, function (cartesianChart) {
cartesianChart.getStore().load({
params: formData,
callback: function (records, operation, success) {
},
scope: this
});;
}, this);
}
}
}],
}]
});

how to filter record from jqGrid using html dropdown using id

i am using jqgrid and i am to filter record from combo data is loaded from database .enter image description here
Screen 1
Controler
public JsonResult Getlist(int id,int LstatusId, bool AllDate,string DateFrom,string DateTo)
{
List<leadMaster> lmasterRecords = new List<leadMaster>();
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("SP_leadMasterDetail", con))
{
if (clsCommon._UserType == "A")
cmd.Parameters.AddWithValue("#AgentID", id);
else
cmd.Parameters.AddWithValue("#AgentID", clsCommon._AgentID);
cmd.Parameters.AddWithValue("#LeadStatusID",LstatusId);
cmd.Parameters.AddWithValue("#AllDates",AllDate);
cmd.Parameters.AddWithValue("#DateFrom",DateFrom);
cmd.Parameters.AddWithValue("#DateTo",DateTo);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
lmasterRecords.Add(
new leadMaster
{
RecordID = Convert.ToInt64(reader.GetValue(0)),
Name = reader.GetString(1),
CityName = reader.GetString(2),
CountryName=reader.GetString(3),
Address=reader.GetString(4),
PhoneNo=reader.GetString(5),
MobileNo=reader.GetString(6),
Email=reader.GetString(7),
EnteryDate = reader.GetDateTime(8).ToShortDateString(),
ProfType=reader.GetString(9),
LeadStatus=reader.GetString(10),
ProjName=reader.GetString(11),
UnitTypeName=reader.GetString(12),
Description=reader.GetString(13),
User_name=reader.GetString(14),
IsClose=reader.GetString(15)
}
);
}
}
}
return Json(lmasterRecords, JsonRequestBehavior.AllowGet);
}
DropDown boxs
Filter By Agent:
#Html.DropDownList("var1", null, new { #class = "form-control col-sm-3 " })
JqGrid Function
script>
$.noConflict();
jQuery(document).ready(function ($) {
$("#jqGrid").jqGrid({
url: '#Url.Action("Getlist")',
datatype: 'json',
mtype: 'Get',
page: 1,
postData: { id: $("#var1").val(), LstatusId: $("#var2").val(), AllDate: $("#AllData").attr("checked") ? true : false, DateFrom: $("#cmbSDate").val(), DateTo: $("#cmbTDate").val() },
colModel: [
{ label:'RecordID', hidden: true, name: 'RecordID', key: true, width: 75 },
{ label: 'Name', name: 'Name', width: 200 },
{ label: 'CityName', name: 'CityName', width: 110 },
{ label: 'CountryName', hidden: true, name: 'CountryName', width: 150 },
{ label: 'Address', hidden: true, name: 'Address', width: 150 },
{ label: 'PhoneNo', hidden: true, name: 'PhoneNo', key: true, width: 75 },
{ label: 'MobileNo', name: 'MobileNo', width: 110 },
{ label: 'Email', name: 'Email', width: 200 },
{ label: 'Fax', hidden: true, name: 'Fax', width: 150 },
{ label: 'LeadDate', name: 'EnteryDate', width: 100 },
{ label: 'ProfType', hidden: true, name: 'ProfType', width: 150 },
{ label: 'LeadStatus', name: 'LeadStatus', key: true, width: 150 },
{ label: 'Description', name: 'Description', width:110 },
{ label: 'UnitTypeName', name: 'UnitTypeName', width: 150 },
{ label: 'User_name', name: 'User_name', width: 150 },
{ label: 'IsClose', name: 'IsClose', width: 50}],
loadonce:true,
viewrecords: true,
width: 1050,
height: 350,
rowNum: 100,
rowList: [10, 20, 30,50,100,500],
pager: "#jqGridPager"
});
});
</script>

Kendo Grid Hierarchy (child) grid on click event

I want to add Hierarchy (child) grid on button click event. By default on grid load, there is a child grid. I want it to bind on button click.
var people = new kendo.data.DataSource({
data: {!Output},
batch: true,
schema: {
model: {
fields: {
carId: { type: "string" },
vehicleId: { type: "string", editable:false },
Percentage: { type: "number", editable:false },
Price: { type: "string", editable:false},
CarType: { type: "string", editable:false},
CarSize: { type: "string", editable:false},
CarPerCase: { type: "number", editable:false },
Family: { type: "string", editable:false},
ModelType: { type: "string", editable:false},
EPId: { type: "string" },
Tax: { type: "string" }
}
}
},
pageSize: 20,
sort: { field: "vehicleId", dir: "asc" }
});
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
pageable: true,
toolbar: [
"save",
"cancel",
{
name: "Add",
text: "Show Car Price",
click: function(e) {
return false;
}
},
{
name: "Delete",
text: "Hide Car Price",
click: function(e) {
return false;
}
}
],
columns:[
{
field: "carId",
title: "Car ID",
width: 150,
hidden:true
},
{
field: "vehicleId",
title: "Vehicle ID",
width: 100
},
{
field: "Percentage",
title: "Percentage",
width: 70
},
{
field: "Price",
title: "Price",
width: 250
},
{
field: "CarType",
title: "Car Type"
},
{
field: "CarSize",
title: "Car Size"
},
{
field: "CarPerCase",
title: "Car Per Case"
},
{
field: "Family",
title: "Family"
},
{
field: "ModelType",
title: "Model Type",
width: 100
},
{
field: "EPId",
title: "EP Id",
hidden: false
},
{
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}
],
editable:true,
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailInit: detailInit
});
// hierarchy grid
function detailInit(e) {
var detailRow = e.detailRow;
codeDetailData = e.data;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: e.data.ItemPrices.toJSON(),
editable:true,
navigatable: true,
scrollable: false,
sortable: true,
pageable: true,
columns: [
{
field: "Engine",
width: "200px",
editor: serviceItemAutoCompleteEditor
},
{
field: "TN",
title:"TN",
width: "110px"
},
{
field: "TaxApplied",
title:"Tax Applied"
},
{
field: "TaxChange",
title: "Tax Change",
width: "300px"
},
{
field: "StartDate",
title: "Start Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
},
{
field: "EndDate",
title: "End Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
}
]
});
}
Now the detailInit: detailInit configuration is set on load. I want that load without detailInit (responsible for child grid), and bind this setting on button click. Is it possible?

You will have to add a detail template to tell the grid there is going to be a detailinit grid
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
toolbar: [
"save",
"cancel", {
name: "Add",
text: "Show Car Price",
click: function (e) {
return false;
}
}, {
name: "Delete",
text: "Hide Car Price",
click: function (e) {
return false;
}
}],
columns: [{
field: "carId",
title: "Car ID",
width: 150,
hidden: true
}, {
field: "vehicleId",
title: "Vehicle ID",
width: 100
}, {
field: "Percentage",
title: "Percentage",
width: 70
}, {
field: "Price",
title: "Price",
width: 100
}, {
field: "CarType",
title: "Car Type"
}, {
field: "CarSize",
title: "Car Size"
}, {
field: "CarPerCase",
title: "Car Per Case"
}, {
field: "Family",
title: "Family"
}, {
field: "ModelType",
title: "Model Type",
width: 100
}, {
field: "EPId",
title: "EP Id",
hidden: false
}, {
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}],
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailTemplate: 'Item Prices: <div class="grid"></div>',
dataBound:function(e){
$(".k-hierarchy-cell").hide();
$(".k-hierarchy-col").hide();
}
});
then bind the detail event to the grid using a click button
$("#testbtn").click(function (e) {
$(".k-hierarchy-cell").show();
$(".k-hierarchy-col").show();
var grid = $("#grid").data("kendoGrid");
grid.unbind("detailInit");
grid.bind("detailInit", grid_detailInit);
grid.refresh();
});
Here is a Jsfiddle Example http://jsfiddle.net/ecotz69h/7/

Paging and filtering not working in extension js

In Extension grid paging and filtering is not working..please help me out.In this code if i replace store with simplestore and ds.load() with ds.loadData(mydata) then simple grid is working but paging is not working.but i have seen some samples according to these i have converted my code..but after that its not working at all.
Ext.onReady(function () {
var myData = [
['Apple', 29.89, 0.24, 0.81, '9/1 12:00am'],
['Ext', 83.81, 0.28, 0.34, '9/12 12:00am'],
['Google', 71.72, 0.02, 0.03, '10/1 12:00am'],
['Microsoft', 52.55, 0.01, 0.02, '7/4 12:00am'],
['Yahoo!', 29.01, 0.42, 1.47, '5/22 12:00am']
];
var ds = new Ext.data.Store({
pageSize: 2,
proxy: {
type: 'pagingmemory',
reader: { type: 'array' }
},
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
]
});
var colModel = new Ext.grid.ColumnModel([
{ header: "Company", width: 120, sortable: true, dataIndex: 'company' },
{ header: "Price", width: 90, sortable: true, dataIndex: 'price' },
{ header: "Change", width: 90, sortable: true, dataIndex: 'change' },
{ header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange' },
{ header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
]);
var grid = new Ext.grid.GridPanel({ frame: true, height: 200, width: 600,ds: ds, cm: colModel, bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 2,
displayInfo: true
})
});
ds.load();
grid.render(Ext.getBody());
});

Resources