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>";
}
Related
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
I have been using ng-grid for displaying data and now migrating to jqgrid. I'm a newbie to this tech and I have tried creating a button which performs some other action like validating and opening a new form. I could invoke my Angular JS variable in that button. Can someone help me?
function ActionitmGridformatter(cellvalue, options, rowObject) {
var itmgrid= "";
return itmgrid;
}
$scope.itmgrid= function(row){
alert("hii");
...
};
Also the above itmgrid variable is inside the controller. Can someone post useful links for jqgrid docs and any other inputs will be helpful for me. Kindly ignore if the question is repeated and also share the relevant link.
Thanks
I recently needed to do the same thing, I had a grid of ordered products and I needed to create a link in each row that pertained to that order, here is how I went about that:
Create a function:
function orderLinkFormatter (cellvalue, options, rowObject) {
var base = window.location.origin;
return '' + rowObject.OrderNumber + '';
}
In your grid change you colModel to look like this:
{ name: 'OrderId', index: 'OrderId', width: 100, search: false, formatter:orderLinkFormatter, align: 'center'},
You will end up with something like in this DEMO.
Or this DEMO
I would also suggest that you try using free-jqgrid, it is a free fork of jqgrid that is updated almost daily and the author: Oleg provides really good support on this site.
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");
I am using jqgrid to show dynamic data in it, my sql stored procedure returns some data as "T & E". I am displaying this data in group header, i can only see "T" in the group header the rest of the data is trimmed down in IE 7/8. The same thing when i run it in Firefox it show correctly as "T & E". Please tell me the solution for this problem, any help would be appreciated.
I have tried the autoencode property setting it to true, but it did not work,
I have kept the meta tag character encoding utf-8 in the aspx file.
I had similar issue while editing . This link helped me to attain what i wanted with some tweaks.
My system config.
Win 7 with IE8
While editing, the text after the '&' was lost. Eg: If we had text like 'a&a' only 'a' used to show up in the grid and get saved eventually.
The custom formatter how ever did the trick for me.
//In col Model
//Assuming description is one of your column in the jqGrid
//Note the formatter , this is the custom formatter which does the magic for us in this case.
{ name: 'Description', index: 'Description', align: "center", sorttype: 'text', sortable: true, resizable: false, editable: editGrids, formatter: formatTextDisplay,unformat:unformatTextDisplay}
//Formatter code
var formatTextDisplay = function (cellval, opts, action) {
if (cellval) {
return $.jgrid.htmlEncode(cellval);
};
return "";
}
//Un formatter code, in case you want to read through the text in its original state from the grid for processing in the javascript file.
var unformatTextDisplay = function (cellval, opts, action) {
if (cellval) {
return $.jgrid.htmlDecode(cellval);
};
return "";
}
Ext JS 4. I have a tree.Panel where I want to display custom HTML in each node, generated from that node’s model data. I can do this by setting the node’s text when loading the store, but it is not the model’s job to do markup. So I created a custom Column that renders my HTML.
My problem is: unless I derive from Ext.tree.Column, it doesn’t show up properly (no outline, plus/minus icons etc.). If I do, everything is fine, but Ext.tree.Column is marked as private to Ext JS.
Is there some officially supported API to do what I want?
I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help:
http://hardtouse.com/blog/?p=24
The idea is to use renderer combined with A LOT OF css magic:
columns : [{
xtype : 'treecolumn',
dataIndex : 'name',
renderer : function(value, record){
return Ext.String.format('<div class="tree-font">{0}</div>', value);
}]
Thanks for your answer above. Here is another example showing a few more options for formatting:
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
// see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
var tooltipString = "Hello";
metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
}
}]
You might also want to add
hideHeaders : true,
to your tree panel config to remove the "grid" header that appears as a result of using a treecolumn.
Murray