I want to retrieve a particular column name and perform an event on that . how to do that . ? using dojox.grid.datagrid. Like currently i have 3 columns or fields in my grid(ID, names,Email). I want that for a particular column Email. When i click any value under that column the dialog box should not open. But when i click on any where else(on other 2 columns on a particular row) it opens up.
You can connect grid's onCellClick event and get row/col info from the argument. For example:
dojo.connect(grid, "onCellClick", function (e) {
var colField = e.cell.field; // field name
var rowIndex = e.rowIndex; // row index
....
});
And add your logic in the event handler based on those informations.
if you want the dialog to open upon clicking a value in that column (and not the entire cell, which includes whitespace in the cell), then you can use the format function for that field and return a HTML that is an anchor element or any other HTML that is clickable.
for example:
in the grid structure:
columns: [{
label: "Email",
attr: "emailid",
formatter: formatEmail
},
...
function formatEmail(data, item, store) {
return "<a href='mailto:" + data + "'>" + item.nameOfPerson + "</a>";
}
Related
I have a Listbox that I need refreshed after a user selects an option in DropdownList.
Image is self explanatory. If one selects Department -> load list of departmetns in Listbox, if one selects Vat Rate refresh/load list of vat rates into the listbox below. (Default department list is loaded on page load). I am currently attempting this with trigger("chosen:updated") and having no luck refreshing listbox. Here is my code for that functionality.
$(function () {
$("#SelectFilter").change(function () {
if (document.getElementById('SelectFilter').value == 1) //dropdownlist
{
//empty listbox
$('#SelectItems').empty();
//append new list to listbox
$.each(data.Departments, function (index, element) {
$('#SelectItems').append('<option value="' + element.Value + '">'
+ element.Text + '</option>');
});
//refresh
$('#SelectItems').trigger("chosen:updated");
}
if (document.getElementById('SelectFilter').value == 2)
{
$('#SelectItems').empty();
$.each(data.VatRates, function (index, element) {
$('#SelectItems').append('<option value="' + element.Value + '">'
+ element.Text + '</option>');
});
$('#SelectItems').trigger("chosen:updated");
}
});
});
Recognising the selected value from the dropdownlist isnt an issue, that works fine. Listbox is currently not getting updated/refresh with new selection. And I cannot figure out were I am going wrong with this.
Try to put all your code for creating the list into a function, and then bind an event on chosing one of the selected items to call this function which generates a new list instead of using .trigger(). If you provide the HTML part as well, I'll post example code soon.
It's not clear to me if you have a problem with recognizing the selected value, or with populating the secondary select tag, or with the initial loading of the data. So I am providing an example of the three steps.
First, to detect the selected value, you need to provide a .change() handler and extract the selected value with .val(). Something similar to this:
$("#SelectFilter").change( function() {
var v = $(this).val();
if (v=="value1") {
} else if (v=="value2") {
} else {
}
});
then each of the changes detected has to refresh the contents of the secondary select tag, something as simple as this...
$("#SelectItems").empty();
['first item','second item','troisième'].forEach( (v,i) =>
$("#SelectItems").append($("<option>").val("item"+i).text(v))
);
}
And finally triggering the initial load should be as simple as triggering a change event
$("#SelectFilter").change();
I have put all the steps together in this fiddle https://jsfiddle.net/mud9u8yL/6/
I have two jqgrids setup and can drag from 'master' to 'target' grids. The row I drop into the 'target' grid is not saved to the database and has a generated, unique ID (prefixed with "new_"). I have a custom pager button that deletes the selected row. For saved rows, the event deletes the item from the database and reloads the grid. This works fine. However when I want to remove a dragged row that is NOT saved to the DB the row is not removed.
Here is my button function:
onClickButton: function () {
var deleteId = tgtGrid.getRowData(tgtGrid.getGridParam('selrow'))['ID'];
if (!deleteId) {
return false;
}
// remove an added row, not saved in DB
if (deleteId.indexOf('new_') != -1) {
tgtGrid.jqGrid('delRowData', deleteId);
} else {
// remove account saved in DB
$.post( url, { id: deleteId }, function (responseData) {
if (!responseData.success) {
// error here
} else {
// success here
tgtGrid.trigger('reloadGrid');
}
});
}
}
If I set up the button to use 'delRowData' on the saved row tgtGrid.jqGrid('delRowData', deleteId); it returns true and the row is removed from the grid (not the DB, as expected).
How do I remove a dropped row?
I found the problem lies within jqgrid and how it looks for the element to remove. The tgtGrid.getRowData(pager.getGridParam('selrow'))['ID'] will return the ID or column you set as the key in the column model. However, jqgrid looks at the <tr> element's ID for removing rows and this does not match in dropped rows. For data you load from a DB, the <td> element containing the ID/key will have a matching id attribute as the enclosing <tr> element. For dropped rows the <td> element is what you would expect but the enclosing <tr> element has a generated id attribute with the value "dnd_#" where # is some generated random number. Therefore you need to get this id to remove dragged and dropped rows that have not been saved to the data source. Below is the solution I came up with
var trId = $('td[title="' + deleteId + '"]').closest('tr').attr('id');
tgtGrid.jqGrid('delRowData', trId);
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");
});
I have a page with a jqGrid in it. Is has to be multiselect:false because I have to allow only one row to be selected, but I also need to select multiple rows (i.e. I want to have many rows marked but only one active).
So I've created a grid whith multiselect:false and a checkbox row with formatter: 'checkbox'
I've also created a master checkbox in the collumn header (the 'name' of the collumn in the colNames is <input id="cbSelectAll" type="checkbox">)
To change all the rows at once when the header is clicked I've created the function:
$('#cbSelectAll').click(function (e) {
var valor = $(this).is(':checked');
$.each($('#grid input[type="checkbox"]'), function (idx, elm) {
var id = $(elm).closest('tr').attr('id');
var cb = $('#' + id + ' td').children().first();
$(cb).attr('checked', valor);
selectedRows[id] = valor;
});
/* other non relevant code */
});
Now that's my problem.
This function works nicelly when I try to unselect the checkbox's but when i try to select then it only works in the first time. On the subsequent clicks the checked attribute is changed but the box is not visually changed.
Instead of attr, try using prop
Please have a look at this similar issue