I'm using the jqGrid columnChooser, like so:
jQuery(grid).jqGrid(
'navButtonAdd',
pagerDiv,
{
caption: "Columns",
buttonicon: "ui-icon-newwin",
title: "Hide/Show Columns",
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
$(this).jqGrid('remapColumns', perm, true);
}
},
modal: true,
width: 400,
height: 300,
classname: 'column-chooser-select'
});
}
}
);
and was wondering if there was a way to specify an event handler on the columnChooser (using the jQuery UI Multiselect plugin that comes w/ jqGrid) that fires any time a column is either added or removed. So I guess it's a two-part question:
does the jQuery UI Multiselect support such a thing?
if so, is there a way to hook it up without altering the jqGrid source?
A bit of background on what I'm trying to achieve:
My default grid configuration hides many columns. Some of these columns are not populated from the db - they are obscure, rarely used data elements that if populated would dramatically decrease the query execution performance (multiple joins involving tables with 100 million plus records).
Should a user pick one of these columns for display i'd like to warn them that another roundtrip to the server is required and it could take a while - and give them the option to cancel the column addition.
Thanks
I think I understand your problem and find your question interesting, so I wrote the demo for you which shows how one can solve the problem.
columnChooser uses jQuery UI Multiselect plugin internally which uses jQuery UI Sortable. So I suggest to use sortreceive event of the jQuery UI Sortable to catch the information needed.
The code can be the following
$("#grid").jqGrid('navButtonAdd', '#pager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
.bind("sortreceive", function (event, ui) {
alert('column "' + ui.item.text() + '" is choosed');
});
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
.click(function () {
alert('column "' + $(this).parent().text() + '" is choosed');
});
}
});
See the demo here.
The code bind 'click' event on the "+" for the initial list of the columns which was in the column chooser at the initialization time of the dialog. I think it would be sufficient for you. If needed you can easy modify the code to support the 'click' on the "+" for the columns which will be removed from the left list during the work with the columnChooser.
I almost forget to mention that I used in the demo improved version of the columnChooser (see the answer), but my above suggestion works with the original version of columnChooser too.
I am using the below code in JqGrid for column chooser plug-in. when i tick the select All check box in the grid. I want to exclude particular column ( by default it should not display in my grid).
I used hidden=True property in col model. buy i want to handle these in column chooser also.
function Properties_Columnchooser() {
$('#btn_setColumns').click(function () {
jQuery('#grid-tableProperties').jqGrid('columnChooser',{
"shrinkToFit" : true,
"autowidth" : true,
done : function(perm) {
w = $(window).width();
// alert('done ' + w);
if (perm)
{
this.jqGrid("remapColumns", perm, true);
this.setGridWidth(w - 30, true);
$('.ui-search-input').show();
}
else
{
}
}
}
);
});
}
Related
How do get the underlying data from a row click on a grid?
My code looks like this :
isc.ListGrid.create({
ID: "countryList",
width:1500, height:224, alternateRecordStyles:true,
data: sampleData,
fields:[
{name:"id", title:"Id"},
{name:"name", title:"Name"},
{name:"version", title:"Version"},
{name:"release", title:"Release"},
],
canReorderFields: true,
click: function (x) {
alert('hi there' + x)
}
})
If I add a click function, the alert pops up.
If put in a paramater 'x', and that seems to have some kind of value, but i can't decipher it means. What I really want is the underlying JSON data (see below) which is being passed in as sampleData.
{
id:"10621",
name:"PimsPacket020",
version:"0.1",
release:"undefined",},
{
id:"10621",
name:"PimsPacket020",
version:"0.1",
release:"undefined",
}
I haven't been using Smartclient for quite some time, but, I think a better selection event for a grid row would be:
selectionChanged: "someFunction(this.getSelection())"
The this.getSelection() function will return an array of records even for a single selection.
For more information I suggest using the Smartclient on-line documentation( Smartclient 9.1 Documentation) and feature explorer(Smartclient Feature Explorer) together. This code work on earlier versions; from 8.x at least.
I hope this helps.
if your list contains chexbox (selectionAppearance: "checkbox") you have to use this.getSelection() that contain all selected items.
or you make a function with record parameter:
click: function (record) {
isc.say ("ID:" + record.id + "Name:" + record.Name);
}
Use this function to retrieve your record
recordClick: function (viewer, record, recordNum, field, fieldNum, value, rawValue) {
alert('hi there' + record.name);
}
For more information, please refer smartclient documentation
http://www.smartclient.com/docs/8.2/a/b/c/go.html#method..ListGrid.recordClick
I am using bootstrap multiselect in my angular application. (Bootstrap 2.3)
http://davidstutz.github.io/bootstrap-multiselect/index-2-3.html#examples
I want to convert the same thing in to bootstrap typeahead but still the user can multiselect values in search results.
I am using the highlighter function of bootstrap typeahed to add check-boxes to results.
I am referring to the this plnkr http://plnkr.co/edit/szO2An1oslDyGftnshyR?p=preview but I am still unable to make my code work.
Old Code for multiselect:
to check last selected values
$scope.selectOptions = function () {
var index = fetching the index of checked values;
var selectedAttrFound = index>-1;
if (selectedAttrFound == true) {
angular.element("#attr-value-selector")
.multiselect('select', $scope.filterAttributes[index].attributeValues);
}
};
to populate the multiselect
$scope.attrValuesWidget = angular.element("#attr-value-selector")
.multiselect({
numberDisplayed: 2,
enableFiltering: true,
maxHeight: "300",
onChange: function (element, checked) {
$scope.attributeActionValue = {
attribute: $scope.attributeSelected,
value: element.val(),
checked: checked
};
$scope.$apply();
}
})
.multiselect('dataprovider', $scope.configAttributeValuesList);
The Select box
<select id='attr-value-selector' multiple='multiple' ></select>
Although you can easily add checkboxes in your highlighter function..
highlighter: function( item ){
var bond = bondObjs[ item ];
return '<div class="bond">'
+'<input type="checkbox" class="mightBeRequiredToCollectTheSelectedResult">'
+'<img src="' + bond.photo + '" />'
+'<br/><strong>' + bond.name + '</strong>'
+'</div>';
}
The problems are;
typehead.js automatically closes its result after you click one of
the search result. You need to override this first.
Then you also need to list the selected values into the textfield.
If you check typehead.js github issues page, issue #254 mentioned that they don't have plan to support multi select, at least for now.
Now I might get downvoted for this, but If I were you I'll consider other alternatives as well.
https://github.com/isteven/angular-multi-select: pure AngularJS, ability to rest selection.
http://ivaynberg.github.io/select2/: rich configuration options
Or the old reliable "chosen" library (I can't post more links)
Hope it helps. Cheers.
I am creating a jqgrid with editable fields. I have 2 checkbox columns in jqgrid, one is coming from multiselect: true (to get unique rowId), other column is created inside column model.
I want to handle the onchange(checked/unchecked) event of the checkbox in my column model, independent of other checkbox column(multiselect:true). Any help appreciated. Below is the code snippet.
[{name : "userRole", label: 'OV', width: 40, editable:true, edittype:'checkbox',formatter: 'checkbox', editoptions: {value:"True:False"},
formatoptions: { disabled: false},frozen:true}]
multiselect: true,
onSelectRow: function(rowid){
jQuery(this).editRow(rowid, true);
}
You can use beforeSelectRow callback. The demo demonstrate the approach. It uses the following code
beforeSelectRow: function (rowid, e) {
var $target = $(e.target), $td = $target.closest("td"),
iCol = $.jgrid.getCellIndex($td[0]),
colModel = $(this).jqGrid("getGridParam", "colModel");
if (iCol >= 0 && $target.is(":checkbox")) {
alert("checkbox is " +
($target.is(":checked")? "checked" : "unchecked") +
" in the column \"" + colModel[iCol].name +
"\" in the row with rowid=\"" + rowid + "\"");
}
return true;
}
Define your own formatter function like this in your colmodel,
[{name : "userRole", label: 'OV', width: 40,
editable:true, edittype:'checkbox',formatter: checkboxFormatter,
editoptions: {value:"True:False"},
And your formatted checkbox like,
function checkboxFormatter(cellvalue, options, rowObject) {
return "<input type='checkbox' name='checkboxIsCC'
onchange='your_own_function();'>";
}
Hope this helps you.
I had an issue were not only I had more than 1 check box but also I had to update same column check box values based on the selection of the check box as well as modifying the same row columns.
In regards to the modification of the other checkboxes, when jqgrid modifies the data either by 'setCell' or 'setRowData' operations, it removes the click event. Also there is the problem that for checkboxes none of the edit functions are useful.
I manage to get bits from other people's solution and came to use the delegate jquery functions, that allows the binding of the click to be done each time an object that matches the selector is created. Also in this case only 1 checkbox of only 1 column could be checked at a time.
$(document).delegate("#alarmDownloadListView td[aria-describedby*='stopArm'] input", 'click', function () {
// Function that modifies all the other checkboxes of the same column
deselectOthersStopArmAlarms(this, j);
// Set the Pre and Pos Alarm values to default
var fileIndex = $(this).closest('tr').index();
// Modification of the same row cells
if($(this).is(':checked')){
alarmsGrid.jqGrid('setCell',fileIndex,'preAlarm', defaultPrePosStopArmAlarmValue);
}else{
alarmsGrid.jqGrid('setCell',fileIndex,'preAlarm', null);
}
});
Do not mind the exact operations of the code, what is important is the operations that the binded function does. The CSS selector binds this function to all checkboxes whose name in my colmodel is stopArm.
I hope this answer is useful for some people. I found the delegate to be very useful! :)
I have an editable Kendo Grid that may have a column with a checkbox to change a boolean value. I have used this solution proposed by OnaBai that is working perfectly!
The only problem is that the checkbox value change is too slow. When user clicks it, it takes about 1 second to change. I realize that the dataItem.set() method is responsible by this delay.
My grid has a considerable amount of data. About 30-40 columns and 300+ lines. It is defined as follows:
$("#mainGrid").kendoGrid({
dataSource: dataSource,
pageable: false,
sortable: true,
scrollable: true,
editable: true,
autoBind: false,
columnMenu: true, // Cria o menu de exibição de colunas
height: getGridHeight(),
toolbar: [/* hide for brevity */],
columns: [/* hide for brevity */],
dataBound: function() { /* hide for brevity. */},
edit: function() { /* hide for brevity. */}
});
Another detail is that, when dataItem.set() is called, it calls dataBound() event but that is not causing the delay. Grid's edit() method is not being called on this process. I don't know if worths to post dataSource code.
I would suggest using the approach from this code library article when it comes to use checkboxes. It does not use the set methods of the model and still works the same way. Even with 2000 records on a single page CheckAll will work flawlessly.
I have found an alternative way for doing what OnaBai proposed and it's working better.
// This is the grid
var grid = $("#mainGrid").data("kendoGrid");
// .flag is a class that is used on the checkboxes
grid.tbody.on("change", ".flag", function (e)
{
// Get the record uid
var uid = grid.dataItem($(e.target).closest("tr")).uid;
// Find the current cell
var td = $(e.target).parent().parent();
// This opens the cell to edit(edit mode)
grid.editCell(td);
// This ones changes the value of the Kendo's checkbox, that is quickly shown,
// changed and then hidden again. This marks the cell as 'dirty' too.
$(td.find("input")[0]).prop("checked", $(e.target).is(":checked") ? "checked" : null).trigger("change").trigger("blur");
}
Should try something like this:
I'll set the column with the Edit button to look like this:
columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);
And have it where clicking into the first column (I have an image with a hyperlink) uses an onclick function to programmatically click the Edit button, click the checkbox, then click the Update button. Probably more "old school", but I like knowing it is following the order I would be doing if I were updating it, myself.
I pass in the object ("this"), so I can get the row and checkbox when it appears, the new status as 0 or 1 (I have some code that uses it, not really necessary for this demo, though, so I'm leaving that part out of my function for simplicity), and the ID of that item:
columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");
function changeCheckbox(obj, status, id) {
var parentTr = obj.parentNode.parentNode;
$('[id="btnEdit_' + id + '"]').click();
parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
$('[id=chkbox_' + id + ']').click().trigger("change");
$('[id=chkbox_' + id + ']').blur();
var btnUpdate = $('[id="btnUpdate_' + id + '"]');
$('[id="btnUpdate_' + id + '"]').click();
}
Code above assumes, of course, the checkbox is in the first column. Otherwise, adjust the first childNodes[0] on that chkbox setAttribute line to the column it sits in, minus one because it starts counting from zero.
I did a solution much like #DontVoteMeDown. But I have a nested grid (master / detail) so I get the parent grid from the event parameter. Also I just trigger a click-event on the checkbox.
$("#grid .k-grid-content").on("change", "input.chkbx", function (e) {
// Get the parent grid of the checkbox. This can either be the master grid or the detail grid.
var parentGrid = $(e.target).closest('div[data-role="grid"]').data("kendoGrid");
// Get the clicked cell.
var td = $(e.target).closest("td");
// Enter the cell's edit mode.
parentGrid.editCell(td);
// Find the checkbox in the cell (which now is in "edit-mode").
var checkbox = td.children("input[type=checkbox]");
// Trigger a click (which will toggle check/uncheck).
checkbox.trigger("click");
});
My flexigrid is setup. All I need is an event that gets called when the user clicks on a row. From there, I will send the user to another page based on the data contained in that row. But I can't seem to find any examples on how to do this.
I'm looking for a clear example on how to handle row onclick events using flexigrid.
I'm also interested in any other javascript table frameworks that could be used in this situation. I've been taking a peek at DataTables and it looks like it may be a better alternative (and the project appears to be more active)
In the initial setup for the flexigrid, add the attribute process: procMe to the column model. Example:
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
and then create a callback:
function procMe( celDiv, id ) {
$( celDiv ).click( function() {
alert( id );
});
}
A better solution
Adding process to colModel didnt work for me.
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
this solution below is what I'm using:
var gridRows = $("#data-grid tbody tr");
gridRows.click(function (event) {
displaySelectedItem($(this).attr('id').substr(3));
return false; //exit
});
Flexigrid column as link
colModel: [
{
display: 'DomainName', name: 'DomainName', width: 180,
sortable: true, align: 'left',
process: function (col, id)
{
col.innerHTML = "<a href='javascript:domainEdit(" + id + ");'
id='flex_col" + id + "'>" + col.innerHTML + "</a>";
}
}]
Link Function
function domainEdit(domainID) {
alert('domainID' + domainID);
}
I think this variant little better than whoabackoff
$('.TableName').click(function(event){
$('.res').html('dbl');
alert('dbl');
});
does this help? http://www.flexigrid-asp.net/demo/updatepanel.aspx
you can have a look at it with firebug, to see where the event is hooked.
keep in mind that the flexigrid.js file is a bit different than the one from the official project.