I am new to Kendo world. And I need a help regarding the Kendo spreadsheet k-right class that's applied on the columns of spreadsheet.In my spreadsheet I have multiple tabs.each tabs can have different number of columns.But the last column is what I need as I need to bind a drop-down to the every row of that column for data selection. In my code I am using the class named k-spreadsheet-active-cell and k-right to identify the rightmost column position. But it's coming as undefined as k-right class is not getting applied. It's working fine for the tab which has max columns..for the lesser ones it's not getting applied.
Trying to read over Kendo site ,not getting any relevant info. Any help is hugely appreciated. Thanks.
You can handle the selectSheet event (documentation) to get the active spreadsheet when it changes.
You can then get the spreadsheet's column definitions by calling the toJSON method (documentation).
Finally you can get the last column definition by using some JavaScript (or jQuery) magic.
Here's an example that you can use when initializing the spreadsheet component:
selectSheet: function(arg) {
var json = arg.sheet.toJSON();
if (json.columns) {
var lastColumn = json.columns[json.columns.length - 1];
// do whatever it is you need to do with the lastColumn variable
}
}
Related
Can dynamic text be entered into a header or footer of a master page?
I have placed dynamic text into a grid which then sits in the master page footer, this doesn't work and gives error:
ReportDesign (id = 1):
+ Invalid javascript expression: ReferenceError: "row" is not defined. (<inline>#1)
When I test the expression in the footer of the report layout itself this works.
Please see the expression below:
if( BirtComp.lessOrEqual( row["Aggregation"], "1,500.00" )){"user1.jpg"}
else if (BirtComp.greaterThan(row["Aggregation"], "1,500.00")){ "user2.jpg"}
The easiest way to use dynamic text in the master page is as follows:
Optional, but recommended: Create a dataset "MasterPage" which selects the dynamic data that you need.
Create a grid in the page footer (and/or header) of the master page.
Bind the grid to the dataset "MasterPage".
Use dynamic text items and data items inside the grid as you like.
Important:
The grid uses only the first row returned by your dataset.
Thus, it is best practice to create the dataset in such a way that it will return exactly one row.
This means that BIRT aggregation functions won't work here.
If your "MasterPage" dataset is JDBC based, you can of course use SQL aggregation functions like SUM, COUNT etc.
It is not possible to access "the current first record for the current page" this way: The "MasterPage" dataset returns one record for the whole report.
I'm developing an app using the amazing angularslickgrid.
Till now, i haven't got any problem, buy I found out an strange behaviour on it.
In the ngOnInit I wrote the following code:
ngOnInit(){
this.defineGridHeaders();
this.defineGridOptions();
this.obtainData();
}
Till this moment everything works well and the grid load correctly the data including the RowSelection column.
The problem is when I try to change the columndefinition, and perfrom a reset() like this:
this.defineGridHeaders();
this.angularGrid.gridService.resetGrid();
The new colums have been loaded correctly but i lose the rowSelection column.. :(
I've tried to include the defineGridOptions() function in the middle of the defineGridHeaders() and resetGrid() but the result is the same.
In the this.defineGridHeaders() I just perfom the following:
this.columnDefinitions = [];
[...FIELDS CREATION...]
const col = {
id,
name,
field,
sortable,
filterable,
type,
editor,
formatter,
filter,
outputType,
params,
minWidth: minwidth,
width: width,
header: header,
excludeFromExport,
excludeFromGridMenu,
excludeFromQuery,
excludeFromHeaderMenu
};
this.columnDefinitions.push(col);
Could someone help me on this?
Many Thanks!
Please note that I'm the author of Angular-Slickgrid and you opened an issue with the same question on GitHub, I'll simply reply with the same answer here
a reset is a reset, so it won't keep that. But I added the Row Selection in the Grid State not that long ago, so you could get it from there (just check the Grid State/Presets - Wiki. Dynamically adding a new column can be seen in this Example 3, you should look at the code on how to make it show up correctly (you can't just add it, you need to manually trigger a dirty change call, look at the example code for that)
Also to add a bit more to this, SlickGrid Row Selection is by row index, it's not by row data. Meaning that if your data changes when you refresh or something and you keep the row selection it will not synched anymore... all that to say, just remember, it's a row index, so pay attention when you want to keep or want to reapply a row selection.
If it's just to row selection that you lose, just save it before adding a column and put back the selection after adding the column. It's simple, get the row selection (with getSelectedRows) before you change the column definitions, add your new column and then put back the selection (with setSelectedRows).
I'm trying to have a d3.js Sankey visualisation filter a data set according to categories.
I'm using d3.csv method to input the data as shown in this example - http://bl.ocks.org/timelyportfolio/5052095
I would however like to upload a data set with four columns -
source, target, value, category
My aim is to have a visualisation with the ability to switch between categories. So each Sankey visualisation will only represent one particular category. Then user can switch from the dropdown to another one.
Is this possible using the current d3.csv input method?
Would this work ?
d3.csv("file.csv", function(data) {
[...]
// Called each time there is an action on the dropdown menu
function updateGraph() {
// Select only data that are tagged with a certain category
var dataset = data.filter(function(d) { return d.category == selectedCategory; });
// Update graph visualization
}
}
This way you wouldn't have to reload your csv file each time.
This a very long method for the second part but, creating multiple html/php and csv files depending on your categories and then adding the following code in each of your html/php files. This method would be extra work if you have a lot of categories.
Category 1
category 2
If you figured out a solution the way you were trying it, then if possible please update your answer. it would be helpful.
Thanks.
I've implemented a Kendo grid with basic CRUD functionality (JS front end, MVC controller) and this all works correctly. I have a requirement to provide functionality that enables a "replace all" type function. For example, I filter by a company name then click edit on a record and change the email address or phone number - I also need the option to update all records in the current filtered set to the edited email/phone number. (instead of editing each record individually).
Is there anything in the tool set enabling this type of functionality or will I need to build a custom control?
Many thanks!
I found a solution from a previous question, an example is here:
http://jsbin.com/alocoj/1/edit
Also if you require the filtered and sorted data set (instead of the entire set) use:
var grid = $('#grid').data('kendoGrid');
var dataSource = grid.dataSource;
var data = dataSource.view();
The .view() gets the current set
We are developing a web app project in that we are using Kendo UI. Is that possible to make first column title/heading as what ever we selected from drop down. For example :- If a serial number is searched , serial number should be in the first column of the search. But I am unable to get that since we defined column definition generically in sorted manner. Depending upon selection we hide rest of the column.
for example:
xxx.GridColDef = [ {
field : "serialNo",
title : "Serial No",
}, {
field : "firstname",
title : "firstname",
}, {
field : "lastnameo",
title : "lastname",
},
from the drop down if i select first name the first name should be in the first column. but i am getting first column as serial no Is there any way? without adding separate column definition for each.
Kendo version - 2012.1.322
this should be done automatically not using column re-ordering not manually
Sorry if I am not clear. What I want is
In drop down I have
Serial No
First Name
Last Name
DOB
Initially the the grid will be as below
Serial No First Name Last Name DOB
If user selects "First Name" from drop down it should be like this
First Name Serial No Last Name DOB
Hope this helps. if you need more clarification let me know . Thanks for providing solution for this.
One more thing: -
"Fiddle using your current version of Kendo 2012.1.322 " in this fiddle i am unable to select from drop down.
Updated Answer 2
The current KendoUI grid framework does not support the ability to switch columns in code. I've created a new fiddle where you don't have to completely re-order the columns in every switch case. It loops through your column definition and if the drop down value is there, it removes it from the array and places it at the first position. I don't know how your 50 columns and 8 drop downs interact so it's hard for me to give a completely accurate answer. But between the multiple suggestions on here, I hope you can come to a solution :)
I created a new tempColumn definition variable so that the original column definition is still available in it's original state.
function onSelect(e) {
var ddlVal = this.dataItem(e.item.index()).value;
var tempColumns = columnDefinitions;
$(tempColumns).each(function(index) {
if (ddlVal == this.title) {
tempColumns.splice(index, 1);
tempColumns.splice(0, 0, this);
}
});
createGrid(tempColumns);
}
New fiddle which uses spice to re-order the columns
Updated Answer
I've created a new fiddle with your current version of Kendo. You don't need to update your version because I don't believe there is any way to do this within the Kendo framework.
This solution involves re-defining your column definitions when you make a selection from the drop down and then re-create the grid.
Updated fiddle with your current version of Kendo
*For some reason, Internet Explorer doesn't play nice with jsfiddle sometimes. This example works in Firefox and Chrome but not in IE. If you can't try a different browser to see it work, plug the code into your solution and test it.
Original Answer
I've provided 2 different solutions.
1) Is it possible for you to update your version of KendoUI? If you can, then you can take advantage of the .showColumn() and .hideColumn() methods.
Here's a fiddle below using KendoUI 2012.2.710. On the select event of the drop down, you just show/hide the appropriate columns. Really easy and straight forward.
Fiddle using Kendo 2012.2.710
2) If you can't update your KendoUI version, you can alter your columnDefinition array and then re-create the grid.
In the onSelect method of the drop down list, you remove the first column from the columnDefinition array and then add in the new column object to the array. After that, you remove the content of the grid's div element and then re-create the grid.
You're still binding to the same data so you don't have to go back across the wire to get the data again.
Fiddle using your current version of Kendo 2012.1.322
~ In both cases, the code could definitely be cleaned up to suit your needs better but I just wanted to give you some base functionality to work with. Hope this helps!