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.
Related
Is it possible to add styling to only some of the results returned in an autocomplete dropdown?
The code below works fine, however, I would like to style the individual results based on the value of data[x].restricted. When it is true, I still want to display those items but disable or grey them out within the autocomplete dropdown list. If data[x].restricted is false then I do not want to apply any additional styling to those items.
source: function (request, response) {
$.ajax({
url: $("#AutoCompleteCustomerNameUrl").val(),
type: "POST",
dataType: "json",
data: {
srchCus: request.term
},
success: function (data) {
var x, array = [];
for (x in data) {
array.push({
label: (data[x].restricted ? 'Restricted Access - ' : '') + data[x].customerName,
name: data[x].customerFullName
});
}
}
});
}
Any assistance on how to accomplish this would be much appreciated.
Approach 1 (feels hacky)
This doesn't feel like a great option, but you could probably do this by using jQuery to target elements based on their text content. Autocomplete suggestions are generated as <li>s, so something like this might work:
$('li:contains("Restricted Access")').addClass('grey');
The question is then when to run that? Those elements are added dynamically of course, after page load, so that would have to run after they've been created - you'd have to run it based on some autocomplete event. Looking through the list in the docs, maybe the open event would be best. A handler for that event will run whenever the menu is opened, so it could add a CSS class to all the just-created suggestions matching that selector. Eg (untested):
$("#selector").autocomplete({
// ... your normal autocomplete code ...
open: function(event, ui) {
// Add a CSS class to those suggestions matching the text
$('li:contains("Restricted Access")').addClass('grey');
}
});
I haven't tested this, as it doesn't feel like the right approach. Below is a much better, tested and working option.
Approach 2 (feels good)
You can also do this using the _renderItem extension point. If you check the example they give there you can see it is the function which actually generates the HTML which shows up as your autocomplete suggestion. If we can customise that, we could do anything - eg check details of the item, add specific CSS classes, etc.
I don't find those docs super clear, but it isn't hard to find examples of it in use, eg the Custom Data example (that #Simon-K linked to in the comments above) shows how to use it:
$("#selector").autocomplete({
// ... your normal autocomplete code ...
}).autocomplete("instance")._renderItem = function(ul, item) {
// Here we have complete control of what is returned, and access to
// the items!
return $("<li>").append("<div>" + item.label ...).appendTo(ul);
};
So with your requirements, we could do something like this:
$("#selector").autocomplete({
// ... your normal autocomplete code ...
}).autocomplete("instance")._renderItem = function(ul, item) {
var style = (item.restricted) ? 'grey' : '';
return $("<li>")
.append("<div class='" + style + "'>" + item.label + "</div>")
.appendTo(ul);
};
And then of course add a CSS class to style those items:
.grey {
color: #ccc;
}
Working JSFiddle.
I have a grid. The first column is a checkbox for each row. The second column has two buttons for each row: edit and delete. Clicking on the edit button invokes inline editing. I simply want to disable inline editing for the all rows in the grid. I want to show a form when the edit button is clicked.
I am unable to find a decent answer to this question. I did find a few related posts at SO but they seem unclear to me.
Thanks and regards.
This is what I did, pretty ugly, but it works. My gut feel is that there must be better
solution.
$(grid_selector).jqGrid({
....
onSelectRow: function(id){
jQuery(grid_selector).restoreRow(id);
$('#jSaveButton_' + id).hide();
$('#jCancelButton_' + id).hide();
$('#jEditButton_' + id).show();
$('#jDeleteButton_' + id).show();
},
....
});
Hope this helps someone. Still wait for better solution. But there is a problem with it, the edit button does not invoke a form anymore, which I will try to find a solution.
Try using some thing like this , here is an sample when you initialize your grid
{
name: 'Question', index: 'Question', width: 80, align: 'top', editable: true,
editoptions: {
dataInit: function (el) {
$(el).attr('readonly', true);
}
}
},
I have used a custom formatter for one of the columns in my jqGrid. Here is the formatter:
formatter: function(cellvalue, options, rowObject) {
var link = $('<a>', {
text: 'Click Me'
href: '#',
click: function() {
alert('sdfsfsd');
// my stuff
}
});
return link[0].outerHTML;
}
There are two problems:
The link is not clickable. When I click the link, the row gets selected! Is there a way to not bypass row selection, but also make the link clickable? [Update: I tried using the beforeSelectRow: function(row, e) { return false;} to disable selection. But still not able to click the link. I can see in the html that the cell value is a link indeed.]
The link is not link like, meaning it is not blue/underlined, as usual it looks like. I have not overidden anything in my CSS.
Help much appreciated!
Thanks
Vivek Ragunathan
UPDATE: I found that this is not a problem with the grid as such. But the click handler does not get linked with the hyperlink. I also tried this code instead but no luck!
var link = $('<a>', {
text: 'Click Me'
href: '#'
}).click(function() {
alert('sdfsfsd');
// my stuff
});
Thanks
Since the link is created dynamically (using jquery), and then the HTML of that object is consumed, the handler will not be part of the HTML. So in this case, the link has to be created out of string directly:
formatter: function(cellvalue, options, row) {
var handler = "someHandlerDefined(" + options.rowId + ")";
return "<a href=# onclick='" + handler + "'>Link</a>";
}
That worked!
im getting the Uncaught TypeError: Cannot call method 'getColumns' of undefined when clicking on the header toolbar of a Live Serach Grid Panel on ExtJS. Im implementing filters with the Filters Feature.
Heres some of my code:
Ext.require([
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel'
...
]);
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var grid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
selType: 'cellmodel',
store: store,
columns:[
{
header: "Evento",
width: 90,
sortable: true,
filterable: true,
dataIndex: 'RH_DESCRIPCION',
filter: {
type: 'string'
}
}],
features: [filters]
...
This is the block of code where the exception occurs:
Ext.Array.each(grid.columnManager.getColumns(), function (column) {
//Uncaught TypeError: Cannot call method 'getColumns' of undefined
if (column.filterable === false) {
filters.removeAtKey(column.dataIndex);
} else {
add(column.dataIndex, column.filter, column.filterable);
}
});
Any help will be appriciated!
After doing heavier debugging it seems that grid.columnManager isn't very well supported on version 4.2. For any others with the same issue you should use:
grid.down('headercontainer').getGridColumns();
or
grid.down('headercontainer').getVisibleGridColumns();
to get a hold of columns on your grid. I believe this won't work with grouped columns, I've not tested it though.
Ext.Array.each(grid.columnManager.getColumns(), function (column) ...
change to
Ext.Array.each(grid.columns, function (column) {
it works well :)
grid.columns is not a supported/public property. It might not contain, for example, columns added with reconfigure. It will contain them if you use 4.2.0, but not in 4.2.1/4.2.2. This will happen even if you add Ext.selection.CheckboxModel, the checkbox column will not be included there in 4.2.2 and you will end up with "index mismatch" if you get the index from, lets say cellClick event.
Unfortunately, grid.columnManager or grid.getColumnManager() is new in 4.2.1/4.2.2 and it is a private property/method. Shortly speaking, either of those might stop working with next releases of ExtJS, and "columns" property is not reliable in all cases.
See some discussion here:
http://www.sencha.com/forum/showthread.php?277525
I haven't found any officially supported solution yet. I can't add comments, so I had to publish this as a full answer, thanks S.O.!
As others already posted, you should not use the columnManager property. Check Sencha's note about it:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.ColumnManager
This is a private utility class for internal use by the framework.
Don't rely on its existence.
I think the best option is to use this for all columns:
grid.headerCt.getGridColumns()
And this if you only need the visible columns:
grid.headerCt.getVisibleGridColumns()
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