Hello a have a simple question I have defined columns with property resizable: true.
How do I manage to let user re-size column with their mouse, like they will do in most grid control?
Columns are resizable by default, but you have to activate resizing on the whole grid by setting enableColumnResize to true in the grid options. See this Plunker.
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true
};
Related
I use a small grid in a grid to store a relation table.
Example:grid in grid example
This works fine so far.
If I now click on the second column in the inner grid table, the whole field with the integrated grid goes out of edit mode. The first field in the inner grid can be edited without problems.
I have tried different types of preventDefault(). But unfortunately no workaround.
What do I have to do so that I can edit the two columns in the inner grid?
Just changein your editable function
editable: true
To
editable: {
mode: "inline"
},
here is the documentation
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.mode
note that you have editable:true twice at your editor: function
runs also with:
editable: {
mode: "popup"
},
Similar to the inline mode, edit can be controlled via button.
have fun...
I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.
The question is : How can I freeze the column header while scrolling ?
When you create the Grid you should define the height in pixels as well as define scrollable as true.
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
scrollable: true,
height : "150px",
columns : [
...
]
});
See this working here : http://jsfiddle.net/OnaBai/uuPW5/
Maybe this is something you were looking for:
https://github.com/jmosbech/StickyTableHeaders
Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.
You simply link provided script to your view and call this method on load:
$('#grid').stickyTableHeaders({
cacheHeaderHeight: true,
leftOffset: 1,
fixedOffset: ...
});
Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.
Just set the css of the grid header like this :
.k-grid-header {
position: sticky;
top: 0;
}
This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:
.Scrollable(scr => scr.Height(400))
It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.
Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so
.Scrollable(scr =>
{
if (data.Count() < 10)
{
scr.Height("auto");
}
else
{
scr.Height(400);
}
})
I am trying to adjust column with mouse pointer in a grid generated
i have enabled resizable option in every column
but column is not adjustable with mouse pointer
but the examples given in slickgrid. column is adjustable
how to i make my grid column adjustable. (i verified in chrome browser)
There is an issue with using outerWidth for setting the column's previous width. Changing
columnElements.each(function (i, e) {
columns[i].previousWidth = $(e).outerWidth();
});
to
columnElements.each(function (i, e) {
columns[i].previousWidth = $(e).width();
});
in slickgrid in the function setupColumnResize() in the .dragstart bind should work.
SlickGrid has already set default column options in slick.grid.js. The default column options is set like below.
var columnDefaults = {
name: "",
resizable: true,
sortable: false,
minWidth: 30,
rerenderOnResize: false,
headerCssClass: null,
defaultSortAsc: true
};
If you still got error, please upload your code into jsfiddle and share the link.
I have a kendo grid (version 2012.3.1114) that displays quite a bit of data.
The grid scrolls vertically and does not page, as this is a requirement we have.
Is there any way that the grid can maintain it's headings visible as the user scrolls down? I'm looking for something similar to how Excel behaves when you select the "Freeze Top Row" option.
Define the height of the table body as follow
$("#grid").kendoGrid({
dataSource: datasource,
pageable : false,
height: 300,
columns : [
...
]
});
NOTE: The height is the height in pixels of the body of the table (does not include header or footer).
Is there a way to toggle the multiselect option of a grid?
Changing the multiselect parameter of the grid and calling for a reload has the side-effect of leaving the header behind when disabling or not creating the header column if multiselect was not TRUE upon the grid creation.
The closest I have come is setting multiselect to TRUE upon grid creation and using showCol and hideCol to toggle: $('#grid').showCol("cb").trigger('reloadGrid');
This has a side effect of changing the grid width when toggled. It appears the cb column width is reserved when it is not hidden.
Basically I'm attempting to create a grid with an "edit/cancel" button to toggle the multiselect -- very similar to how the iPhone/iPad handles deleting multiple mail or text messages.
Thank you in advance.
I full agree with Justin that jqGrid don't support toggling of multiselect parameter dynamically. So +1 to his answer in any way. I agree, that the simplest and the only supported way to toggle multiselect parameter will be connected with re-initialize (re-creating) the grid.
So if you need to change the value of multiselect parameter of jqGrid you need first change multiselect parameter with respect of respect setGridParam and then re-creating the grid with respect of GridUnload method for example. See the demo from the answer.
Nevertheless I find your question very interesting (+1 for you too). It's a little sport task at least to try to implement the behavior.
Some remarks for the understanding the complexity of the problem. During filling of the body of the grid jqGrid code calculate positions of the cells based on the value of multiselect parameter (see setting of gi value here and usage it later, here for example). So if you will hide the column 'cb', which hold the checkboxes, the cell position will be calculated wrong. The grid will be filled correctly only if either the column 'cb' not exists at all or if you have multiselect: true. So you have to set multiselect: true before paging or sorting of the grid if the column 'cb' exist in the grid. Even for hidden column 'cb' you have to set multiselect to true. On the other side you have to set multiselect to the value which corresponds the real behavior which you need directly after filling of the grid (for example in the loadComplete).
I hope I express me clear inspite of my bad English. To be sure that all understand me correctly I repeat the same one more time. If you want try to toggle multiselect dynamically you have to do the following steps:
create grid in any way with multiselect: true to have 'cb' column
set multiselect: false and hide 'cb' column in the loadComplete if you want to have single select behavior
set multiselect: true always before refreshing the grid: before paging, sorting, filtering, reloading and so on.
I created the demo which seems to work. It has the button which can be used to toggle multiselect parameter:
In the demo I used the trick with subclassing (overwriting of the original event handle) of reloadGrid event which I described the old answer.
The most important parts of the code from the demo you will find below:
var events, originalReloadGrid, $grid = $("#list"), multiselect = false,
enableMultiselect = function (isEnable) {
$(this).jqGrid('setGridParam', {multiselect: (isEnable ? true : false)});
};
$grid.jqGrid({
// ... some parameters
multiselect: true,
onPaging: function () {
enableMultiselect.call(this, true);
},
onSortCol: function () {
enableMultiselect.call(this, true);
},
loadComplete: function () {
if (!multiselect) {
$(this).jqGrid('hideCol', 'cb');
} else {
$(this).jqGrid('showCol', 'cb');
}
enableMultiselect.call(this, multiselect);
}
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
{multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true, closeAfterSearch: true});
events = $grid.data("events"); // read all events bound to
// Verify that one reloadGrid event hanler is set. It should be set
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
originalReloadGrid = events.reloadGrid[0].handler; // save old
$grid.unbind('reloadGrid');
$grid.bind('reloadGrid', function (e, opts) {
enableMultiselect.call(this, true);
originalReloadGrid.call(this, e, opts);
});
}
$("#multi").button().click(function () {
var $this = $(this);
multiselect = $this.is(":checked");
$this.button("option", "label", multiselect ?
"To use single select click here" :
"To use multiselect click here");
enableMultiselect.call($grid[0], true);
$grid.trigger("reloadGrid");
});
UPDATED: In case of usage jQuery in version 1.8 or higher one have to change the line events = $grid.data("events"); to events = $._data($grid[0], "events");. One can find the modified demo here.
I really like what you are trying to do here, and think it would be a great enhancement for jqGrid, but unfortunately this is not officially supported. In the jqGrid documentation under Documentation | Options | multiselect you can see the Can be changed? column for multiselect reads:
No. see HOWTO
It would be nice if there was a link or more information about that HOWTO. Anyway, this is probably why you are running into all of the weird behavior. You may be able to work around it if you try hard enough - if so, please consider posting your solution here.
Alternatively, perhaps you could re-initialize the grid in place and change it from/to a multi-select grid? Not an ideal solution because the user will have to wait longer for the grid to be set up, but this is probably the quickest solution.
A simpler answer:
<input type="button" value="Multiselect" onclick="toggle_multiselect()">
<script>
function toggle_multiselect()
{
if ($('#list1 .cbox:visible').length > 0)
{
$('#list1').jqGrid('hideCol', 'cb');
jQuery('.jqgrow').click(function(){ jQuery('#list1').jqGrid('resetSelection'); this.checked = true; });
}
else
{
$('#list1').jqGrid('showCol', 'cb');
jQuery('.jqgrow').unbind('click');
}
}
</script>
Where list1 is from <table id="list1"></table>.