jQWidgets Forums
Forum Replies Created
-
Author
-
October 10, 2017 at 2:53 am in reply to: Add Filtering to Date Column – as automatic filtering no longer works Add Filtering to Date Column – as automatic filtering no longer works #96578
Hi Peter,
I have finally worked it out and I thought it would be nice to add my code here so that others could benefit.
I have 2 scenarios, I formatted a number field and I formatted a date field using the cell renderer.
Then when the automatic filtering took place, it was looking only at the user’s filter value (based on the formatted data) and comparing it with the real data cell value.
I therefore had to intercept the filtering and add my logic.
So here goes
for the number field – called Size, these are my cell rendering functions –
var cellrendererFileSize = function (row, column, value) {
var newValue = displayFileSize(value);
return ‘<div style=”margin-top: 5px; text-align: right; margin-top: 5px; padding-right: 12px;” > ‘ + newValue + ‘ </div>’;
}; // end of cellrendererFileSize
var displayFileSize = function (cellValue): string {
// this function converts the cell Value being in bytes
// to a string display that is either in Bytes, KB, or MBvar intValue = parseInt(cellValue);
var newValue = “”;
var result;if (intValue < 1024) {
newValue = intValue + ” Bytes”;
} else if (intValue < 1024000) {
result = (intValue / 1024.00).toFixed(2);newValue = result + “KB”;
} else {result = (intValue / (1024.00 * 1024.00)).toFixed(2);
newValue = result + “MB”;
}return newValue;
}; // end of displayFileSize
where the columns are shown here –
const columns: jqwidgets.GridColumn[] = [
//{ text: “Blob “, datafield: “BlobId”, width: “20%” },
{ text: “Name”, datafield: “Name”, width: “40%”, renderer: columnsrendererLeftPadding, cellsrenderer: cellsrendererLeftPadding },
{ text: “Ext”, datafield: “Ext”, width: “5%”, renderer: columnsrendererLeftPadding, cellsrenderer: cellsrendererLeftPadding },
{
text: ‘Date Created (‘ + this.page.timeZoneAbbr + ‘)’, width: “16%”, datafield: ‘CreateTime’,
filtertype: ‘range’,
cellsformat: ‘yyyy-MM-dd HH:mm’,
renderer: columnsrendererLeftPadding, // this renders the columns
cellsrenderer: cellrendererDateTimeOffset // this renders the cell value
},
{
text: “Size as Bytes”, datafield: “Size”,
width: “12%”,
renderer: columnsrendererRight, // this renders the columns
cellsrenderer: cellrendererFileSize // this renders the cell value
},I then created a filtering function, which is linked in the grid settings –
//initialise
const settings: jqwidgets.GridOptions = {
source: this.createDataAdapter(),
width: “100%”,
height: 705,
theme: “virsaenoheader”,
autoshowloadelement: false,
enabletooltips: true,
columns: columns,
columnsresize: true,
pagermode: “simple”,
pagesize: 20,
pageable: true,
groupable: true,
groupsexpandedbydefault: true,
filterable: true,
showfilterrow: true,
sortable: true,
sorttogglestates: “1”,
filter: filterfunction};
return jqwidgets.createInstance(grid.selector, “jqxGrid”, settings);
And here is the filter function
The filter function has multiple sub filters. For the date we have 2 filters, the top date range and the bottom date range.
For the size column we only have one sub filter – being the equality operator, therefore we just check whether the value exists.The CellValue is the real data in the cell, before we have applied any formatting etc. I have therefore applied the formatting to it so that it is identical to what the user sees in the grid.
The FilterValue is the value that the user has typed into the filter box. I can then compare the FilterValue with the CellValue after I have transformed it to ‘DisplayValue’
Filter the Size ColumnBelow is the code for the Size data field
var filterfunction = function (cellValue, rowData, dataField, filterGroup, defaultFilterResult)
{
debugger;if (dataField === “Size”) {
// Change the cell value to the display value using the same function
// as I used to change the display of the cell value in the grid
var displayValue = displayFileSize(cellValue).toLowerCase();var sizeFilters= filterGroup.getfilters();
for (var j = 0; j < sizeFilters.length; j++) {
var theUsersFilterValue = sizeFilters[j].value.toLowerCase();
// we need to see whether the display value contains the filter value
var exists = displayValue.indexOf(theUsersFilterValue);if (exists > -1) {
return true;
}}
return false;}
return true;
};
Filter the Date Column
This was trickier as I converted the user’s Filter value to UTC using function
var filterUtCvalue = convertToUtcTime(filterValue);
There were then 2 sub filters, was the date greater than the user’s filterValue and was the date less than the user’s filter value.
IF any of these conditions was false, it would return false and not bother checking the next sub-filter.
IF the value was true, I then checked ‘result’ and returned it. The ‘result’ could only ever be true, therefore I don’t even need to have it, I could just return true, because it would only get there if there had been no false values.
See all the filter function code –
var filterfunction = function (cellValue, rowData, dataField, filterGroup, defaultFilterResult)
{
debugger;// implements a custom filter for the “name” field.
if (dataField === “CreateTime”) {debugger;
var dateFilters = filterGroup.getfilters();
// We must have true for ALL filters
var result = false;for (var i = 0; i < dateFilters.length; i++) {
var filter = dateFilters[i];
var filterValue = dateFilters[i].value;
var filterCondition = filter.condition;
var filterType = filter.type;// Change the filter value to UTC like the cell value
var filterUtCvalue = convertToUtcTime(filterValue);var dateValueOfCell = new Date(cellValue.getTime());
if (filterCondition === “GREATER_THAN_OR_EQUAL”) {
if (cellValue >= filterUtCvalue) {
debugger;
result = true;
} else {return false;
}
}
if (filterCondition === “LESS_THAN_OR_EQUAL”) {
if (cellValue <= filterUtCvalue) {
debugger;
result = true;
} else {
return false;
}}
if (i === dateFilters.length – 1) {
// Only return the entire result after all the filters have finished
// IF the the filter condition is false for any value, it will return false
// and never search the remaining filters
// therefore in theory you don’t need the ‘result’ variable, just return true
return result;}
}
return false;
}return true;
};
I hope this helps someone else.
Kind regards,
Polly
October 5, 2017 at 7:15 pm in reply to: Add Filtering to Date Column – as automatic filtering no longer works Add Filtering to Date Column – as automatic filtering no longer works #96532Hi Peter,
thank you for that explanation. That makes sense.
Basically what I am doing is converting the date obtained from the Cell Value (which happens to be UTC date) to the user’s local date and then converting that to a string for display purposes. Then when the user uses the automatic date filtering, the results are as you say not what we would expect, in fact, it shows no records at all.
Please would you let me know what I must do to get the filtering for the date column to work so that it filters by the new string date displayed rather than the cell value.
I appreciate your help.
Thank you.
Regards,
Polly
October 4, 2017 at 7:17 pm in reply to: Add Filtering to Date Column – as automatic filtering no longer works Add Filtering to Date Column – as automatic filtering no longer works #96512Hi Peter,
thank you for your reply. I probably did not explain myself clearly.I have used the cellrendering to render the date column.
After rendering the automatic filtering for the date column no longer works.
Below is an example of my code.
I really appreciate your help.
Thank you.
Kind regards,
Polly
1/ The Grid Source – showing CreateTime as a date
const source: jqwidgets.GridSource = {
datatype: “json”,
datafields: [{ name: “CreateTime”, type: “date”, format: “yyyy-MM-dd” },
],
id: “BlobId”,
url: theUrl,
data: {
entityId: this.page.entityId,
folderId: this.page.selectedFolderId,}
};2/ The Grid Columns – showing CreateTime with cellrendering applied
const columns: jqwidgets.GridColumn[] = [
{ text: ‘Date Created’, width: “33%”, datafield: ‘CreateTime’, filtertype: ‘range’, cellsformat: ‘yyyy-MM-dd HH:mm’, renderer: columnsrendererLeftPadding, cellsrenderer: cellrendererDateTimeOffset },
];
3/ The Cellrender function for the grid column above
var cellrendererDateTimeOffset = function (row, column, value) {
var theOffset = parseInt(FilesAndFoldersGrid._offset);
var newDate = new Date(value.getTime() + (theOffset * 60 * 1000));
// format the new date
var newYear = newDate.getFullYear();var newMonth = newDate.getMonth() + 1;
var newMonthStr = displayTwoDigits(newMonth);var newDay = newDate.getDate();
var newDayStr = displayTwoDigits(newDay);var newHours = newDate.getHours();
var newHoursStr = displayTwoDigits(newHours);var newMinutes = newDate.getMinutes();
var newMinutesStr = displayTwoDigits(newMinutes);const newDateString = newYear + “-” + newMonthStr + “-” + newDayStr + ” ” + newHoursStr + “:” + newMinutesStr;
return ‘<div style=”margin-top: 5px; padding-left: 10px;” > ‘ + newDateString + ‘ </div>’;
// return ‘<div style=”margin-top: 5px; padding-left: 10px;” > ‘ + newDate + ‘ </div>’;
}; // end of cellrendererDateTimeOffset
4/ The Grid settings – showing the automatic filtering set up
const settings: jqwidgets.GridOptions = {
source: this.createDataAdapter(),
width: “100%”,
height: 705,columns: columns,
columnsresize: true,
pagermode: “simple”,
pagesize: 20,
pageable: true,
filterable: true,
showfilterrow: true,
sortable: true,
sorttogglestates: “1”,};
return jqwidgets.createInstance(grid.selector, “jqxGrid”, settings);
August 22, 2017 at 12:32 am in reply to: jqxMenu – disable menu items, but show all sub menus jqxMenu – disable menu items, but show all sub menus #95568Hi Hristo, thank you for your reply. Yes the Id does work if I put it on the <li>. However, is it possible to add a class to a jqxWidget Menu item on the fly after it has been created? I see that the menu items have a list of auto generated classes, but I would need to access this and add my class at the end. Do you have any suggestions how this could be achieved programmatically? Thank you for your help. Kind regards, Polly</li>
August 19, 2017 at 4:53 am in reply to: jqxMenu – disable menu items, but show all sub menus jqxMenu – disable menu items, but show all sub menus #95550Hi Hristo,
Thank you for your reply and the suggestion.
I would like to show which items are set as disabled, and I thought I would do this by attaching a CSS class name (e.g. isDisabled) to the particular list item that I wanted to set as disabled. This class would set the menu list item with a different background colour.
But I see that this class name is ignored when the jqxMenu is created, which uses its own classes. Is there any way you would suggest that I iterate through all the menu items and add my own isDisabled CSS class to your classes?
That way, when the user views the menu, they could instantly see which menu items are disabled, as these would have a different colour. Then when the user clicked the menu item I would use your itemClick event that you suggested, to make sure that the href was disabled.
Can you suggest how I can add my CSS class to just the list items I wanted to show as disabled?
Thank you for your time.
Kind regards,
Polly
August 17, 2017 at 8:06 pm in reply to: jqxMenu – disable menu items, but show all sub menus jqxMenu – disable menu items, but show all sub menus #95530Hi Hristo,
thank you for your reply and the link.
What I would like to do is to show all the sub menus even when the top menu item is disabled.
The present behaviour disables the top menu item and hides all the sub-menus.
I look forward to your reply
Kind regards,
Polly
-
AuthorPosts