This question is locked. New answers and comments are not allowed.
I have transaction data that I need grouped.
See image "gridgrouping1.jpg"
1)
I have the grouping text the way I want it (Full Month, Full Year) based on a field I have called "groupByDate". This field is a date field, and it is the first day of its respective month, and I'm grouping all my data based on this date.
As you can see in the image, the "Group by Date" column is showing even though "hidden: true" is set on this column.
I need to keep my grouping but not display the "group by" column.
2) Is there any way to disable the user being able to click on the "group by" bar which collapses the group by data. i.e. I want to keep all the group by headers expanded and not have the user be able to click to collapse + hide the "arrow" that shows the expaned/collapsed state.
3) Using Telerik "light" CSS, what are the class names involved with the group by headers so that we can skin them for our client.
4) We have a dropdown above the grid which contains all the distinct "group by" headers (see image "gridgrouping2.jpg)
The client would like it if when the user selects "February 2013" for example, that the grid scrolls or changes position so that the "February 2013" group header is now the first row in the grid. It's just a dropdown that will auto scroll the grid to the desired date grouping...
My current grid code is below,
Thanks,
Randy
See image "gridgrouping1.jpg"
1)
I have the grouping text the way I want it (Full Month, Full Year) based on a field I have called "groupByDate". This field is a date field, and it is the first day of its respective month, and I'm grouping all my data based on this date.
As you can see in the image, the "Group by Date" column is showing even though "hidden: true" is set on this column.
I need to keep my grouping but not display the "group by" column.
2) Is there any way to disable the user being able to click on the "group by" bar which collapses the group by data. i.e. I want to keep all the group by headers expanded and not have the user be able to click to collapse + hide the "arrow" that shows the expaned/collapsed state.
3) Using Telerik "light" CSS, what are the class names involved with the group by headers so that we can skin them for our client.
4) We have a dropdown above the grid which contains all the distinct "group by" headers (see image "gridgrouping2.jpg)
The client would like it if when the user selects "February 2013" for example, that the grid scrolls or changes position so that the "February 2013" group header is now the first row in the grid. It's just a dropdown that will auto scroll the grid to the desired date grouping...
My current grid code is below,
var gridSectionReserveAccountActivity = new Telerik.UI.RadGrid(document.getElementById("gridSectionReserveAccountActivity"), { dataSource: { data: vm.sectionReserveTransactions, group: { field: "groupByDate", dir: "desc" }, schema: { model: { fields: { date: { type: "date" }, groupByDate: { type: "date" }, description: { type: "string" }, withdrawal: { type: "number" }, deposit: { type: "number" }, balance: { type: "number" } } } }, sort: [ { field: "date", dir: "desc" } ] }, columns: [ { field: "groupByDate", title: "Group by Date", width: "0px", hiddden: true, groupHeaderTemplate: "#=vw.Formatter.Date.isDate(value) ? vw.Formatter.Date.toFullMonthFullYear(value) : ''#" }, { field: "date", title: "Date", format: "{0:MMM dd yy}", width: "85px" }, { field: "description", title: "Description", sortable: false }, { field: "withdrawal", title: "Withdrawals", format: "{0:N2}", width: "130px", attributes: { style: "text-align: right; padding-right: 20px;" }, headerAttributes: { style: "text-align: right; padding-right: 20px;" }, template: "#=withdrawal > 0 ? vw.Formatter.Currency.toCurrency(withdrawal) : ''#" }, { field: "deposit", title: "Deposits", format: "{0:N2}", width: "110px", attributes: { style: "text-align: right; padding-right: 20px;" }, headerAttributes: { style: "text-align: right; padding-right: 20px;" }, template: "#=deposit > 0 ? vw.Formatter.Currency.toCurrency(deposit) : ''#" }, { field: "balance", title: "Reserve Balance", format: "{0:N2}", width: "150px", attributes: { style: "text-align: right; padding-right: 20px;" }, headerAttributes: { style: "text-align: right; padding-right: 20px;" }, template: "#=balance > 0 ? vw.Formatter.Currency.toCurrency(balance) : ''#" } ], sortable: "single, allowUnsort", selectable: "none", filterable: false, groupable: { enabled: false, staticHeaders: true }, reorderable: false, resizable: false});Thanks,
Randy
2 Answers, 1 is accepted
0
Accepted
Hello Randy,
Straight to your questions:
1) In your code snippet, you have hidden written with a typo. Confirm that in your code you have only 2 d's, instead of three (hidden instead of hiddden).
2) To achieve this requirement, you can remove the collapse arrows. When they are not present, RadGrid will not collapse the headers on click. To achieve this, use the following code after the grid is initialized:
3) To see the output and CSS classes of RadGrid when grouping is enabled, check this help article:
HTML Output and CSS Classes with Grouping Enabled
It describes all class names used in RadGrid when grouping is enabled. For the group headers specifically, check the last two sections.
4) You can see a functionality like the one you require implemented in the Telerik Controls Examples application which ships with the RadControls installation. In the grouping example you have semantic zoom and on pressing a letter in the zoomed out view, the grid scrolls to the corresponding group.
Here is a modification of the code, adjusted to work on selecting an item in a dropdown:
- I use a hard-coded dropdown content but it will work just the same way with one bound to an actual data source:
- In the event handler, I get the item text and look for it in the grid group headers. When the header is located, I get its offsetTop value and scroll the grid content to this point:
Give these suggestions a try and let us know if you have problems with their implementation.
Kind regards,
Tsvetina
the Telerik team
Straight to your questions:
1) In your code snippet, you have hidden written with a typo. Confirm that in your code you have only 2 d's, instead of three (hidden instead of hiddden).
2) To achieve this requirement, you can remove the collapse arrows. When they are not present, RadGrid will not collapse the headers on click. To achieve this, use the following code after the grid is initialized:
gridSectionReserveAccountActivity.addEventListener("databound", function (e) { $(".k-grouping-row .k-icon").remove();})3) To see the output and CSS classes of RadGrid when grouping is enabled, check this help article:
HTML Output and CSS Classes with Grouping Enabled
It describes all class names used in RadGrid when grouping is enabled. For the group headers specifically, check the last two sections.
4) You can see a functionality like the one you require implemented in the Telerik Controls Examples application which ships with the RadControls installation. In the grouping example you have semantic zoom and on pressing a letter in the zoomed out view, the grid scrolls to the corresponding group.
Here is a modification of the code, adjusted to work on selecting an item in a dropdown:
- I use a hard-coded dropdown content but it will work just the same way with one bound to an actual data source:
<span id="myDropDownList" data-win-control="Telerik.UI.RadDropDownList" data-win-options="{dataSource: ['Jan', 'Feb', 'Jun','Jul', 'Aug'],onselect: Sample.Helpers.itemSelected}"></span>- In the event handler, I get the item text and look for it in the grid group headers. When the header is located, I get its offsetTop value and scroll the grid content to this point:
WinJS.Namespace.define("Sample.Helpers", { itemSelected: WinJS.Utilities.markSupportedForProcessing(function (e) { var text = e.item[0].innerText; var gridEl = document.getElementById("gridAccountActivity"); var groups = gridEl.querySelectorAll(".k-grouping-row"); for (var i = 0, len = groups.length; i < len; i++) { var group = groups[i]; if (group.textContent.indexOf(text) != -1) { var gridContent = $(".k-grid-content", gridEl), scrollheight = group.offsetTop; gridContent.animate({ scrollTop: scrollheight }, 800); break; } } })});Give these suggestions a try and let us know if you have problems with their implementation.
Kind regards,
Tsvetina
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Randy
Top achievements
Rank 1
Rank 1
answered on 09 Apr 2013, 07:56 PM
Thank you so much Tsvetina, you're awesome as usual!
1) Just a typo, I was so close but so far away, lol.
2) Removed the icon perfectly, thanks.
3) Thanks for the CSS class guide to grouping - i'll let the CSS guys know.
4) The scroll works awesome & looks so cool. The groupable staticheader is also just a cool feature by itself.
1) Just a typo, I was so close but so far away, lol.
2) Removed the icon perfectly, thanks.
3) Thanks for the CSS class guide to grouping - i'll let the CSS guys know.
4) The scroll works awesome & looks so cool. The groupable staticheader is also just a cool feature by itself.