Is it possible to have a hyperlink in the edit options of a grid column? The grid displays plain text when it is bound. But when it is in edit/add mode, this text needs to be converted into a hyperlink (which opens a popup). I couldn't find an option to have a hyperlink in the editoptions. I was able to do it as a button but I need a link. Is there a way of doing this? I have the following code -
colModel: [
{ name: 'Person', index: 'PersonName', width: 70, editable: true, edittype: 'button',
editoptions: {
value: 'Select',
dataEvents: [{
type: 'click',
fn: function (elem) {
var left = (screen.width / 2) - (700 / 2);
var top = (screen.height / 2) - (550 / 2);
var popup = window.open("popup.htm", "popup", "resizable=1,copyhistory=0,menubar=0,width=700,height=550,left='+left+',top='+top");
popup.focus();
}
}]
}
},
May be you should check out the custom edittype, in which you need to define your own functions custom_element and custom_value to build your form element.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
Related
In my JQGrid I have check box column and drop Down drop down is created via edittype: 'select' and check boxes are created via "custom formatter" like this edittype: 'checkbox', formatter: returnCheckBox, I want to write my own "onChange" event.
So for I been able to write my "onchange" event for check box and it works fine but when I click some where else (not on check box) in check box cell and click back on check box it stop firing the "onchange" event. I think row select it causing problem how to stop it.
Here is what i am doing
$("#theGrid").jqGrid({
datatype: 'local',
sortname: 'value1',
sortorder: 'desc',
cellsubmit: 'clientArray',
editurl: 'clientArray',
cellEdit: true,
colNames: ['SName', 'SType', 'DName', 'DType', 'Nullable'],
colModel: [
{ name: 'SName', index: 'SName', width: 100 },
{ name: 'SType', index: 'Type', width: 100 },
{
name: 'DName',
index: 'DName',
width: 100,
editable: true,
edittype: 'select',
editoptions: { value: "1:ID;2:Name" },
},
{
name: 'DType',
index: 'DType',
width: 100,
editable: true,
edittype: 'select',
editoptions: { value: "1:BigInt;2:VarChar(50)" }
},
{
name: 'Nullable',
index: 'Nullable',
width: 100,
editable: true,
edittype: 'checkbox',
//formatter: "checkbox",
formatter: checkedStateChange,
sortable: false,
formatoptions: {disabled : false},
}
]
});
var gridData = [
{ SName: 'ID', SType: 'BigInt', DName: 'ID', DType: 'BigInt' },
{ SName: 'Name', SType: 'VarChar(50)', DName: 'Name', DType: 'VarChar(50)' },
];
for (var i = 0; i < gridData.length; i++) {
$("#theGrid").jqGrid('addRowData', gridData[i].value0, gridData[i]);
}
function checkedStateChange(cellvalue, options, rowObject) {
return '<input type="checkbox" class="gridCheckBox"/>';
}
$('.gridCheckBox').on('change',function(){
alert('I am in checkBoxChange method');
});
The code which you posted have really many small problems.
The problem with change exists because of at least two reasons. The first one: you have to place binding to change event inside of loadComplete callback of jqGrid. The current code bind change event only to existing checkboxs on the page. By sorting the grid for example the grid content will be rebuild and new checkboxs will be created. So all old binding will not work more. The next problem is modifying of checkboxs because of cell editing. If you click in the cell with the checkbox the old content will be destroyed and another checkbox will be created on the same place. The checkbox will have no change binding. After the user clicks on another cell the current cell will be saved. So the editing checkbox will be destroyed and new checkbox will be created in the same place with respect of formatter: "checkbox" or formatter: checkedStateChange. As the result the change event handler will be exist on the checkbox.
I personally don't see any reason why you use formatter: checkedStateChange (or formatter: "checkbox" with formatoptions: {disabled : false}) together with cell editing. It makes only problems. Much more consequent would be to use formatter: "checkbox" without formatoptions: {disabled : false} and just to use afterSaveCell callback of cell editing instead of "onchange" event.
Additional problems in your code:
The usage of name: 'SType', index: 'Type' is wrong because index value have to be the same as name value in case of usage datatype: "local". The current settings will don't make correct sorting or searching in the column SType. I strictly recommend you to remove all index properties from colModel
You use editoptions: { value: "1:BigInt;2:VarChar(50)" } in the DType column which seend be wrong. Correct value should be editoptions: { value: "BigInt:BigInt;VarChar(50):VarChar(50)" }. If you need to use value: "1:BigInt;2:VarChar(50)" then the input data should contains 1 and 2 values in DType column and you should use formatter: "select" additionally.
You can remove colNames option because it contains the same value like the values of name property of colModel.
You should never fill grid with data using addRowData called in the loop. Instead of that you should just move definition of gridData before creating of jqGrid and include data: gridData option in the grid.
The grid have no pager. Nevertheless the local paging still work and the pager site is 20 (it's default value of the option rowNum). Using addRowData you can fill more es 20 rows, but if the user click on a column header before starting of cell editing then the grid will be sorted and only the first 20 rows of result will be displayed. If you want to use local paging you have to include rowNum option with some large enough value, like rowNum: 10000.
It is strictly recommended to use gridview: true option to improve performance of grids and to use autoencode: true option to interpret the input data as pure data and not like HTML fragments. It will protect you from strange errors.
If colModel which you posted is full then the option sortname: 'value1' is wrong because the input data don't contains value1 property.
I have jqGrid table with many columns. Searching in grid is made using filter toolbar. For most of them search is just simple default operator. For one datetime column I want different kind of operators and datepicker selector.
I have added dataInit datepicker initialization to searchoptions, necessary operators to searchoptions.sopt. To show this operators I have set searchOperators to true. So for this column all is ok. I have datepicker with operator selector popup. But for all other columns default operator icon is shown on the left of it. It is annoying as operator is default and user couldn't change it. So is there is some possibility to hide them using jqGrid API? As far as I could see I could hide this only using my custom code:
I need to check my column model and after rendering of grid (may be in loadComplete) for all columns that have empty sopt or sopt.length == 0 to remove operator selector. Or add CSS class that hide it. Not sure which of these solution is better (hide or remove) because removing could broke some logic, and hiding could affect width calculation. Here is sample of what I mean on fiddle
function fixSearchOperators()
{
var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel');
var gridContainer = $("#grid").parents(".ui-jqgrid");
var filterToolbar = $("tr.ui-search-toolbar", gridContainer);
filterToolbar.find("th").each(function()
{
var index = $(this).index();
if(!(columns[index].searchoptions &&
columns[index].searchoptions.sopt &&
columns[index].searchoptions.sopt.length>1))
{
$(this).find(".ui-search-oper").hide();
}
});
}
Does anybody have some better ideas?
I find the idea to define visibility of searching operations in every column very good idea. +1 from me.
I would only suggest you to change a little the criteria for choosing which columns of searching toolbar will get the searching operations. It seems to me more native to include some new property inside of searchoptions. So that you can write something like
searchoptions: {
searchOperators: true,
sopt: ["gt", "eq"],
dataInit: function(elem) {
$(elem).datepicker();
}
}
I think that some columns, like the columns with stype: "select", could still need to have sopt (at least sopt: ["eq"]), but one don't want to see search operators for such columns. Specifying of visibility of searching operations on the column level would be very practical in such cases.
The modified fiddle demo you can find here. I included in the demo CSS from the fix (see the answer and the corresponding bug report). The full code is below
var dataArr = [
{id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'},
{id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'},
{id:3, name: "John", surname: "Smith", startdate: '12/30/2012'}];
function fixSearchOperators() {
var $grid = $("#grid"),
columns = $grid.jqGrid ('getGridParam', 'colModel'),
filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar");
filterToolbar.find("th").each(function(index) {
var $searchOper = $(this).find(".ui-search-oper");
if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) {
$searchOper.hide();
}
});
}
$("#grid").jqGrid({
data: dataArr,
datatype: "local",
gridview: true,
height: 'auto',
hoverrows: false,
colModel: [
{ name: 'id', width: 60, sorttype: "int"},
{ name: 'name', width: 70},
{ name: 'surname', width: 100},
{ name: 'startdate', sorttype: "date", width: 90,
searchoptions: {
searchOperators: true,
sopt: ['gt', 'eq'],
dataInit: function(elem) {
$(elem).datepicker();
}
},
formatoptions: {
srcformat:'m/d/Y',
newformat:'m/d/Y'
}
}
]
});
$("#grid").jqGrid('filterToolbar', {
searchOnEnter: false,
ignoreCase: true,
searchOperators: true
});
fixSearchOperators();
It displays the same result like youth:
I have a grid and I'm using PHP and JSON. I'm using ondblClickRow to do inline editing. The thing that I need is: when I double click in a field, I want the content of this field will be select. I'm sorry to ask about this, but I didn't find this... when I search it on Google I just find examples of select row and this issues.
I recommend you to look this answer and another one. Probably modification of the code from the last answer to the web browser which you use will get your the solution of your problem.
If you want a single cell to be focused after inline edit mode is enabled, try this:
ondblClickRow: function (rowId, rowIndex, columnIndex) {
var grid = $('#mygrid');
grid.editRow(rowId, true, function() {
var colModel = grid.getGridParam('colMode');
var colName = colModel[colIndex].name;
var input = $('#' + rowId + '_' + colName);
input.get(0).focus();
});
}
}
Found the code here:
http://www.trirand.com/blog/?page_id=393/help/setting-focus-on-a-cell-after-entering-edit-mode/
If you have specific columns in a grid when you click on it should select its contents, then in your colmodel add this code to each column:
{
name: 'TEXT_BOX',
index: 'TEXT_BOX',
label: 'Notes',
width: 100,
align: 'left',
sortable: false,
hidden: false,
dataEvents: [ { type: 'click', data: { i: 7 }, fn: function(e) { e.target.select(); } }]
}
dataEvents will select the text in the input field when you click on it.
// Text will get Selected of cell when inline editing
$('#gridTableObj').jqGrid({
....
..
afterEditCell : function(rowid, cellname, value, iRow, iCol){
$('#'+rowid+'_'+cellname).select(); // with this the edited cell value will be selected.
}
...
..
});
I am using the jqgrid, and prettyphoto in my application.
I have a column to show the image preview. on clicking that image is the image will be displayed in the popup box.
grid code is..
.....
{name: 'imagePath', index: 'imagePath', width: 80, align: 'center',
formatter :anchorFmatter, edittype: 'text', hidden: false, editable: true,
editrules: {required: false}, editoptions: {size: 30}}
....
function anchorFmatter(cellValue, options, rowObject)
{
if(cellValue === null ){
return "<a></a>";
}else {
jQuery("a[rel='image']").prettyPhoto({
animation_speed:'normal',
show_title:false,
allow_resize:true,
default_width:640,
default_height:385,
theme:'light_rounded',
autoplay:false
});
return "<a href='" + cellValue + "' rel='image'><img src='" + cellValue +
"' width='100' height='35'></a>";
}
}
all images in the grid are coming in popup, but the last image is coming in new browser page.
may get any help.
Thanks in advance
Inside of custom formatter the grid contain exist still as string and not yet placed on the page. So you should remove the calls jQuery("a[rel='image']").prettyPhoto from the formutter function. Instead of that you can call the jQuery("a[rel='image']").prettyPhoto inside of loadComplete event handler. Additionally you should use gridview:true option if you not already use it. It will improve the grid performance.
I need to dynamically populate a form from fields in a database using EXT JS forms and ASP.NET MVC and I'm having trouble finding a starting point.
The database includes all of the settings: the field names, the field data types and the original field data. When a menu is clicked on the application's main page, the clicked item's settings should appear on a separate form. The data types include checkboxes, textfields, and possibly combo boxes.
I can easily return all of the settings in Json, but I know the form will need to iterate either with Ext.each or some other method, but I'm having trouble getting my head around this. I've also thought about using an Ext reusable type as a template that accepts Json data from the database to determine the field name, type and content.
something like this:
TextSettings = Ext.extend(Ext.Container, {
layout: 'column',
autoHeight: true,
autoWidth: true,
initComponent: function() {
this.items = [
{
xtype: 'container',
style: 'float:left;clear:left;',
items: [
{
xtype: 'label',
text: 'Setting Name',
style: 'display:block;',
ref: '../../../NameLabel'
},
{
xtype: 'label',
text: 'Setting description',
style: 'display:block;font-style:italic;',
ref: '../../../DescriptionLabel'
}
]
},
{
xtype: 'container',
style: 'float:right;clear:right;',
items: [
{
xtype: 'textfield',
width: 300,
ref: '../../../SettingEdit'
}
]
}
];
TextSettings.superclass.initComponent.call(this);
}
});
Does this look like a crash course?
Has anyone else done something similar?
I ran across this Ajax function online (probably the Sencha forums) and it seems to be working.
var ajax = Ext.Ajax.request({
url: '/Controller/Items',
method: 'get',
success: function (response) {
response = Ext.util.JSON.decode(response.responseText);
//form.add(Ext.decode(response.responseText).data);
for (i = 0; i < response.data.length; i++) {
form.add({
xtype: response.data[i].xtype,
fieldLabel: response.data[i].text,
name: response.data[i].name,
value: response.data[i].value,
style: response.data[i].style,
items: response.data[i].items,
width: response.data[i].width
});
}
form.doLayout();
}
});
With the following Json output:
{success: true, data: [{xtype: 'label', text: 'Report', style: 'display:block', ref: '../../../Displaylabel' },{xtype: 'label', text: \"Report Text\", style: 'display:block;font-style:italic;', ref: '../../../DescriptionLabel'},{xtype: \"textfield\", width: 300, ref: \"../../../SettingEdit\", value: \"A comment... for YOU!!!\"}, {xtype: 'checkbox', text: 'Check it for fun'}]}
Still more work to go, but this is at least giving me dynamic text fields.