Develop Reference

KO Grid - repeating value

I have an ASP.Net MVC site with a KOGrid in one of my views. This pulls data by making an Ajax call to a controller which then selects from SQL Server via EF. My data table can be seen below:
I have the following column definition for my KO Grid:
self.columnDefs = [
{ width: 50, field: 'workflowTask_WorkflowTaskId', displayName: 'Id' },
{ width: 150, field: 'Timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
{ width: 100, field: 'currentState', displayName: 'Crnt State' },
{ width: 500, field: 'note', displayName: 'Notes' },
{ width: 100, field: 'previousState', displayName: 'Prev State' },
{ width: 100, field: 'currentUser', displayName: 'Crnt User', sortable: false },
{ width: 100, field: 'amendedByUser', displayName: 'Amnd By', sortable: false },
{ width: 100, field: 'previousUser', displayName: 'Prev User', sortable: false }
];
I have the following grid options:
self.gridOptions = {
data: self.recs,
columnDefs: self.columnDefs,
autogenerateColumns: false,
showGroupPanel: true,
canSelectRows: false,
showFilter: true,
filterOptions: self.filterOptions,
enablePaging: true,
pagingOptions: self.pagingOptions,
sortInfo: self.sortInfo,
rowHeight: 35
};
I have an observable array to hold the data to be displayed in the kogrid:
self.recs = ko.observableArray([]);
This is populated by the following javascript function:
self.get = function () {
$loadingIndicator.show();
$.ajax({
url: BASE_URL + 'TaskHistory/GetRecords',
type: 'get',
data: {
'page': self.pagingOptions.currentPage(),
'pageSize': self.pagingOptions.pageSize(),
'filter': self.filterOptions.filterText == undefined ? '' : self.filterOptions.filterText(),
'sort': self.sortInfo().column.field + ' ' + self.sortInfo().direction
},
contentType: 'application/json; charset=utf-8',
success: function (data) {
self.pagingOptions.totalServerItems(data.RecCount);
var recsArray = [];
$.each(data.PageOfRecords, function (key, value) {
recsArray.push(
new Task(value.WorkflowTaskHistoryId,
value.Timestamp,
value.PreviousState,
value.CurrentState,
value.AmendedByUser,
value.Note,
value.PreviousUser,
value.CurrentUser,
value.WorkflowTask_WorkflowTaskId));
});
self.recs(recsArray);
}
});
$loadingIndicator.hide();
};
As can be seen in the following screen grab from Chrome Developer tools, this observable is correctly populated:
My problem is - when displayed, the date shown are all for the current machine datetime - not related to the data retrieved from the ajax call, as shown below:
Can anyone see where I went wrong please?

You have a typo in your code, in your column def you have 'Timestamp' with a capital T but your property is called timestamp.
So the fix is very simple:
{ width: 150, field: 'timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
Why the strange behavior:
the KoGrid does not check that you provide a valid field name and in this case it passes undefined to the cellFilter function as the data parameter
if you call moment function without a valid date it defaults to the current time, that is why all your columns show the same time

ExtJS 3.0.0: GridPanel in a Window with an ArrayStore not rendering any data

I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!

Because I'm an idiot... I used an ArrayStore instead of a JsonStore!

jsGrid edit payment amount

I am using jsGrid JQuery plugin to display and edit payments. Although it is an excellent option I am unable to use the build-in fields to edit a 'Payment Amount'. If I use the 'number' type, I am not able to enter digits after the decimal place. If I use the 'text' type I can enter non-numeric values.
Here is my code so far
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
editing: true,
paging: true,
autoload: true,
loadIndication: true,
loadIndicationDelay: 500,
loadMessage: "Please, wait...",
loadShading: true,
controller: {
loadData: function () {
return $.ajax({
type: "GET",
url: AJAX_URL_GET_CALCULATED_AFFECTED_PAYMENTS,
data: { 'startDate': startDate, 'endDate': endDate },
dataType: "json",
cache: false,
});
},
},
fields: [
{ name: "PaymentDate", title: "Payment Date", type: "text", width: 150, editing: false, },
{ name: "PaymentEndDate", title: "Payment End Date", type: "text", width: 150, editing: false, },
{ name: "PaymentStatusDisplay", title: "Payment Status", type: "text", width: 150, align: "center", editing: false, },
{
name: "PaymentAmount", title: "Payment Amount", type: "number", width: 100, align: "center", editing: true,
itemTemplate: function(value) {
return "$" + value;
},
},
{ type: "control", deleteButton: false, editButton: true, editButtonTooltip: "Edit Amount", }
]
});
Has anyone used this plugin got an example or managed to create a custom field type or use the field templates to edit a field in jsGrid to only allow currency values (number, comma, decimals)
Thank you in advance.

You can define your custom field like the following:
function MoneyField(config) {
jsGrid.NumberField.call(this, config);
}
MoneyField.prototype = new jsGrid.NumberField({
itemTemplate: function(value) {
return "$" + value.toFixed(2);
}
filterValue: function() {
return parseFloat(this.filterControl.val() || 0);
},
insertValue: function() {
return parseFloat(this.insertControl.val() || 0);
},
editValue: function() {
return parseFloat(this.editControl.val() || 0);
}
});
jsGrid.fields.money = MoneyField;
Now you can use it in field specifing type="money"

Here's how you can format the value for display. This will would print the number in the following format $1,000.00.
Declare the function:
function formatNumberForDisplay(numberToFormat) {
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
digits: 2,
});
return formatter.format(numberToFormat);
}
and then just use it in the itemTemplate method:
itemTemplate: function(value) {
return formatNumberForDisplay(value) ;
},

How to add filter in EnhancedGrid

I want to add filter in dojox.grid.EnhancedGrid and my grid is created declaratively. I added filter in data-dojo-props attribute.
My code :
<div id="myGrid"
data-dojo-type="dojox.grid.EnhancedGrid"
data-dojo-props="plugins:{indirectSelection: true,nestedSorting: true,
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "songs"
} },
store: mystore,
structure: [{
defaultCell: { width: 8, editable: false, type: dojox.grid.cells._Widget, styles: 'text-align: left;' },
rows: [
{ field: 'RN', name: '${RN}', width: '32%',formatter : function(val, rowIdx, cell){
cell.customClasses.push('anchorLookAlike');
return val;
}
},
{ field: 'DC', name: '${DC}', width: '10%' },
{ field: 'PN', name: '${PN}', width: '10%' },
{ field: 'MD', name: '${MD}', width: '10%' },
{ field: 'RD', name: '${RD}', width: '10%' },
{ field: 'UR', name: '${UR}', width: '10%' },
{ field: 'DL', name: '${DL}', width: '10%',formatter: function(datum){
if(datum){
return dojo.date.locale.format(new Date(datum), {selector: 'date', formatLength: 'long'});
}
return '...';
}
},
{field: 'RP', name: '', hidden: true}
]
}]"></div>
When I try to run this code am facing this error,
dojo/parser::parse() error
Error: SyntaxError: syntax error in data-dojo-props='plugins:{indirectSelection: true,nestedSorting: true, filter: { closeFilterbarButton: true, ruleCount: 5, itemsName:
how to add filter correctly? can any help me

You need to wrap songs in single quotes, not double quotes. You are already nested within double quotes as part of data-dojo-props.

How do I add qtip to kendo grid for ellipsed words?

Below is how I structured my kendo grid:
CreateListGrid: function () {
$("#PlanListGrid").kendoGrid({
dataSource: {
transport: {
read:{
url: BrowserSide.Url.getFullUrl("PlanningList/ReadPlans"),
type: "POST",
data: {
searchVal: $('#category').val(),
status: $('#ListFilterType').val(),
},
},
dataType: "json",
},
pageSize: 10,
schema: {
data: "Data",
total: "Total",
model: {
fields: {
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false },
Id: { editable: false }
}
},
errors: "Errors"
},
},
toolbar: kendo.template($("#template").html()),
selectable: "row",
//groupable: true,
sortable: true,
//scrollable:true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: 160,
template: "#= SearchItems_Highlight(FirstName)#"
}, {
field: "LastName",
title: "Last Name",
width: 160,
template: "#= SearchItems_Highlight(LastName)#"
},
{
field: "Title",
title: "Plan Title",
width: 180,
template: "#= SearchItems_Highlight(Title)#"
},
{
field: "Id",
title: "Id",
width: 0
},
]
});
var grid = $("#PlanListGrid").data("kendoGrid");
grid.hideColumn("Id");
$("#PlanListGrid > .k-grid-header").css({ "padding-right": "0px;" });
}
I have the text fields in my kendo grid ellipsed if they are too long for the column width. Now I am having trouble adding a qtip to the ellipsed words in my kendo grid.
EDIT:
Because I'm lazy, I found a similar example online using kendo grid. I added the style for .k-grid td which is similar to what I have now that ellipses the text if it's too long. My question now is how do I add a jquery qtip to the ellipsed text? Rather where in the code should I add the qtip?
Here's the fiddle

You can apply qtip after grid creation.
function applyTooltip() {
$(".k-grid-content tbody td").each(function (index, element) {
var td = $(element);
td.qtip({
content: td.text(),
//hide: { when: 'unfocus', delay: 100 },
style: {
border: {
width: 1,
radius: 10
},
padding: 2,
textAlign: 'center',
tip: true,
name: 'cream'
},
position: {
adjust: {
screen: true
}
}
});
});
}
updated fiddle: http://jsfiddle.net/Sbb5Z/1610/
You can restrict qTip to columns who have data exceed a certain number of characters (ellipsis)
fiddle: http://jsfiddle.net/Sbb5Z/1611/