I have one kendo grid, grid has one edit button which open bootstrap model dialog box, but when i click on grid edit button, it add # in URL.
How can i remove this?
kendo Grid Edit Button Code
{
title: "Action",
attributes: { "style": "text-align:center;" },
headerAttributes:
{
"style": "text-align:center;white-space: normal;background:rgba(0, 101, 179, 1) !important;color:white;font-weight:bold;border-right:1px solid white;text-align:center"
},
command:
[
{
name: "edit", iconClass: "k-icon k-i-pencil", text: "", click: openEditDialogBox
}
]
}
I call javascript function on edit button click.
Related
I have a column that I want always to be rendered in the grid, but I have other columns that I want to allow users to toggle on and off. I'm struggling to find a setting on the kendo-grid-column component that would remove it as an option.
I want to remove the "Actions" column from the column menu. I've tried editable false, locked, etc not finding something that will remove it from the column selector options.
<kendo-grid-column
[width]="200"
[columnMenu]="false"
[resizable]="false"
[editable]="false"
id="actions-col"
field="actions"
title="Actions"
>
I don't know any property that will allow to do this directly. However, you can still use the columnMenuInit event to hide some menu items:
columnMenuInit(e) {
//Hides the ShipCountry column
//HiddenMenuItem set display: none!important
e.container.find('li.k-columns-item').find('input[data-field="ShipCountry"]').closest("li").addClass("HiddenMenuItem");
}
In this example, I can't use CSS display none directly because Kendo will overwrite it and we can't remove it from the DOM since the grid will raise an error if it can't find it... so that's why I'm using the HiddenMenuItem class.
Define menu inside column object and set it to false:
$("#grid").kendoGrid({
columns: [
{ field: "id", menu: false },
{ field: "name", menu: false },
{ field: "age" }
],
columnMenu: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
]
});
Example: Columns menu
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");
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
I am working on an app in which I need to add items to kendo panelbar on button click.
These panels need to be expandabale/collapseble.
Is there a way to do this?
<ul id="panelbar"></ul>
<script>
$("#panelbar").kendoPanelBar();
var panelBar = $("#panelbar").data("kendoPanelBar");
panelBar.append(
[
{
text: "Item 1",
cssClass: "myClass", // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
url: "http://www.telerik.com/" // link URL if navigation is needed, optional.
},
{
text: "<b>Item 2</b>",
encoded: false, // Allows use of HTML for item text
content: "text" // content within an item
},
{
text: "Item 3",
contentUrl: "http://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
},
{
text: "Item 4",
imageUrl: "http://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
expanded: true, // item is rendered expanded
items: [{ // Sub item collection.
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}]
},
{
text: "Item 5",
// item image sprite CSS class, optional
spriteCssClass: "imageClass3"
}
]
);
</script>
Reference: http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#methods-append
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.