I have this grid
$("#LocationGrid").kendoGrid({
dataSource: locationDataSource,
editable: "inline",
columns: [ { field: "LocationID", hidden: "hidden" },
{ field: "LocationName", title: "Location Name" },
{ command: [{ name: "edit" }] }]
});
i want to add toolbar with create button to this grid if the user has permission
if(condition) //user has permission
{
//add toolbar to grid
toolbar: [{ name: "create", text: "Add New Location}],
}
and also add "Delete" button to command column if the user has permission
if(condition) //user has permission
{
//add delete button to grid
command: [{ name: "delete"}]
}
how i can perform this, please?
We can use the setOptions() method of grid like below,
if(condition)
{
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
toolbar: [{name: "create", text: "Add New Location"}]
});
}
Refer http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
Related
I have an existing grid creating in Kendo UI for Jquery. I want to put a static drop down/select box in the first field/cell of the grid on each row. When I do it shows up as "undefined".
Most of the examples I see on her and the Telerik site use an editor. In my case the drop down is static. Once they click on an item they will be redirect to another page to do something. At the moment I just want to get the drop down to show up with hard coded options.
jQuery(function($){
"use strict";
var grid = $("#grid").kendoGrid(){
....
columns: [{
field: "my_links",
title: "My Links",
template: "#=getMyLinks(DATA.user_id)#"
},{
....
}_.data("kendoGrid");
function setGridData(){
....
});
grid.setDataSource(dataSource);
}
setGridData();
});
function getMyLinks(user_id){
$('<input id="my_links" name="my_links/>')
.kendoDropDownList{[
dataSource: [
{ id: 1, name: "View" },
{ id: 2, name: "Create },
{ id: 3, name: "Delete"}
],
dataTextField: "name",
dataValueField: "id"
});
}
I would expect a drop down in the
You should provide DOM element for drop down widget in columns.template field and then initialize all widgets in dataBound event.
$("#grid").kendoGrid({
columns: [{
field: "my_links",
title: "My Links",
template: "<input id="my_links" name="my_links/>"
}],
dataBound: function (){
getMyLinks(DATA.user_id);
}
}).data("kendoGrid");
Is it possible to have a dynamic multiple buttons/images per column in a JQGrid 4.7? Each button/image should be clickable to bring up a custom modal pop up. This will only be used to display data, no editing at all.
Any code samples will be appreciated.
Here is a sample visual how it might look like:
Dynamic buttons
Free jqGrid allows to use formatter: "actions" or template: "actions" in multiple columns if you need:
colModel: [
{ name: "a1", template: "actions", width: 44, align: "left",
formatoptions: { mycol: "Q1" } },
{ name: "a2", template: "actions", width: 44, align: "left",
formatoptions: { mycol: "Q2" } },
...
],
actionsNavOptions: {
editbutton: false,// don't display Edit, Save and Cancel buttons
delbutton: false, // don't display Delete button
custom: [
{ action: "open", position: "first",
onClick: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
alert("Open " + item.name + ", rowid=" + options.rowid);
} },
{ action: "post", position: "first",
onClick: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
alert("Post " + item.name + ", rowid=" + options.rowid);
} }
],
posticon: "fa-lock",
posttitle: "Confirm (F2)",
openicon: "fa-folder-open-o",
opentitle: "Open (Enter)",
isDisplayButtons: function (options, rowData) {
if (options.mycol === "Q1") {
if (rowData.closed) { // or rowData.closed
return { post: { hidden: true } };
}
} else if (options.mycol === "Q2") {
if (parseFloat(rowData.amount) < 350) { // or rowData.closed
return { open: { hidden: true } };
}
}
}
}
With respect of editbutton: false and delbutton: false properties of actionsNavOptions you remove the standard actions buttons from the corresponding columns. By custom property one defines custom buttons and by callback isDisplayButtons one can include new custom buttons, include some buttons hidden or remove some custom buttons from the columns. The returned value of is described in the old answer and in the wiki article. In the way you have full control over displayed custom buttons and over the onClick behavior.
See the demo https://jsfiddle.net/OlegKi/av7ng1u0/ as an example.
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I have a grid with Angular and remote data binding. Its configuration is like this:
$scope.myGridOptions = {
dataSource: new kendo.data.DataSource({
type: "json",
transport: {
create: function(operation) {
//calls an Angular service to add
DataService.add(operation).success(function(data) {
operation.success(data);
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
...
}
}),
toolbar: [ { name: "create", text: "Add New Book" } ],
autobind: false,
groupable: false,
editable: {
mode: "inline"
},
columns: [
{
field: "Name",
title: "Name"
},
{
field: "Description",
title: "Description"
},
{
command: [
{ name: "edit", title: "Action" }
]
}
]
};
When I click on the "Add New Book" button, the first row in the grid turns into a blank row and allows me to enter data. When finish entering, I click on "Update" to save the data and the first row turns into a regular, read-only row and I verify the new row has been added to the remote database. So far so good. However, when I click on the "Edit" button on the new row followed by clicking on the "Cancel" button my new row disappears until I refresh the page.
What am I missing?
In order for kendo dataSource to sync data after save, you need to return the newly created row back to the dataSource from the server. This is valid for update also.
First, I know how to exclude a field by marking it 'editable: false' in the kendo data source.
I added a column with a button to the Kendo UI grid to open a window for a file upload. This column is not in the datasource! However, the column is now also displayed in the popup editor as a tetxtbox with 'File Upload' as a label (that is the column header name also as you can see in the screenshot).
How can I exclude/hide this column in the popup editor?
I am using Kendo UI version: "2014.2.716"
Thanks for your help!
Here is how I added the column to the grid, see the last line:
columns: [
{ field: "Id", hidden: true },
{ field: "Name", title: ........ },
{ field: "EnteredBy", title: "Entered by", hidden: true },
{ field: "UpdatedOn", type: "date",.....},
{ field: "UpdatedBy", title: "......},
{ command: ["edit", "destroy"], title: "Action", width: "80px" },
{ field: "Upload", title: "File Upload", width: "80px", template: '<button class="k-button" onClick="uploadFiles(#=Id#)">Upload<br/>Files</button>' }
],
and here is a screenshot that shows the column 'File Upload' with the button 'Upload File' in each cell in the grid-column.
This is the screenshot from the popup editor with the field that I would like to hide.
I think you should make that extra column a custom command instead of specifying a "field" for it.
Something like:
columns: [
...
{
command: { text: "Upload", click: uploadFiles},
title: "File Upload",
width: "80px"
}
]
The uploadFiles function would then get passed a click event, from which it can get to the element that was clicked. You can add a data-id attribute to the row to get its Id from in the uploadFiles function, as they do in the demo linked above.