I have a function that grabs the cell text values from a flexigrid where a checkbox has been checked. But I am having a problem. When I click on the master checkbox(doesnt contain any text values as it is displayed with the column titles) it craps out because of the master checkbox.
This is the error I get: Uncaught Error: Syntax error, unrecognized expression: #
Here is my function that grabs the Event Date from the Flexigrid:
function getSelectedCopyDates() {
var arr = new Array();
//for every row that has a checked checkbox
$("tr").has(".noteCheckBox:checked").each(function (i) {
//push the value of column(FName, LName) into the array
arr.push($("#" + this.id + "> td[abbr='EventDate'] > div").text());
}
});
return arr;
}
And here is a snippet of my flexigrid:
$('#viewNotesGrid').flexigrid({
url: url,
dataType: 'json',
method: 'get',
colModel: [
{ display: '<input type="checkbox" class="noteCheckBox" id="checkAllNotes" />', name: 'checkBox', width: 20, sortable: false, align: 'center', process: showDescription },
{ display: 'File ID', name: 'FileID', width: 70, sortable: true, align: 'center', process: showDescription, hide: true },
here is what it looks like:
use $("tr:has(:not('th'))") selector to select tr without master check box row
$("tr:has(:not('th'))").has(".noteCheckBox:checked").each(function (i) {
if ($("tr").has(".checkAllNotes:checked")){
arr.push($("#" + this.id + "> td[abbr='EventDate'] > div").text());
}
});
Related
I have a kendoDropDown list as a cell in my grid. I am calling the kendDropDownList using the editor command of kendo grid ("editor"). I need to pass selected value of selected row to kendoDropDownList as a parameter in order to server reply back only with filtered list as my kendoDropDownList . Please see my below example
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
columnMenu:true,
filterable:true,
height: 550,
reorderable: true,
columnReorder: function(e) {
console.log(e.column.field, e.newIndex, e.oldIndex);
},
toolbar: ["create","excel","save", "cancel" , { template: kendo.template($("#template").html()) } , { template: kendo.template($("#clearFilterTemplate").html()) } , { name: "create", text: "Add New Employee" }],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "excelExport",
filterable: true,
allPages: true
},
editable: "inline" , //editable: true,
columns: [
{ field: "fileNo" , title:"File No" , width: 80 },
{ field: "jobNo" , title:"Job No" , width: 80 },
{ field: "discipline" , title:"Discipline" , width: 80 },
{ field: "moduleNo" ,title:"Module", width: 100},
{ field: "description",title:"Title",editor: descriptionDropDownEditor, width: 150},
{ field: "documentNo",title:"Document No", width: 150 },
{ field: "remarks",title:"Remarks" , width: 150 } ,
{ command: ["edit","destroy"], title: " ", width: "250px" }
]
});
function descriptionDropDownEditor(container, options) {
// here is the error grid.select is not a function why ?
var selectedItem = grid.dataItem(grid.select());
var selectedJobNo = selectedItem.jobNo ;
alert("selectedJobNo :"+selectedJobNo );
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "text",
dataValueField: "value",
filter: "contains",
dataSource: {
dataType: "json",
transport: {
// I need to pass the selected jobNo in order to get the only aprropriate descrption for that jobNo
// each row job has description and I don't want to show all the description for all jobs , I need only for that row jobNo
read: "getDescriptionForEachDocumentIndex?selectedJobNo"+selectedJobNo
}
}
});
}
once the row of grid in edit mode I need to pass the selected row jobNo to kendoDropDownList in order to respond back with only releated description for that jobNo. The problem is i can not call grid in the edit mode and use the function grid.select() . what to do in this case ?
Well, that is easy. The second parameter of your editor function has a property called model, which is the dataItem of the current row user is editing. So in your case, I supose this would work:
function descriptionDropDownEditor(container, options) {
var selectedItem = options.model;
But, to answer your question, you can't access the select() method because grid is not a Kendo Grid object, it is in fact the #grid element. You can either add .data("kendoGrid") at the end of the widget initialization:
$("#grid").kendoGrid({ ... }).data("kendoGrid");
Or call it inside the function:
function descriptionDropDownEditor(container, options) {
var gridWidget = $(grid).data("kendoGrid");
var selectedItem = gridWidget.dataItem(gridWidget.select());
I currently have a simple extJS Grid which is pulling data from a server and presenting it to the viewer. I would like to grab the value of the selected row, and then pass it to another PHP script for processing in order to display the results in another grid.
var roleInformationStore = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'RoleInformation',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'array',
},
writer: {
type: 'json'
}
}
});
var roleInformationGrid = Ext.create('Ext.grid.Panel', {
store: roleInformationStore,
width: '100%',
height: 200,
title: 'Roles',
columns: [
{
text: 'Name',
flex: 1,
width: 100,
sortable: false,
hideable: false,
dataIndex: 'role'
}
],
listeners: {
cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
roleInformationStore.proxy.extraParams = record.get('role');
//Ext.Msg.alert('Selected Record', 'Name: ' + record.get('role'));
}
}
});
Using the listener in the current grid, I am able to get the value and show it using the alert method. Any suggestions on how to accomplish this?
Thanks
For this to work, extraParams has to be an object of key-value string pairs, because an URI has to be something like data.php?key1=value1&key2=value2.
Style-wise, Sencha advises to use getters and setters, whenever possible.
Together, you get:
var store = Ext.getStore("roleInformationStore");
store.getProxy().setExtraParam("myRoleParamKey",record.get('role'));
store.load();
In PHP, you would get the parameter then using
$role = $_GET['myRoleParamKey'];
You can of course substitute myRoleParamKey for any alphanumeric literal you want, but make sure you use the same key on both server and client side. ;-)
Docs: setExtraParam
I'm having a problem with my jqGrid.
It is using local data
It is setup to allow inline (cell editing)
When I delete a row (locally only) using the delRowData method, the row is deleted as expected. However when I delete a couple of rows, the inline cell editing seems to stop working.
When this happens I don't see any errors in the chrome debug window. I've setup a fiddle here
Here is the grid definition
$("#grid").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int",
editable : false
}, {
name: 'thingy',
index: 'thingy',
width: 90,
sorttype: "date",
editable : true,
edittype : 'text'
}, {
name: 'blank',
index: 'blank',
width: 30,
editable : true,
edittype : 'text'
}, {
name: 'number',
index: 'number',
width: 80,
sorttype: "float",
editable : true,
edittype : 'text'
}, {
name: 'status',
index: 'status',
width: 80,
sorttype: "float",
editable : true,
edittype : 'text'
}],
caption: "Stack Overflow Example",
cellEdit : true,
cellsubmit : 'clientArray'
});
Here is my delete method. I've made it as simple as I can. It just always deletes the first row.
function deleteRow() {
var ids = $("#grid").jqGrid('getDataIDs');
$("#grid").jqGrid('delRowData', ids[0]);
}
The problem is the following: cell editing of jqGrid are written so that it works mostly with row indexes (see here) instead of rowids. Some internal structures of jqGrid (savedRows and iRow options) and the id of editable cell will be assigned with the value which constructed based on the index of editable row. So after deleting of a row in the grid the information need be updated.
I modified your jsfiddle demo to the following: http://jsfiddle.net/OlegKi/wdwdxLuk/14/. It uses the following code of deleteRow called if one clicks on the button "Delete the first Row of the grid":
function deleteRow() {
var $grid = $("#grid"), editingTr, rows, iRow, editingColumnName,
p = $grid.jqGrid("getGridParam"), // get reference to object with jqGrid options
savedRows = p.savedRow, //{id:iRow, ic:iCol, name:nm, v:cellData};
colModel = p.colModel;
if ($grid.length > 0 && $grid[0].rows.length > 1) {
rows = $grid[0].rows;
editingTr = savedRows.length > 0 ? rows[savedRows[0].id] : undefined;
// delete the row
$("#grid").jqGrid('delRowData', rows[1].id); // delete the first row (rows[0] don't contains any data)
if (editingTr !== undefined) {
// update the index of the editing row
iRow = editingTr.rowIndex;
if (iRow < 0) {
// editing row way deleted from the grid
p.savedRow = [];
delete p.iRow;
delete p.iCol;
} else {
// update the row index in savedRows
editingColumnName = colModel[savedRows[0].ic].name;
$(editingTr).find("#" + savedRows[0].id + "_" + $.jgrid.jqID(editingColumnName))
.attr("id", iRow + "_" + editingColumnName);
savedRows[0].id = iRow;
// update row index of selected row
p.iRow = iRow;
}
}
}
}
My JQGrid cloumns like,
colNames: ['Job ID', 'MailId','Save'],
colModel: [
{ name: 'JobId', index: 'JobId', width: 120, align: 'left', editable: true },
{ name: 'MailId', index: 'MailId', width: 150, align: 'left', editable: true },
{
name: 'Save', index: 'Save', width: 100, sortable: false,
formatter: function (cellvalue, options, rowObject) {
return "Save";
}
}
I create the Save link button at the end of JQGrid cell.
I need to pass clicked row's JobId and MailID to jquery function when click the link button in a row.How to do this?
In the above example you have given, the rowObject parameter in the formatter function will hold all the values in that row. So can use rowObject.JobId for your JobId and rowObject.MailId for your MailId.
I would recommend you to use beforeSelectRow (or onCellSelect) to detect click on <a> in the "Save" column. The answer explains what you can do. Another answers: this one and this one could be also interesting for you.
In your case beforeSelectRow could looks like below
beforeSelectRow: function (rowid, e) {
var $self = $(this),
iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
cm = $self.jqGrid("getGridParam", "colModel");
if (cm[iCol].name !== "Save") {
return true;
}
alert ($self.jqGrid("getCell", rowid, "JobId"));
return false;
}
Additionally you should consider which value you use as id in the input data. The value build so name rowid - the value of id attributes of <tr> elements (the rows of the grid). If for example either JobId or MailId (one from the two columns) contains unique values for every row then you can use the value from the column as the rowid. To do this you need just add key: true to the corresponding column.
I have my grid with multiselect = true, something likes this, you can click each checkbox and then delete, when I delete my first row I know the method selarrrow creates and arrays It just delete, but when I want to delete the second row It just never do the delRowData method, and when I select multiple checkbox It just delete the first. I think my method is looping over and over againg each time and never delete at least visually the other row, how can I fix it?? any advise thanks
this is my method:
onSelectRow:function(id) {
$("#mySelect").change(function (){
if(($("#mySelect option:selected").text()) == 'Deleted') {
var id = $("#list2").getGridParam('selarrrow');
for(var i =0; i<id.length;i++) {
$("#list2").jqGrid('delRowData',id[i]);
}
});
}
html
</head>
<body>
<div>
Move to:
<select id="mySelect">
<option value="1">Select and option</option>
<option value="2">Trash</option>
<option value="3">Deleted</option>
</select>
</div>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
js
$("#Inbox").click(function () {
$.post('../../view/inbox.html', function (data) {
$('#panelCenter_1_1').html(data);
$("#list2").jqGrid({
url: '../..controller/controllerShowInbox.php',
datatype: 'json',
colNames: ['From', 'Date', 'Title', 'Message'],
colModel: [
{ display: 'From', name: 'name', width: 50, sortable: true, align: 'left' },
{ display: 'Date', name: 'date', width: 150, sortable: true, align: 'left' },
{ display: 'Title', name: 'title', width: 150, sortable: true, align: 'left' },
{ display: 'Message', name: 'message', width: 150, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'From', name: 'name' },
{ display: 'Date', name: 'date' },
{ display: 'Title', name: 'title' },
{ display: 'Message', name: 'message' },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id_usuario',
viewrecords: true,
sortorder: "desc",
caption: "Inbox",
multiselect: true,
multiboxonly: true,
onSelectRow: function (id) {
$("#mySelect").change(function () {
if (($("#mySelect option:selected").text()) == 'Trash') {
var id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else if (($("#mySelect option:selected").text()) == 'Deleted') {
id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else {
}
});
}
});
});
});
You code looks very strange for me. I can't explain the effects which you describe without having the demo code, but I could point you to some places in the code which should be rewrote.
First problem: you use id parameter in the line onSelectRow:function(id) and then use the same variable name id to declare var id = $("#list2").getGridParam('selarrrow');. I don't understand why you do this. If you don't need parameter of onSelectRow you can just use onSelectRow:function() which will make the code more clear.
Second problems: you use binding to change event in $("#mySelect").change, but you use the statement inside of another event onSelectRow. So on every row selection you will have one more event handler to the change event. For example you would replace the body of $("#mySelect").change(function (){ to alert("changed!"). Then you would select two different rows and change the option in the "#mySelect". You will see two alerts. Then you select another row and change the option in the "#mySelect". You will see three alerts. And so on.
So you should rewrote your code in any way. If you will still have the same problem you should include full demo code (including HTML code with <select id="mySelect">...) which can be used to reproduce your problem.
I use a different approach. I build a vector of selected row ids and then process 'em with a single batch statemente server side then reload the grid.
More or less the code is.
var righe = $(nomeGrigliaFiglia).getGridParam("selarrrow");
if ((righe == null) || (righe.length == 0)) {
return false;
}
var chiavi = [];
for (var i = 0; i < righe.length; i++) {
var Id = righe[i];
var data = $(nomeGrigliaFiglia).jqGrid('getRowData', Id);
// Process your data in here
chiavi[i] = new Array(2)
chiavi[i][0] = data.FieldKey;
chiavi[i][1] = data.FieldChildId;
}
Note that I'm using this to actually send a int [][] to a C# Action
multiselect: true,
in your data process php $SQL .= "DELETE FROM ". $table. " WHERE no in ($_POST[id]);" ;