I have to display cell content like
Policy
Part
Cert
Separated with next line character
In slickgrid table and so on.
How can I do this?
I searched but nothing worked for me.
What should I do with this is there any way to fit contents by height.
I Have this code written for breaking cells
columnname: <p>+policy+</p><br/>+part......and so on.
Any lead will be highly appreciated.
Better register a new formatter for your column.
Example
function myformatter(row, cell, value, columnDef, dataContext) {
return "<style='text-decoration: underline;color: #669900;height:120px;'>" + value +";
}
And call myformatter into column definition
var columns = [];
columns[0] = { id: "id", name: "columnname", field: "id", sortable: true, width: 5, formatter: myformatter };
Related
I wish to have multiple checkbox columns in my slickgrid, along with the title of the column and when selecting that column, to select all items in that column.
I see on the slickgrid examples that it appears to only be used in one column with no title.
I am using VS 2019, and while trying to build a column and make it into checkbox column, I am showing an error underline (, expected)
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
var columns = [
{ id: "JobCards", name: "Job Card", field: "JobCards", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox },
{ id: "Enabled", name: "Enabled", field: "Enabled", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox }
];
var mygrid = new Slick.Grid("#GridAppUserList", AppUserRows, columns, sboptions);
mygrid.registerPlugin(checkboxSelector);
How do I create a column (with a column title) that I can select all the rows in that column?
Thanks.
It doesn't look like there's a way to do what you want with the pre-built checkbox selector. It's not set up for a title as well as the header checkbox. But it should be pretty easy to modify it a bit to do what you want.
Or you could try just combining your column definitions with the ones it produces:
var checkboxSelector1 = new Slick.CheckboxSelectColumn({
columnId: "JobCards",
cssClass: "slick-cell-checkboxsel"
});
var col1 = checkboxSelector1.getColumnDefinition();
col1.name = "Job Card " + col1.name;
col1.field = "JobCards";
col1.maxWidth = 35;
col1.formatter = Slick.Formatters.Checkmark;
col1.editor = Slick.Editors.Checkbox;
columns.push(col1);
// and same for column 2 ....
Note that your error above is because you are just dumping the getColumnDefinition() call into the object:
, field: "JobCards", checkboxSelector.getColumnDefinition(),
to get rid of the error, you'd need to make it
, field: "JobCards", someOtherName: checkboxSelector.getColumnDefinition(),
but then the column def you are getting from checkboxSelector would just be another property of the column, which is not what you want.
I've got a Kendo UI Grid displaying a set of data and I need to be able to select specific cells (cells in specific columns), and when selected, return the DataItem for the row the selected cell is in, and the property of that DataItem that was clicked on. I don't know if this is possible, but I've been working on it all day and have concluded that I need some help.
Here's my grid and dataBound function, which currently gets me the DataItem, but that's it:
var hhGrid = hhDiv.kendoGrid({
dataSource: housing,
scrollable: false,
sortable: true,
selectable: 'cell',
columns: [
{ field: "Start", title: "Start", format: "{0:MM/dd/yyyy}", type: "date" },
{ field: "Stop", title: "Stop", format: "{0:MM/dd/yyyy}", type: "date" },
{ field: "Facility" },
{ field: "Area" },
{ field: "Pod" },
{ field: "Cell" },
{ field: "Comment" }
]
}).data('kendoGrid');
hhGrid.bind('change', grid_change);
function grid_change(e) {
var selectedCells = this.select();
var dataItem = this.dataItem(selectedCells[0].parentNode);
}
So first of all, is there a way to 'turn off' selection of specific columns in the grid definition? I can't find anything on doing this. I only want users to be able to select cells in the 'Area', 'Pod' and 'Cell' columns. If they click the other columns nothing should happen. Also, when they do click on those selected cells, I want to get the DataItem for the row the cell is in (which I currently can do using that grid_change method), as well as the column that was selected, or the property in the DataItem that was selected.
So, for example, if the user clicks a 'Pod' cell, I want to know that it was the pod cell that was clicked, and the other data for the row the cell is in. It seems that all of the data is there, so it shouldn't be this difficult, but I'm really struggling to find the data needed to accomplish this.
Thanks for your help!
Getting the data item is:
// Get selected cell
var selected = this.select();
// Get the row that the cell belongs to.
var row = this.select().closest("tr");
// Get the data item corresponding to this cell
var item = grid.dataItem(row);
For getting the column name you can get it doing:
// Get cell index (column number)
var idx = selected.index();
// Get column name from Grid column definition
var col = this.options.columns[idx].field;
An alternative method for getting the field associated to a columns is:
// Get column name from Grid column header data
var col = $("th", this.thead).eq(idx).data("field");
The advantage is that is columns are sortable this will work anyway.
In order to clear selection for columns that you don't want just need to invoke clearSelection().
if (col !== 'Area' && col !== 'Pod' && col !== 'Cell') {
this.clearSelection();
}
Check an example here : http://jsfiddle.net/OnaBai/m5J9J/1/ and here: http://jsfiddle.net/OnaBai/m5J9J/2/ (using column header for getting column name)
I am trying to update the cell value of a particular column in my grid. I am using local JSON for populating the grid datatype: "local".
The column definition of that column is as follows:-
{
name: 'details',
index: 'details',
label: 'Details',
editable: false,
align: 'center',
formatter: function(cellvalue, options, rowObject) {
if (rowObject['verified']) {
return 'sdfsfsd'; // actually hyperlink for the cellvalue
}
return '';
}
}
I am using the following line of code to update the cell value:-
// rowid is 1
grid.jqGrid('setCell', 1, 'details', 'DONE!');
Also tried like this:
// the last parameter true to force update
grid.jqGrid('setCell', 1, 'details', 'DONE!', null, null, true);
However, the cell value is cleared out (cell becomes empty, <td> content is empty). This happens only for this column, and not for other columns in the grid. What am I missing?
Thanks
Vivek Ragunathan
If you use custom formatter you should specify unformatter too. The function formatter will be used to set the value in the cell. At the beginning of cell editing jqGrid need to get the value from the cell. The function unformat do the job.
i have a Kendo Grid whit "x" number of columns, but the user can hide the columns and i need know what columns are visible to export data only for these columns, i access to the columns in JS whit
var columns = $("#grid").data("kedoGrid");
but it returns all columns not only the visibles.
tankz
You can just get the list of columns by using this:
var columns = $("#grid").data("kendoGrid").columns;
The result will be an array of all column objects which has a property name hidden: true for hidden columns by users. In my case it is like following. So simply you will be able to get the visible column list into an array using following code.
var visibleColumns = [];
jQuery.each(columns, function (index) {
if(!this.hidden) {
visibleColumns.push(this);
}
});
Hidden Column
attributes: Object
encoded: true
field: "pb"
footerAttributes: Object
headerAttributes: Object
hidden: true
title: "Price / Book"
width: 120
__proto__: Object
Visible Column
encoded: true
field: "name"
title: "Company Name"
width: 120
__proto__: Object
Hope this will help.
I'm making a formatter for slickgrid that will display a url as an img tag.
Due to the complexity and performance issues involved slickgrid doesnt support dynamic row heights but it does allow setting the global row height via the options.
var gridOptions = { rowHeight: 64 };
To make the images fit in a reasonable way I want to set the img tag to be the same as, or slightly smaller than the row height.
Neither the columnDef nor dataContext parameters that are passed to the formatter appear to have a reference to the parent grid so I'm not sure how to get the row height set on the grid options.
I'd like to avoid having to hack up the slickgrid scripts to pass through what I need as this makes updating a big PITA!
I could declare the formatter inline I guess and pull in the info via a closure but this isn't as reusable as a standalone formatter implimented in a similar mannor to the default formatters. But this is probably what I'll do for now until a better option presents itself.
Can anyone give me any hints or suggestions?
EDIT:
This does what I want but in a non-reusable mannor. It's not masses of code but it would still be nice to only have to write it once.
var gridOptions = { rowHeight: 64 };
var gridImageFormatter = function ImageFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='" + value + "' style='width:auto;height=" + gridOptions.rowHeight + "' />";
};
var gridColumns = [
{id: "Id", name: "Id", field: "id", width: 250 },
{id: "Name", name: "Name", field: "name", width: 100 },
{id: "Image", name: "Image", field: "image", width: 64, formatter: gridImageFormatter },
{id: "Url", name: "Url", field: "url", width: 250 }
];
EDIT 2:
Using the power of the internet I found a nice little trick for making images autosize if they are bigger that the availible space.
This doesn't work to make smaller images strech to the given space but I can live with that!
How do I auto-resize an image to fit a div container
And this gives us something which works for most cases and is reusable:
function ImageFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='" + value + "' style='max-width:100%;max-height:100%' />";
}