Is there a way in jQWidgets Grid to know if a certain grid has an aggregated row or not?
I have a problem in the following code :
var temp = $(gridId).jqxGrid('getcolumnaggregateddata', columnFields[i], ['sum']);
I want to check first if there's an aggregate in the grid before I call the above code.
check whether your jqxgrid had 'showaggregates' property with true value or not
if( $("#" + gridId).jqxGrid('showaggregates') ) {
// there is...
}
else {
// there is not...
}
Related
I'm trying to use Bootstrap-Table to show my data and I want to filter rows that a specified cell is empty and I don't want them to show up.
$('#tableId').bootstrapTable('refreshOptions', {
filterOptions: {
filterAlgorithm: "not"
}
});
$('##tableId').bootstrapTable('filterBy', {"specifiedCell":""});
Sadly filterAlgorithm does not support not at code above.
What should I write in front of filterAlgorithm to use a custom filter?
I didn't see any good explanation about it in internet but by testing I understand that custom filter template is like this:
$('#tableId').bootstrapTable('refreshOptions', {
filterOptions: {
filterAlgorithm: function (row, filter) {
if(row['specifiedCell'] != filter['specifiedCell']){ //check row or row[cell] condition by `filter`
return true;//it will the `row` will display.
} else {
return false;//it wont show the `row`
}
}
}
});
$('##ViewBag.dynamicData["tableId"]').bootstrapTable('filterBy', {
"specifiedCell":""
});
In the code above I checked specified cell in the row with filter that contains values that shouldn't be on the table so by returning true on not being in filter I made custom not.
Is it possible to set the background color for a row in slickgrid (based on data values) AND use pagination? For angular-slickgrid package.
I used getItemMetadata as suggested multiple other (old) posts - example SlickGrid: How to loop through each row and set color based on the condition?.
This code:
metadata(old_metadata_provider) {
return function(row) {
var item = this.getItem(row);
var ret = (old_metadata_provider(row) || {});
if (item) {
ret.cssClasses = (ret.cssClasses || '');
if ("attribute" in item) {
return { cssClasses: 'redRow' }; //redRow is in styles.css
}
}
return ret;
}
}
and the call is:
this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);
It works correctly. However, when I turn pagination on, the color does not work as expected. I read that SlickGrid re-uses the same row elements when scrolling or paginating and will overwrite the styles associated with them. Is there another way to do it? Thanks for any help on this.
I tried adding the following code, after reading suggestion from ghiscoding, but the colors are still not working when pagination is enabled.
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.dataViewObj = angularGrid.dataView;
this.gridObj = angularGrid.slickGrid;
this.checkRowBackgroundColor(); //where I call the metadata function from my previous post, if the dataView object is defined.
//I added this code:
var self = this;
this.dataViewObj.onPagingInfoChanged.subscribe(function (e, dataView, grid) {
self.gridObj.invalidate();
self.gridObj.render();
});
}
Try this approach:
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.dataViewObj = angularGrid.dataView;
this.gridObj = angularGrid.slickGrid;
// check color change logic for the first time page load
this.checkRowBackgroundColor();
// use arrow function so that 'this' works properly
this.dataViewObj.onPagingInfoChanged.subscribe((e, dataView, grid) => {
// check your color change logic every time Paging Info Changed
this.checkRowBackgroundColor();
});
}
Inside your checkRowBackgroundColor:
checkRowBackgroundColor() {
// ... any of your logic
// get metadata
this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);
// rerender the grid after getting new metadata
this.gridObj.invalidate();
this.gridObj.render();
}
Your problem should be solved now. As I have not tested on my local machine, I can not give guarantee. You can checkout original documentation of angular-slickgrid about this specific topic here: Dynamically Add CSS Classes to Item Rows
I have a use-case where I need to programmatically add/remove the onClick event associated with a panel.
I have tried the following solution but receive a cijCell.addEventListener is not a function error.
function cij_enabled(){
var cijCell = app.pages.Home.descendants.cellFour;
var index = cijCell.styles.indexOf('disabled-card');
if (Report.riskOfLoss === 'High') {
cijCell.styles.splice(index, 1);
cijCell.addEventListener("click", function() {
app.popups.Customer.visible = true;
});
} else {
if (index === -1){
cijCell.styles.push('disabled-card');
cijCell.removeEventListener("click", function() {
app.popups.Customer.visible = true;
});
}
}
}
How can I achieve the desired outcome? Is adding eventlisteners possible in this fashion through app maker?
You can definitely do so and you got it almost right. The only thing you need to understand is that the appmaker widget is not a native html element hence the error:
cijCell.addEventListener is not a function
Fortunately, AppMaker has a way of getting the native html elements associated to a widget. You need to use the getElement() method and then you can use the add/remove event listeners methods. So you should change your code from cijCell.addEventListener... to cijCell.getElement().addEventListener...
Reference: https://developers.google.com/appmaker/scripting/api/widgets#Panel
I have the following helper defined:
$.views.helpers({
total: function(lines) {
var total = 0;
for (var i = 0; i < lines.length; i++) {
total += lines[i].price * lines[i].quantity;
}
return total;
}
});
Then I have have the following code to data link my model to my view:
var model = {
lines: []
};
$("#lines").link(true, model);
Finally within the view I have the following:
<span data-link="~total(lines)"></span>
However whenever I observably add or remove items from the array it doesn't update the total. I read that you could pass in lines.length into the function and indeed it updated the total each time I added or removed an item. But when I observably updated the quantity property against any of the lines the total did not update.
I'd appreciate it if someone could show me how to do this.
Thanks
Yes, as you found with https://github.com/BorisMoore/jsviews/issues/280, there is not currently a declarative syntax for depending on "All". Probably after V1.0 that feature will be added - along the lines of total.depends = "lines**"; or total.depends = "lines*.*"; for a helper: function total(...)...
Meantime you can use a programmatic approach - which is still very easy. Just trigger a refresh by adding:
$.observable(model.lines).observeAll(function() {
$("#lines").link(true, model);
})
or refresh just the 'total' span by writing:
<span id="total" data-link="~total(lines)"></span>
and
$.observable(model.lines).observeAll(function() {
$("#total").link(true, model);
})
See for example: http://jsfiddle.net/BorisMoore/wch601L9/
I've found the following issue which has a couple of suggested fixes:
https://github.com/BorisMoore/jsviews/issues/280
Unfortunately both are abit of a hack but I guess it will have to do for now.
I am beginning the process of moving away from the AjaxControlToolkit and toward jQuery. What I want to do is have one function that duplicates the functionality of the CollapsiblePanelExtender. For a particular set of hyperlink and div, the code looks like this:
$('#nameHyperLink').click(function() {
var div = $('#nameDiv');
var link = $('#nameHyperLink');
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show(400);
}
else {
link.text('Show Data');
div.hide(400);
}
});
What I really want to do is only have to write this function once, then use it for many (approx 40) instances throughout my website. Ideally what I want is this:
function showHidePanel(divID,linkID,showText,hideText){
var div = $(divID);
var link = $(linkID);
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show(400);
}
else {
link.text('Show Data');
div.hide(400);
}
});
I would then call this function from every HyperLink involved using OnClientClick.
Is there a way to do this?
Have you looked at the jquery accordian plugin?