I have a Kendo grid which has a lot of columns.
At the initial loading, only a few columns are displayed since I used the hidden attribute on Grid options.
{ field: 'projDisplayId', title: "columnToBeDisplayed", width: "170px"},
{ field: 'workTypDescription', hidden: true, title: "hiddenColumn", width: "170px" },
After that, I manually added some other columns by checking them on the column menu (see My Kendo Grid)
However, when I refresh the page, the columns I added before the refresh have disappeared.
Is there any way to keep the added columns displayed even after I refresh the page?
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...
In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});
So I am using Kendo UI Grid and I want to add data-priority to the columns that way I can hide and show columns depending on the viewport I know this is possible with JQuery Mobile (http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_tables_columntoggle) .But Is this possible in Kendo UI?
You can add custom attributes to the column headers using the headersAttributes configuration.
Use it like this (if you are using pure javascript version of Kendo):
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
headerAttributes: {"data-priority": "1"}
},
// more columns...
});
I've got a grid that's width is 100%. The columns size equals out among all columns when the grid first loads.
The user can then re-size columns to fit their need.
Now I need a way to reset all the columns back to defaults without reloading the page.
I tried refreshing the grid but that didn't work after the grid has already been bound:
.data().kendoGrid.refresh()
You might try a little trick (this is not perfect and might fail depending on your custom grid formatting). The trick is setting the widths to the same amount (ex. 100px). Something like:
Grid definition:
var grid = $("#grid").kendoGrid({
dataSource: ds,
resizable : true,
pageable : true,
columns :
[
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "City" }
]
}).data("kendoGrid");
Code for resizing:
$("col", grid.element).css("width", "100px");
In addition, you might be interested on doing:
$("table", grid.element).css("width", "100%");
This resizes the "table" columns to use all the original space otherwise (just doing the col resizing) you might end-up with equally spaced cols but not using all the original width of the table).
You can see how it works here: http://jsfiddle.net/OnaBai/a9QSr/
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).