I have a jqgrid with inline edit and few frozen columns. I gathered some information on how to make this work from here. The answer in the link has a frozen column which is multi-select.
But what I wanted to know is if there is any way or a work around to edit a frozen column in inline edit.
I have been trying to figure this one out for a little while now, and was finally able to come up with something that works for my situation. Hopefully you can do something similar.
I created the following function to be called when the edit button is clicked:
var editRow = function(rowId) {
$('#' + gridId).editRow(rowId);
$('#' + gridId + '_frozen').editRow(rowId);
};
This will make the frozen columns appear editable to the user.
I created the following function to be called when the save button is clicked:
var saveRow = function(rowId) {
$('#' + gridId + '_frozen' + ' #' + rowId + ' > td').each(function () {
var col = $(this).attr('aria-describedby');
$('#' + gridId + ' #' + rowId + ' > td[aria-describedby="' + col + '"]')
.children(':first')
.val($(this).children(':first').val());
});
$('#' + gridId).saveRow(rowId);
};
This code will take the value from the frozen cell and copy it to the underlying hidden cell - which is the cell whose value is submitted on save.
I also have a cancel option, which calls the following method:
var cancelRow = function(rowId) {
$('#' + gridId).restoreRow(rowId);
$('#' + gridId + '_frozen').restoreRow(rowId);
};
UPDATE:
I found that this solution only works in IE(8), not in Chrome or Firefox. The web application I am working on only needs to be compatible with IE8, but I will try to find a solution for the other browsers as well.
Related
Trying to add a "x" in my tabs similar to the "x" in the Chrome browser tabs, to be able to click on to remove the tab. Just double checking, but it seems you can't add html markup to your tabs (not the content, but the tabs themselves), using the MVC wrappers in the BindTo method like so:
#(Html.Kendo().TabStrip()
.Name("OrderDetailsTabs")
.HtmlAttributes(new { #class="orderDtlTabs"})
.BindTo(Model, (tab, tabModel) =>
{
tab.Text = "<a class='k-link'><span>Part: " + tabModel.WOHdr.OrderDetailId +
"<button onclick='return deleteWorkOrder(" + tabModel.WOHdr.Id +")' class='delete k-button' title='Delete Work Order'></button>" +
"</span></a>"; // tab text
I know I can do some DOM manipulation after the tabs load, but just seeing if I'm missing something to do it at binding time.
Well, I ended up doing post binding DOMnastics to update the html in the tabs after they load:
function addDeleteIconToTabs() {
var $tabItems = $('ul.k-tabstrip-items > li.k-item');
$tabItems.each(function (index, tabLI) {
var strTabId = $(tabLI).attr('aria-controls');
var $tabContainerDiv = $('#' + strTabId);
var intWorkOrderId = $tabContainerDiv.find('input.wohid').val();
var strButtonHtml = "<button onclick='return deleteWorkOrder(this," + intWorkOrderId + ")' class='delete k-button' title='Delete Work Order'></button>";
$(tabLI).append(strButtonHtml);
});
}
I want to get the number of row by mouseover. This is my code :
gridComplete: function() {
var myGrid = $('#list2'),
x = myGrid.jqGrid('getGridParam', 'reccount');
//here I get the total number of rows in jqgrid
$('#list2 #popupData').mouseover(function(e) {
//here I dont know what to write and i how to get the current row number, not the ID
});
},
thx
This will work, in general, though i imagine it would not behave well with paging enabled.
beforeSelectRow:function(rowid,e)
{
alert("Row [" + rowid + "] is row number [" + $("#" + rowid)[0].rowIndex + "]");
return false;
},
But the exact code would depend on what #popupData is. are you trying to find the row number of the selected row ?
UPDATE: per discussion in comments, this is how it can be handled , changing the alert for whatever display mechanism you want
$("#popupdata").mouseover(function() {
alert( $(this).parents('tr')[0].rowIndex);
});
I am using jqGRid with subgrid configuration to display my data. I would like to have global expand & collapse button to display or hide all subgrid information. Does jqGrid library provide this feature by any means?
jqGrid has no "Expand/Collapse all". I modified the demo from the old answer which demonstrates creating on grid with local subgrids. The resulting demo you can see here:
and it has additional "+" button in the column header of "subgrids" column. If one clicks on the button all subgrids will be expanded:
I used the following code in the demo:
var subGridOptions = $grid.jqGrid("getGridParam", "subGridOptions"),
plusIcon = subGridOptions.plusicon,
minusIcon = subGridOptions.minusicon,
expandAllTitle = "Expand all subgrids",
collapseAllTitle = "Collapse all subgrids";
$("#jqgh_" + $grid[0].id + "_subgrid")
.html('<a style="cursor: pointer;"><span class="ui-icon ' + plusIcon +
'" title="' + expandAllTitle + '"></span></a>')
.click(function () {
var $spanIcon = $(this).find(">a>span"),
$body = $(this).closest(".ui-jqgrid-view")
.find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable>tbody");
if ($spanIcon.hasClass(plusIcon)) {
$spanIcon.removeClass(plusIcon)
.addClass(minusIcon)
.attr("title", collapseAllTitle);
$body.find(">tr.jqgrow>td.sgcollapsed")
.click();
} else {
$spanIcon.removeClass(minusIcon)
.addClass(plusIcon)
.attr("title", expandAllTitle);
$body.find(">tr.jqgrow>td.sgexpanded")
.click();
}
});
You can simply make it to behave like as toggle as follows.
Take a button.
onlick of it call the function, say toggleSubgrid();
function toggleSubgrid(){
if($('#YOURGRIDID td').hasClass('sgexpanded')){
$('.ui-icon-minus').trigger('click');
}
else if($('#YOURGRIDID td').hasClass('sgcollapsed')){
$('.ui-icon-plus').trigger('click');
}
}
This will work for all rows that are already loaded. You might need to scope the selector a bit, as fits your needs.
function expandAll () {
$( ".tree-plus" ).click();
};
function collapseAll () {
$( ".tree-minus" ).click();
};
I call the following function before the add dialog is shown; after clicking [+] on the JqGrid.
MVC Controller grid configuration
ordersGrid.ClientSideEvents.BeforeAddDialogShown = "initAddDialog";
The function makes an Ajax call to create a new order record either with or without a linking id, dependent on whether an existing order was selected when the [+] button was clicked.
The purpose is to make available the id necessary to make another Ajax call to retrieve additional linked information from another service, and to pre-populate the new record with date/time information and (where applicable) common information from an existing record.
function initAddDialog() {
var newOrderId = 0;
var newOrderLinkId = 0;
var selRow = jQuery('#clientOrderGrid').jqGrid('getGridParam', 'selrow');
var selRowData = jQuery('#clientOrderGrid').jqGrid('getRowData', selRow);
Get linking ID from selected row (if any)
var curOrderLinkId = (selRowData.OrderLinkId == null) ? 0 : selRowData.OrderLinkId;
Ajax call to create new 'Holding' Order
$.ajax({
url: '/Order/ajaxNewOrder?OrderLinkId=' + curOrderLinkId,
success: function (newOrderResponse) {
arr = newOrderResponse.split("|");
newOrderId = arr[0];
newOrderLinkId = arr[1];
},
error: function () { alert("There was an error creating an Order record"); }
});
If I break the code here using Firebug in Firefox, I can see that the variables newOrderId and newOrderLinkId have been set correctly with the id's from the newly created record, and if I hit F8 the (already displayed) dialog is populated with these //values.
If I don't break the code the dialog is displayed, but displays the values with which the variables were initialised i.e. newOrderId = 0, newOrderLinkId = 0.
$('#' + 'OrderId').val(newOrderId);
$('#' + 'OrderLinkId').val(newOrderLinkId);
$('#' + 'Stock').val(stock);
$('#' + 'SettlesTs').val(settlesTs);
$('#' + 'ReceivedTs').val(dtThis);
$('#' + 'ReceivedHHmm').val(dtTime);
I've tried calling the same function after the add dialog is shown, but get the same results.
Any thoughts as to why this is, or is there a better way of achieving the same result?
Thanks
I have taken the native add/edit dialog out of the equation and am using my own 'add' form along with the native inline editing of JqGrid. I'm sure with more research it would have been possible to find a solution, but with deadlines looming I had to find a workaround.
I have been working with the jqGrid a lot and everything works (sorting, reordering of columns, adding/remove columns in the columnChooser, reordering columns in the columnChooser, ...). However there is one minor thing.
It appears, the initial list of the colModel that I pass to the grid contains the columns in the order they are displayed including a list of the possible hidden columns, e.g. columns:
Id, Name, Date(hidden), AValue, BValue, CValue(hidden)
Now when I open the columnChooser, the visible columns are shown on the left in the expected order as they appear in the grid. The not visible columns appear on the right as: Date, CValue. If I remove all columns from the grid, then the order of the unselected columns on the right of the column chooser dialog is as defined in the colModel: Id, Name, Date, ...
I would like to see the selected columns in the order as they appear on the screen for reordering, but I would like to have the unselected columns on the right always appear in alphabetical order - is that somehow possible?
I had trouble getting this to work but eventually decided to add my own event handlers to the dialog to manually sort the right side.
//Add the button to the jqGrid toolbar
$('#MyGridId').jqGrid('navButtonAdd', '#MyGridToolbar', {
buttonicon: 'ui-icon-transferthick-e-w',
caption: 'Select Columns',
title: 'Select Columns',
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid('remapColumns', perm, true);
}
}
});
//Setup custom event bindings and give the right side an initial sort
BindColPickerActions($.jgrid.jqID(this.id));
SortColPickerAvailable($.jgrid.jqID(this.id));
}
});
//function to add click event bindings to the dialog actions
function BindColPickerActions(gridId) {
var colpickerId = 'colchooser_' + gridId;
//When moving an item from selected to available (Hiding)
$('#' + colpickerId + ' .selected a:not(.SortModifier)').bind('click', function(){
SortColPickerAvailable(gridId);
BindColPickerActions(gridId);
});
//When moving an item from available to selected (Showing)
$('#' + colpickerId + ' .available a:not(.SortModifier)').bind('click', function(){
BindColPickerActions(gridId);
});
//add a class to the actions that have been modified to keep track
$('#colchooser_' + colpickerId + ' .available a:not(.SortModifier), #' + colpickerId + ' .available a:not(.SortModifier)').addClass('SortModifier');
}
//function to sort the available list
function SortColPickerAvailable(gridId) {
//get the list of li items
var colpickerId = 'colchooser_' + gridId;
var available = $('#' + colpickerId + ' .available .connected-list');
var li = available.children('.ui-element');
//detatch and sort the li items
li.detach().sort(function(a, b) {
return $(a).attr('title').toUpperCase().localeCompare($(b).attr('title').toUpperCase());
});
//re-attach the li items
available.append(li);
}