I am having Kendo Razor Grid in which I am having a Toolbar with Create button. I am having 2 different kendo grids in same page. I want to Hide only one of the Grid's Toolbar. How can I do this ?
We can hide Toolbar using the below code. As it points to class, toolbar on both grids will hide. I want only one of them to hide. How can I do this ?
$(".k-grid-toolbar").hide();
Can you just add the id of the grid you want to target in your jQuery selector?
$("#GridID .k-grid-toolbar").hide();
Try to add unique id attribute for each toolbar.
such as the first Grid's Toolbar's id as myid1, the second Grid's Toolbar's id as myid2 . Let's hiding the frist Grid's Toolbar, something like this,
$(".k-grid-toolbar#myid1").hide();
Related
I am using ag-grid to add table in my application.
Right now I am trying to add styles to ag-grid Filter buttons, like Apply, Clear.
I added these like in column definition to display the button
filterParams: {
buttons: ['clear', 'apply'],
closeOnApply: true,
},
But, how can I change the styles of the Clear and Apply Button?
Below is the snapshot of ag-Grid and Kendo grid.
My question is how can I embed a dropdown/html inside the ag-Grid
just like I did in kendo. I've tried to bind it with headerCellTemplate but it removes the columnName header from the grid and overwrite it with the dropDown html. I want it exactly same as in the Kendo grid.
Use the headerCellRenderer instead of headerCellTemplate attribute and build the following node :
A parent div
A child span with the headerName, you can get it from the params.colDe.headerName.
A child select element
For more details check the 2nd example of this link : https://www.ag-grid.com/angular-grid-header-rendering/index.php
I'm trying to disable the cell selection in my Ext.grid.Panel.
I found out there are few selectionTypes and selectionModes, but neither worked for me. Would be great if I could achieve this by using the framework.
Thanks in advance.
Update to my question: I want to select a row, but not a single column. Is it possible to disable the cell selection, but allow the user to select the row?
Update
I found a better solution than the suggested ones:
Just use the theme-variable of the component.
By setting the value to 0px, the selection disappears completely.
Using a list or a tree i usually use row selected event to do what i've to and on cell click i set change selected cell css to nothing.
possibilities:
change css of selected cell to null
not use cell selected event but rowselected (cell/row selected Always match same)--> if the problem is the cell css when clicked change it
Only workarounds, you can't disable cell click, because without this the rowclick event can't be fired
Have you searched the docs? For "disable", "cell" and "selection", maybe?
Because disableSelection:true works for me.
Override following css classes:
.x-grid-item-focused .x-grid-cell-inner:before {
border: none;
}
After this, when you select grid cell, the cell selection border won't be displayed.
I want to hide a column in grid panel of ExtJs 5 when store associated with grid panel loads .
Depending on how your data store works.... there is onload event. Hide your column on that event.
Using the following syntax you can achieve it:
<yourGrid>.down('headercontainer').getGridColumns()[<columnIndex>].hidden = true;
If you know the index of the column to hide you can use this code after store load event fired
grid.getColumnManager().getHeaderAtIndex(indexOfColumn).hide()
You can find the api from manual [Ext.grid.column.Column-method-hide]: http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Column-method-hide
There is a fiddle for you: http://runjs.cn/code/qusp7pql
When you use the flag 'showColumnMenu' with true value.
the ng-grid is rendered with button on the right end top panel.
Using this button we can hide/show the column on the grid.
In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.
Iv'e created plunker which demonstrated my problem
> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview
In that plnkr - I set column 'Id' to be invisible using (visible: false)
But if the user click on the column menu on the right end panel
he will be able to set it visible..
EDIT
Another scenario that I need to cover is case where there is some other
column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid!
and the user does not need to see it in the column menu..
So, if only i could hide those columns (id,name) inside the column menu
my problem will be solved..
Thanks!
You can do that editing a bit menuTemplate.html in ng-grid source file
Find line starting from :$templateCache.put('menuTemplate.html',
and line
<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
change to
<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
now you can add
alwaysVisible:true
to columnDefs and it's done
Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview
Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?
For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.
Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/
It has a new ColumnDef property, "EnableHiding" for exactly this case.
Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2