In this example:
http://mleibman.github.io/SlickGrid/examples/example-grouping
You can group the rows by certain columns, but I would like the rows inside the groups to be indented. Is there a way I can add a class to the grouped rows or something? I can't seem to find a good way to do this.
I'm creating the grouping by doing:
function groupByDuration() {
dataView.setGrouping({
getter: "duration",
formatter: function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
}
});
}
I tried this Slickgrid grouping rows style
var myFormatter = function(row, cell, value, columnDef, dataContext) {
var groupings = this.getGrouping().length;
var indentation = groupings * 15 + 'px';
var spacer = '<span style="margin-left:' + indentation + '"></span>';
return spacer + value;
};
But my question is How do I bind this function with slickgrid's dataView so I can access the groupings as currently I am getting the error "Object doesn't support property or method 'getGrouping'"
Thanks
Thanks!
I'm pretty sure you are trying to shift left some of the column values or the header of the group based on the number of the grouped up rows.
I've modified the grouping-example groupByDuration formatter to try and show this off. Here is the link to the jsFiddle.
If I haven't gotten to the root of what you are trying to accomplish, please try and update the jsFiddle further to illustrate what exactly you are trying to do.
Related
I have the following setting in reporting to display the total of stacked column:
I also tried, [[total]], "[[total]]" etc..
But I get:
Which is the same value as the last column.
What is the correct way to display the total value of the stacked columns ?
EDIT1:
Tried the first proposed solution and it gave the following:
where all labels are formatted with the same text.
For achieve this result you need:
1) Add "[[total]]" in "Total Text" field, in value axis advanced settings
2) Next you should override "Label Function" in Graph settings.
The code of function
/**
* Return label text
*/
function(graphDataItem, formattedText) {
var total = graphDataItem.values.total;
var formattedTotal = AmCharts.formatNumber(total, {
precision: 2,
decimalSeparator: ".",
thousandsSeparator: " "
}, 2);
return formattedTotal;
}
Result:
Hi im relatively new to c# code and i was wondering if there is any way to get the amount of columns and rows in a grid and store that amount in a variable
Something like:
var columnamount = grid.columnamount;
But i could not find anything that works
Thanks
You can use the following code to get a count of the columns and rows directly via the ColumnDefinitions and RowDefinitions properties. No need to enumerate the children of the grid because you may not have views in every column/row.
var columnCount = grid.ColumnDefintions.Count;
var rowCount = grid.RowDefinitions.Count;
For reference the documentation.
You might be able to do it this way, purely based on what I see in the docs:
var countColumns = grid.Children.Where( c => c.Column).Max();
var countRows = grid.Children.Where( c => c.Row).Max();
But I'm not sure if you can access Row anf Column properties on the child element.
This is not the best way to check, I guess, but it's working (same thing for columns):
EDIT: nope, for columns it doesn't work
int GetRowsCount(Grid grid)
{
var item = grid.Children.FirstOrDefault();
return item != null ? Grid.GetRow(item) + 1 : 0;
}
Or putting it more accurately, I want to be able to get the distance between the top of a control to the top of one of its children (and adding the height member of all the above children yields specious results!) but the process of getting the absolute coordinates, and comparing them, looks really messed up.
I use this function to calculate the height between the tops of 2 tags:
private static function GetRemainingHeight(oParent:Container, oChild:Container,
yParent:Number, yChild:Number):Number {
const ptParent:Point = oParent.localToGlobal(new Point(0, yParent));
const ptChild:Point = oChild.localToGlobal(new Point(0, yChild));
const nHeightOfEverythingAbove:Number = ptChild.y - ptParent.y;
trace(ptChild.y.toString() + '[' + yChild.toString() + '] - ' +
ptParent.y.toString() + '[' + yParent.toString() + '] = ' + nHeightOfEverythingAbove.toString() + ' > ' + oParent.height.toString());
return nHeightOfEverythingAbove;
}
Note that oParent.y == yParent and oChild.y == yChild but I did it this way for binding reasons.
The result I get is very surprising:
822[329] - 124[0] = 698 > 439
which is impossible, because the top of oChild does not disappear below oParent. The only figure I find unexpected is ptChild.y. All the other numbers look quite sane. So I'm assuming that my mistake was in subtracting two figures that are not supposed to be comparable.
Of course, if anyone has a method of calculating the difference between two points that doesn't involve localToGlobal(), that'd be fine, too.
I'm using the 3.5 SDK.
I found a partial answer by looking to http://rjria.blogspot.ca/2008/05/localtoglobal-vs-contenttoglobal-in.html (including the comments). It dithers on whether or not I should be using localToGlobal() or contentToGlobal(), but it filled in some blanks that Adobe's documentation left, which is that you get the global coordinates by feeding the function new Point(0, 0). In the end, I used this:
public static function GetRemainingHeight(oParent:DisplayObject, oChild:DisplayObject,
yParent:Number, yChild:Number):Number {
const ptParent:Point = oParent.localToGlobal(new Point(0, 0));
const ptChild:Point = oChild.localToGlobal(new Point(0, 0));
const nHeightOfEverythingAbove:Number = ptChild.y - ptParent.y;
return nHeightOfEverythingAbove;
}
See question for an explanation for the seemingly unnecessary parameters, which now seem like they might really be irrelevant.
However, I didn't need this function as often as I thought, and I'm not terribly happy w/the way it works anyway. I've learned that the way I've done it, it isn't possible to just make all those parameters to the function Bindable and expect this function to be called when changes to oChild are made. In one case I had to call this function in the handler for the updateComplete event.
While working with JqxWidges I met a problem with exporting nested grids which use one JSON as a source file. The common solution doesn't work. Actually it exports only parent grid colums.
$("#excelExport").click(function () {
$("#jqxGrid").jqxGrid('exportdata', 'csv', chartName + ' ' + date);
});
One of the existing solutions (http://www.jqwidgets.com/community/reply/reply-to-export-data-from-a-nested-grid-13/) propose to push nested rows into data array while calling initrowdetails function.
Yes it works! But only for nested grids and in case when this grid was selected.
So, from this step I am moving to next aproach:
To collect all necessary data into array using initial JSON (prevent you from gathering only separate selected data);
To initialise parent grid columns with all existing data and mark nested columns as hidden. Then when export don't forget to add true parameter to export both non/hidden columns;
Use standard export with custom array parameter;
That's it!
Data collecting:
var toExport = data.allClientsCountChart;
var exp = new Array();
for(var i in toExport){
var client = {};
var countr = toExport[i].countries;
client[labels.clientType]=toExport[i].clientType;
client[labels.clientTypeCount]=toExport[i].clientTypeCount;
exp.push(client);
for(var j in countr) {
var country = {}
var detailes = countr[j].clientDetails;
country[labels.countryType]=countr[j].countryType;
country[labels.clientsNumber]=countr[j].clientsNumber;
exp.push(country);
for(var d in detailes) {
var det = {}
det[labels.scriptName]=detailes[d].scriptName;
det[labels.clientsCount]=detailes[d].clientsCount;
exp.push(det);
}
}
}
Export:
$("#excelExport").click(function () {
$("#jqxGrid").jqxGrid('exportdata', 'csv', chartName + ' ' + date, true, exp, true);
}
And don't forget to set the fifth pafameter into true to export hidden columns.
No doubds, it looks hardcoded. But it works for me.
So, if you have a good solution - please leave a comment!!!
I need help about select a row in a kendoGrid.
I have a simple kendoGrid with selection enabled, and when i click on a button in a webpage, i have to use a string (for example "cod001") for selecting a row in my kendogrid by a column....
for example:
var grid = $("#grid").data("kendoGrid");
grid.select("??????????");//here i sould select a row where the unique value is "cod001" in a defined column
hope someone can help me.
thanks in advance.
I find an alternative solution, without each functions...
i'll post my solution, and hope can help somoeone with my same issues!!!
var g = $("#grid").data("kendoGrid");
var selectedRow = g.select();
var index = selectedRow.index();
... and then...
var ddl = $("#grid").data("kendoGrid");
ddl.select("tr:eq(" + index + ")");
you can make a loop on each line of your grid to check what the column your looking for is and then select it.
var linesToSelect = [];
$.each($('.k-grid-content tbody').children(), function(index, line){
// column is the column's value you want to test
if ($("#grid").data("kendoGrid").dataItem(line).column == "cod001")
linesToSelect.push(line);
});
$("#grid").data("kendoGrid").select(linesToSelect);
This is not a perfect solution since you do a loop on every rows of your grid, but it should help until you find a better solution!