I want to hide a column group in my kendo grid, my column group has five columns under it, i want to hide all the five columns along with column group.
Any help would be appreciated.
Thanks...
To hide the columns that are grouped by you should use the event ondatabound of the grid and interact over all grouped columns aka styled with the class .k-group-indicator and hide the column by its data field.
You can take a look at this that can be used as a prof of concept.
http://jsfiddle.net/2gtWv/
$("#grid").kendoGrid({
columns: [{
field: "name"
}, {
field: "age"
}],
dataSource: ds,
groupable: true,
dataBound:function(o){
var g = $("#grid").data("kendoGrid");
for(var i=0;i<g.columns.length;i++){
g.showColumn(i);
}
$("div.k-group-indicator").each(function(i,v){
g.hideColumn($(v).data("field"));
});
}
});
Related
I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?
I was wondering if anyone knows how I could make text area fields in NetSuite span over the 3 columns.
These fields will have lots of text, so it would be nice to have the whole width of the page for each field.
Help would be much appreciated, thanks
A possible solution is to replace the field group Notes with a tab called Notes and add the text area to the tab instead of to the field group (container property set to ID of tab). A test looks like this (I started with the sample Suitelet from Answer Id: 43586):
Here's the relevant snippet:
var subtab = form.addTab({
id : 'custpage_subtab',
label : 'Subtab'
});
var field = form.addField({
id: 'textfield',
type: serverWidget.FieldType.TEXTAREA,
label: 'Text',
container: 'custpage_subtab'
});
Field groups will always use a common layout, according to my tests. So, if there is one field group with 3 columns, then all field groups will have 3 columns and a field cannot span multiple columns, so the idea behind my solution is to use another element, in this case a tab element to display the field content. The tab label is not displayed because there is only one tab. Hope this helps.
The following worked for me:
var fieldGroup = form.addFieldGroup({
id: 'group_notes',
label: 'Title'
});
var field = form.addField({
id: 'textfield',
type: ui.FieldType.TEXTAREA,
label: 'Notes',
container: 'group_notes'
});
field.updateLayoutType({
layoutType: serverWidget.FieldLayoutType.OUTSIDEBELOW
});
Relevant Netsuite documentation can be found here
I have problem with sorting in Kendo grid. Here is my example: http://dojo.telerik.com/iVATi
In IE sorting works fine: default view and asc sorting view are the same: first going elements starting with symbols, second elements with a-z letters, third elements with а-я letters. But in Chrome and Firefox I see three other results:
1). default view: first going element starting with symbols, second elements with a-z letters, third elements with а-я letters. (correct!)
2). asc sorting: first going elements starting with symbols, second elements with а-я letters, third elements with a-z letters. (bad!)
3). desc sorting: first going elements with z-a letters, second elements with я-а letters, third sorted elements with symbols. (correct!)
The problem is caused by Chrome's unstable sorting and adding an auxiliary data field is the standard way to resolve this limitation.
In case you don't want to add indexes in the data items array, it is also possible to add them on the fly with schema.parse:
var dataSource = new kendo.data.DataSource({
data: [
{ Name: "!asdgad" },
{ Name: "#sgjkhsh" },
{ Name: "adfadfka" },
{ Name: "tgjbndgnb" },
{ Name: "xsdfvks" },
{ Name: "абдваолптрв" },
{ Name: "пролрлитс" },
{ Name: "юатроваро" },
{ Name: "юдвлоитвт" }
],
schema: {
parse: function(data) {
for (var i = 0; i < data.length; i++) {
data[i].index = i;
}
return data;
}
}
});
You will still need to use a custom comparer function though.
I solved this problem. I extended sorted datasource with index field and added comparer-function by index for field name:
http://dojo.telerik.com/UKimo
May be exists other solutions?
I used jQuery plugin datatables, which will auto width columns to fetch the title or data content length if we don't specify the column width of the Grid.
Now I want the same function in Kendo Grid, however, I cannot find it except make Grid wrapper style fixed and set a col width css for all columns, which make the small length field also take big space.
So my question is how to make the Kendo Grid column (usually I have many fields, and it is scroll-able) auto width or in different length (and I don't expect to set width for each column manually).
Thanks
You kind of have to set the width when you define the columns , if you don't specify the width then it will take the auto-width of the content.
Take a look at this DOC http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.width
columns: [
{ field: "name", width: "200px" },
{ field: "tel", width: "10%" }, // this will set width in % , good for responsive site
{ field: "age" } // this will auto set the width of the content
],
If you need more ways to handle Kendo width, look at http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths
Setting scrollable to false should do the trick:
$('#grid').kendoGrid({
dataSource: {
data: data
},
scrollable: false,
resizable: true
});
i'm also solve this issue in angular with dataBound :
my issue about kendo auto fit columns in databound
<kendo-grid id="grid" options="mainGridOptions">
</kendo-grid>
dataBound: function(){
var grid = $("#grid").data("kendoGrid");
for (var i = 0; i < grid.columns.length; i++) {
grid.autoFitColumn(i);
}
},
dataSource: $scope.data,
you can do it in jquery:
$('#grid').kendoGrid({
dataSource: {
data: data
},dataBound: function(){
var grid = $("#grid").data("kendoGrid");
for (var i = 0; i < grid.columns.length; i++) {
grid.autoFitColumn(i);
}
},
I am new to MVC and I use Webgrid to display some customer values.
I need to hide columns together with their headers. How do i do this?
CSS: gridhide { visibility:hidden }
Code: grid.Column("Id", "ID", style: "gridhide"),
I hide particular column:
Please Try This:
WEBGRID
grid.Column(null,null, format: #<input type="hidden" name="IDHidden" value="#item.IDHidden"/>),
I ended up using jQuery to hide the column on the client side. Not ideal but easy to implement. Eg to hide the second column:
$('td:nth-child(2),th:nth-child(2)').hide();
Another option would be to simply not add the column to the grid in the first place like so, as seen here: https://forums.asp.net/post/5850519.aspx
var books = db.Query(sql);
var columns = new List<WebGridColumn>();
columns.Add(new WebGridColumn(){ColumnName = "BookId", Header = "Book Id" });
if(books.Any(b =>b.Price != null)){
columns.Add(new WebGridColumn(){ColumnName = "Price", Header = "Price" });
}
var grid = new WebGrid(books);
gridhide is a class, define class instead of style in grid.column