Is it possible to add file attachment inside popup for grid row? Instead of filename - "file attachment"
For that, you have the custom template for edit.
You can use something like this:
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
}
You can build your own form in the popup-editor element
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.template
Related
im new about using jqgrid, and i have a question about jqgrid, hoping help to resolve my question :)
I have a grid that contain a column 'Download File', the column filed with data i load from database and the value is local url that direct to the document like 'file:///D:/Download Folder/File.xlsx'.
I have 2 .js, one is gridview .js and other is model.js. I create link inside model.js using the data and call it inside gridview.js in colModel.
This is my code
//Model.js
val.fileDirText = ''+fileName'';
//Gridview.js
{name: 'fileDirText',width:250,sortable:false}
The Download File column is has a underline and hand symbol if i hover to it but there is no action when i click, open in new tab, and open in new window, but it can copy link.
So how to make the link is clickable and start download the file?
Thank you :)
/*Use my code as reference, it may help.*/
colNames : ["Certificate"],
colModel: [
{ name: "Certificate", index: "Certificate", align: "center", formatter: downloadLink },
],
function downloadLink(cellvalue, options, rowObject) {
var MTJobRoleId = rowObject.MTJobRoleId;
return "<a href='../Templates/Certificate129821/GENERAL_ENGLISH_1_100720181922.pdf' download=''>View Certificate</a>";
}
I am using Kendo UI Grid and other Kendo tools for my project.
How can I change some of its settings globally without using any specific id or class?
Eg: Whenever I use grid, pageable message should be "My custom message" across all the site.
I can do that by targeting perticular grid component like below. I am using kendoGrid many places or many times in same page itself. In that case, how can I do the same without repeating the pageable message everytime?
Online Demo { jsFiddle }
$(document).ready(function () {
$("#grid1").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
$(document).ready(function () {
$("#grid2").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
.............
If I have 5 grid items in same page, let say #grid1, #grid2, #grid3, #grid4, #grid5, should I need to add below message to all 5 grid components?
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
Instead, is there a way where I can override the global properties for KendoGrid element without touching the original plugin?
You don't need to add the configuration to each grid. Instead you can take advantage of Kendo's localization features. To change the pager text for all of your grids you should include a "messages" file after you have loaded "kendo.all.min.js". Since this has to do with localization, the "messages" files are culture-specific. If you have not defined a culture for you project Kendo will assume en-US by default.
Here's what you need to do:
Find the original kendo.messages.en-US.min.js file for your version of Kendo. You should be able to find this file in the Kendo installation directory, for example: C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\js\messages
Copy the file to your project
Look for itemsPerPage inside the file and change its value to whatever you want.
Add a reference to the file in your html's <head> section, but make sure it is after kendo.all.min.js
For more information on localizing Kendo take a look at this article: http://docs.telerik.com/kendo-ui/framework/localization/overview
You can also see a working example here: http://demos.telerik.com/kendo-ui/grid/localization
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;
});
I've noticed that my custom Grid command is not working after a popup edit dialog is opened and closed (cancelled).
The command delrow is used to display a custom delete confirmation (I've simplified it in the fiddle to just use a standard JS confirmation).
I've setup a Fiddle that demonstrates the problem.
It works when the grid is initially loaded, but not after a cancelled edit. Not sure if this is a bug or something I'm doing wrong.
Any advice would be much appreciated. Thanks
Is the way you do it. You are binding the click event in the dataBound but when you cancel the edition the row is refreshed and you loose the bind.
You should define the action using click property as:
columns : [
{
command: [
{name: 'edit'},
{name:'delrow', click: delRow}],
title: ' ',
width: 100
},
{ field: "FirstName", width: 90, title: "First Name" },
...
Where delRow is the same code that you have as click event handler:
function delRow(e) {
var row = $(this).parents('tr:first');
var r=confirm("Are you sure you want to delete this row!");
if (r==true)
{
var g = grid.data('kendoGrid');
g.removeRow(row[0]);
}
}
See it in action here : http://jsfiddle.net/OnaBai/XNcmt/56/
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");