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);
}
}
},
Related
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'm having a weird issue. My kendo drop down list is revealing the drop down list each time I press the up or down arrow, on all the inputs in my app. Does anyone know what can be causing this? I went to the kendo page that talks about this, but its mostly a reference for the keyboard shortcuts.
I should mention that kitting the down and up arrow DOES change to the next item in the list, but I can't have the dropdown list showing each time.
var dataYesNo = [ { text: "Yes", value: 'true' }, { text: "No", value: 'false' } ]; $('#ddlList').kendoDropDownList({ dataSource: dataYesNo, dataValueField: 'value', dataTextField: 'text', optionLabel: 'select a value...' });
OK, I figured it out. I stumbled onto this ...
http://www.telerik.com/forums/conflict-w-bootstrap-js-dropdownlist
I had to upgrade my bootstrap version to 3.3.5 and works like a charm. Regardless, thanks for the assistance.
I've a column of XTemplate cells in a Grid Panel. How do I add a click event/listener that applies to all cells on this particular column? What I've tried so far works but applies to ALL clicks on ANY cell in the grid. I can't seem to manipulate the delegate option to filter for a particular class of element.
My code so far:
columns:[
...
{
xtype: 'templatecolumn',
text: 'Approve2',
flex: 1,
dataIndex: 'Approved',
align: 'center',
sortable: false,
tpl: '<input type="checkbox" class="approveCheckbox" />'
},
...
],
initComponent: function () {
this.on('itemclick', this.storeCheckboxVal, this, { delegate: '.approveCheckbox' });
},
...
,
storeCheckboxVal: function (view, record, item, index, event) {
alert(record.data['ID']);
}
AFAIK, delegate works only if you assign handler to DOM Element (not Component). Try this code instead:
initComponent: function () {
this.mon(this.el, 'click', this.storeCheckboxVal, this, { delegate: '.approveCheckbox' });
},
You'll probably need to change your grid's selType to cellmodel. After that, you should be able to listen to the grid view's cellclick. This appears to be undocumented, but I found it using Ext.util.Obersvable.capture(Ext.getCmp('my-grid-id'), console.log) Which is an extremely useful trick to know.
Thanks for the replies all, however I've managed to solve my problem via this solution: Ext JS on click event
OK, I am having an issue with the filter toolbar retaining the filter values after clicking on the Refresh button at the bottom of the grid.
I have looked at numerous examples that do exactly that, clear the top filter toolbar fields to the default state (in the case of select list, to the first item in the list "Select..."), but I do not see any obvious difference between that code and mine
Values are being loaded into the filter toolbar drop down boxes via JSON request, and on selecting an item in the list the grid filters to the appropriate data.
The only thing that is not working is that the filter drop-down(s) do not clear the selected item upon clicking refresh grid.
Any ideas?
Not sure what code would help to post at this point, so I will post upon request
Justin
Well, I have answered my own question :)
The issue turned out to be related to naming convention for column names and indexes.
Example:
Before fix:
{ name: ClientId', index: 'ClientOrganization.Client.ClientId', width: '125', stype: 'select', searchoptions: { sopt: ['eq'], dataUrl: '#Url.Action("GetClientListForFilter")'} },
After fix:
{ name: 'ClientOrganization.Client.ClientId', index: 'ClientOrganization.Client.ClientId', width: '125', stype: 'select', searchoptions: { sopt: ['eq'], dataUrl: '#Url.Action("GetClientListForFilter")'} },
Basically the name needed to be the same as the index to properly refresh. Not sure if this is expected behavior or not, but the fix works. ;)
Justin
I've got an interesting issue with creating a subgrid in the excellent jqGrid plugin. The main grid is working fine itself. However, when I add the parameters to create the subgrid, I get the new first column but do not get the plus sign. When I inspect the demo using Firebug I see that an href and several classes are added to the first column. I do not see those classes in the first column of my grid. Here's the code:
$("#quotelist").jqGrid({
datatype:'xml',
url:'getQuotes',
mtype: 'GET',
postData:{"a":$("#AccountNumber").val(),
"op":"y",
"cl":"n",
"cd":"All",
"eq":"All",
"sess":$("#SessionID").val(),
"d":new Date().getTime()
},
colNames:['Origin Zip', 'Destination Zip', 'Equipment', 'Commodity'],
colModel:[
{name:'ozip', index:'ozip', title:false, width:140},
{name:'dzip', index:'dzip', title:false, width:40},
{name:'equipment', index:'equipment', title:false, width:40},
{name:'commodity', index:'commodity', title:false, width:40}
],
loadError:function(xhr, st, err) {
alert('loaderror on quote request grid - ' + st)
},
pager:'#pager',
height: 550,
width: 425,
rowNum: -1,
hidegrid: false,
gridview: true,
gridstate:'hidden',
viewrecords: true,
altRows: true,
sortname: 'ozip',
sortorder: 'asc',
caption: 'Carriers',
subGrid:true,
subGridUrl:"getQuoteResponse&a="+$("#AccountNumber").val() +
"&sess=" + $("#SessionID").val(),
subGridModel: [
{name:['Carrier Name','Status'], width:[200,100]}
]
});
Other information:
I included the 'pager' to make sure the icons appear on the pager - they do. I've tried this on jqGrid versions 3.8.2 and 3.6.5 with the same result. jQuery version is 1.4.2, jquery UI version 1.8.2.
I think that the plus isn't appearing because I'm not getting the new classes in the first column when the grid loads, but I have no idea why not. It's weird that the first column appears when subGrid is set to true but then the plus sign isn't loaded.
Any idea? Many thanks for any suggestions!
edit: nevermind! I was editing this post to fix some formatting and found the problem. Too many parameters about hidegrid, gridview, etc. Those were left over from my initial experimentation with jqGrid.
The main problem is that gridview:true can not be used in your case. In the description of the gridview option in the documentation you will find
If set to true we can not use
treeGrid, subGrid, or afterInsertRow
event.
I gone through the same problem when I was working with jQuery Grid. In my case plus icon is not appearing but when I clicked on first column cell my subgrid appear. After searching for hour I finally got solution. In ui.jqgrid.css file include this code.
.ui-icon-plus {
height: 10px;
width: 10px;
background-image: url('../../Images/plus.gif');
}
.ui-icon-minus {
height: 10px;
width: 10px;
background-image: url('../../Images/minus.gif');
}
Image path will be your Image path. I am not giving height and width of image that's why I am not able to see in UI. Hope this help.