Delete, No url is set in jqgrid - asp.net-mvc

I'm using jqgrid and when deleting a row in the grid i get the alert "Delete selected record?" and when i click ok i have written a code in onClickSubmit to make a ajax call to the controller which takes some parameters and delete the record. The functionality works fine.
But when i click "Delete" button in the alert i get an error "No url is set". Now, i have a url inside my ajax call which does the function. Why is the error thrown?
jqGrid:
var selectedRowId = "125";
$("#AttachmentsGrid").jqGrid({
url: '#Url.Action("LoadTransactionAttachments", "Home")',
postData: { 'transactionId': selectedRowId },
mtype: 'GET',
datatype: 'json',
jsonReader: {
id: 'AttachmentId',
repeatitems: false
},
height: 'auto',
hidegrid: false,
rownumbers: true,
autowidth: true,
shrinkToFit: false,
rowNum: 10,
pager: '#AttachmentsPager',
caption: "Attachments",
colNames: ['AttachmentName'],
colModel: [{ name: 'AttachmentName', index: 'AttachmentName', formatter: imageFormatter, unformat: imageUnFormatter }],
beforeRequest: function () {
responsive_jqgrid($(".jqGrid"));
},
onSelectRow: function (id) {
var statusId;
attachmentId = id;
var selectValues = jQuery('#AttachmentsGrid').jqGrid('getRowData', id);
attachmentName = selectValues.AttachmentName;
if (accessLevel.HasDeleteAttachmentAccess == true)
$("#del_AttachmentsGrid").show();
else
$("#del_AttachmentsGrid").hide();
},
loadComplete: function () {
UnBlockUI();
}
});
jQuery("#AttachmentsGrid").jqGrid('navGrid', '#AttachmentsPager', {
edit: false, add: false, del: true, search: false, refresh: true, refreshtext: ""
}, {}, {}, {
// url: '#Url.Action("UpdateDummyData", "Home")',
// Delete attachment event.
onclickSubmit: function (response, postData) {
$.ajax({
url: '#Url.Action("DeleteSelectedTransactionAttachment", "Home")',
datatype: 'json',
data: { 'attachmentId': JSON.stringify(postData), 'attachmentName': attachmentName, 'transactionId': selectedRowId },
type: 'POST',
success: OnCompleteDeleteAttachments,
error: function (xhr, status, error) {
if (xhr.statusText == "Session TimeOut/UnAuthorized") {
alert(xhr.statusText);
window.location.href = '#Url.Action("LogOut", "Account")';
}
else
alert(xhr.responseText);
}
});
It works when i give some Dummy url in delete method which i dont need. I need another way to solve this.?
FYI, This happens for me also during the edit of a row using form editing.

It seems to me that you try to use Delete in a wrong way. What you do is making Ajax request to '#Url.Action("DeleteSelectedTransactionAttachment", "Home")' with some additional data, do some unknown additional action inside of OnCompleteDeleteAttachments in case of successful deleting and do additional error handling in case of "Session TimeOut/UnAuthorized" error in statusText.
I think that correct implementation should looks more as the following
jQuery("#AttachmentsGrid").jqGrid('navGrid', '#AttachmentsPager', {
edit: false, add: false, search: false, refreshtext: ""
}, {}, {}, {
url: '#Url.Action("DeleteSelectedTransactionAttachment", "Home")',
serializeDelData: function (postData) {
return {
attachmentId: JSON.stringify(postData),
attachmentName: attachmentName,
transactionId: selectedRowId
}
},
errorTextFormat: function (xhr) {
if (xhr.statusText == "Session TimeOut/UnAuthorized") {
window.location.href = '#Url.Action("LogOut", "Account")';
} else {
return xhr.responseText;
}
},
afterSubmit: OnCompleteDeleteAttachments
});

Related

I am having trouble with DataTable not working (ajax doesn't fire off)

I am following this tutorial:
https://gist.github.com/ChinhP/9b4dc1df1b12637b99a420aa268ae32b
I have a problem where the ajax won't fire. Any suggestions?
I am trying to get a table with a previous, next, first and last button.
var data = { "number": 0, "currentPosition": 1 };
console.log(JSON.stringify(data));
//var output = "";
/*$.ajax('/Companies/GetData', {
datatype: 'json',
contentType: 'application/json',
type: 'post',
data: JSON.stringify({ dataTableParameters: data }),
success: function (response) {
output = response;
}
});*/
$(document).ready(function () {
$('#CompanyTable').dataTable(
{
"sPaginationType": "full",
processing: true,
bserverSide: true,
ajax: {
"url": "../Companies/GetData",
"type": "POST",
"contentType": "application/json",
data: function (d) {
console.log('enter');
// note: d is created by datatable, the structure of d is
the same with DataTableParameters model above
console.log(JSON.stringify(d));
return JSON.stringify(d);
},
success: function (response)
{
console.log(response)
}
}
});
});

Refreshing data in ui-grid

In my screen I have a ui-grid that need be load when the user click in button "search".
I'm making this:
// Ajax call
$("#btn-Pesquisar").click(function () {
var form = $('#frm-Pesquisar-Acos-Internos');
$.ajax({
cache: false,
async: true,
type: "POST",
url: form.attr('action'),
dataType: "json",
data: form.serialize(),
success: function (result) {
angular.element(document.getElementById('grd-Resultado')).scope().atualizarRegistros(JSON.parse(result));
$('#divResultadoPesquisa').show();
}
});
});
When the call ocurred with success, I call a function called "atualizarRegistros"
$scope.atualizarRegistros = function (result) {
$scope.grdResultado.data = result;
}
This is a definition from my grid:
$scope.grdResultado = {
showGridFooter: true,
enableSorting: true,
enableFiltering: true,
enableColumnResizing: true,
enableGridMenu: true,
columnDefs: [
{ name: 'Código', field: 'COD_GRUPO_ACO', minWidth: 48 },
{ name: 'Norma', field: 'COD_IDENT_NORMA', minWidth: 60 }
]
};
the result is:
[{"COD_IDENT_ACO":"C0981","COD_GRUPO_ACO":"C","COD_SUBGR_ACO":"0","COD_GRUPO_SUCAT":"04","COD_GRUPO_CUSTO":"36","COD_IDENT_FMACO":"5XX","NOM_IDENT_ACO":"P595R","COD_SITUA_ACO":"A","IDC_ACO_TRANS":"N","DTH_INCLU_REG":"2005-11-23T12:13:36","COD_IDENT_USUAR":"AC42911","COD_UNMED_PESES":"G/CM3","COD_GRUPO_ENCHA":null,"COD_ACO_MATPR":null,"COD_SERIE_ACO":null,"COD_IDENT_NORMA":"ACE","COD_TIPO_ACO":"P595R","NOM_ABREV_ACO":"595R","VLR_DIAME_IDEAL":null,"VLR_PESO_ESPEC":7.850,"VLR_TEMT1_LINGO":null,"VLR_TEMT2_LINGO":null,"TEX_OBSER_ACO":"Adição
de Ca-Si para globulizar inclusões, processo de desgazeificação no
VOD, projeto Flapper Valve.","VLR_TEMTP_LINGO":null,"DESC_ACO":"P595R
- ACE"}]
But when the method is executed, I get this error:
newRawData.forEach is not a function at Grid.modifyRows
I don't know what i can do now.
Help-me!
I'm not sure but can you check, if the data gets an array.
Greets Christian

jqxgrid not displaying busy or loading indicator

I am using jqxgrid and I have below code snippet and i want to display load indicator on button click which calls the Ajax method and hide it on the success method or anyway other to display it as i need to show loading indicator from the time request made till i get the data
$("#btnSearch").bind('click', function () {
//show indicator here
LoadLookUpSearchGrid();
}
//Ajax call to fetch data
function LoadLookUpSearchGrid() {
var filterRows = getGridRows();
$.ajax({
type: 'POST',
dataType: 'json',
async: false,
cache: false,
url: 'AddEditView.aspx/LoadLookUpSearchGrid',
data: JSON.stringify({ FilterType: $('select#ddlFilterType').val() , Id: $("#txtId").val() , Name: $("#txtName").val(), SearchText: '', FilterRows: filterGridRows}),
contentType: 'application/json; charset=utf-8',
success: function (data) {
var source = data.d;
SetSearchFields($('select#ddlFilterType option:selected').text(), source);
},
error: function (err) {
alert(err.text + " : " + err.status);
}
});
};
//source object to format data
function SetSearchFields(fieldName, source) {
var columns;
if (fieldName == "Operating Company") {
source =
{
datatype: "xml",
datafields: [
{ name: 'COMPANY', type: 'string' },
{ name: 'DESCR', type: 'string' }
],
async: false,
root: "Company",
localdata: source
};
columns = [
{ text: 'OPCO ID', dataField: 'COMPANY', width: '30%' },
{ text: 'Company Name', dataField: 'DESCR', width: '65%' }
];
}
lookupSearchResultGrid(source, columns,fieldName);
}
//adaptor to fill source and bind grid
function lookupSearchResultGrid(source, columns,fieldName) {
var searchViewGridDataAdapter = new $.jqx.dataAdapter(source);
$("#divLookupSearch").jqxGrid(
{
width: '100%',
source: searchViewGridDataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
selectionmode: 'checkbox',
columns: columns
});
//hide indicator here on on success method of ajax call
};
On the click of the button call showloadelement and in the Ajax call success callback function call hideloadelement.
$("#btnSearch").bind('click', function () {
$('#divLookupSearch').jqxGrid('showloadelement');
//show indicator here
LoadLookUpSearchGrid();
}
...
success: function (data) {
$('#jqxGrid').jqxGrid('hideloadelement');
var source = data.d;
SetSearchFields($('select#ddlFilterType option:selected').text(), source);
},
...
Best Regards,
Alpesh

Simple jqgrid Delete in MVC

I've been trawling across the web for answers, and maybe it's a case of it being more complicated than I expect (or I just don't understand the solutions), but I am looking for a way to simply delete a selected row from my jqgrid by clicking the trash icon.
Currently my grid is being populated with Linq to SQL data.
Here is my grid:
jQuery("#grid").jqGrid({
url: '<%= ResolveUrl("~/Home/GetData") %>',
datatype: "json",
mtype: 'GET',
postData: { DDLid: function () { return jQuery("#DDL option:selected").val(); } },
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', width: 200, editable: false },
{ name: 'Col2', index: 'Col2', width: 200, editable: false }
],
jsonReader: {
repeatitems: false
},
rowNum: 10,
pager: jQuery('#gridpager'),
sortname: 'Type',
viewrecords: true,
sortorder: "asc",
caption: "Table"
}).navGrid('#gridpager', { del: true, add: false, edit: false, search: false }, {}, {}, {url: "Delete"});
Now the 'id' in post data is NOT the primary key in this table - I just need it to help populate the grid.
What I would like to get is the selected row id and pass it to the Delete method, but I can't find any way to do that.
I have tried using jQuery("#grid").getGridParam('selrow') in the postData but it always returns null.
Any help would be greatly appreciated.
Here is my delete method, for reference:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(int DDLid)
{
int row = Convert.ToInt32(/*I NEED THIS ID*/);
var query = from x in _ctx.DataTable
where ((x.id == row))
select x;
_ctx.DataTable.DeleteOnSubmit(query.Single());
_ctx.SubmitChanges();
return Json(true);
}
This method is called and is fine, but I am getting the wrong id. I need the selected row's id. This breaks because the DDLid returns more than one row (since it is used to populate the grid).
I hope that makes sense.
I discovered where I would pass the selected index (but then I realised I was looking for the primary key, rather than selected index, but it is the same result regardless)
I needed to add this to my navGrid:
{url: "Delete", mtype: "POST", reloadAfterSubmit: true,
serializeDelData: function (postdata) {
var selectedrowindex = jQuery("#grid").jqGrid('getGridParam', 'selrow');
var dataFromCellByColumnIndex = jQuery('#grid').jqGrid ('getCell', selectedrowindex , 1);
return {DDLid: postdata.id, name: dataFromCellByColumnIndex};
}
});
So this passes a column value to my delete method as well as the DDLid, but I could easily swap dataFromCellByColumnIndex with selectedrowindex.
You should just implement Delete action having id parameter:
public JsonResult Delete(string id) {
...
}
To reference the action in the JavaScript code I would use 'url: <%= Url.Action("Delete") %>' instead of url: "Delete" which you use currently.
You can download here demo project which I created for the answer. The project implement deleting of the row together with many other features which you currently not need.
You can make another post inside delete method with your own params. After defining grid, you can define each action in detail. It is posting actual delete with correctid and original one is posting fake id. JQgrid is using row count for delete not the primary key. They may change it with recent versions, but this was working Jqgrid 3.8
jQuery("#ClientGrid").jqGrid('navGrid', '#ClientGridPager',
{ view: true, edit: true, search: false }, //options
{height: 240, caption: 'Edit Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/EditClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required" }, // edit options
{height: 340, caption: 'Add Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/CreateClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required", closeAfterAdd: true }, // add options
//delete method
{reloadAfterSubmit: true, beforeSubmit: function (postdata, formid)
{
var lastselectedID = -1;
if (ClientGridrow != null || typeof (ClientGridrow) != "undefined")
{
lastselectedID = $("#ClientGrid").getCell(ClientGridrow, 'ID_PK');
}
//CUSTOME delete to send taskid instead of rowid
$.ajax({ type: "POST", url: "/Settings/DeleteClient/?objid=" + lastselectedID,
data: "", success: function (response)
{
$("#ClientGrid").trigger("reloadGrid"); //reloadAfterSubmit: true is not working in Chrome
}
});
return [true, "Delete failed message"];
}, caption: 'Delete Client', datatype: 'local', url: "/Settings/DeleteClient/?objid=-1", jqModal: false, closeOnEscape: true
}, // del options..we make two posts
{closeOnEscape: true }, // search options
{height: 230, width: 350, jqModal: false, closeOnEscape: true} // view options
);

Interesting: implementing jquery autoComplete with jqgrid without overriding the exciting searchOptions

Oleg - are you here???
I am using jqGrid, were i set in colModel my searchoption according to the type
Like this:
var columnModel = [{ name: 'ID', index: 'ID', sortable: true,searchoptions: { sopt: ['gt']}},
{ name: 'FirstName', index: 'FirstName', sortable: true, searchoptions: { sopt: ['cn']} },
{ name: 'LastName', index: 'LastName', sortable: true ,searchoptions: { sopt: ['ge']}}
];
Now after i load the grid i want to use the fallowing code in order to add auticomplete to the search box of the grid:
for (var i = 0; i < columnModel.length; i++) {
var nameCol = columnModel[i].name;
myGrid.jqGrid('setColProp', nameCol,
{
searchoptions: {
dataInit: function (elem) {
$(elem).autocomplete({
source: function (request, response) {
autoFillSearch(request, response, $(elem).attr('name'));
},
minLength: 1
});
}
}
});
}
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
the autoFillSearch function is like this:
function autoFillSearch(request, response, columnToSearchName) {
var paramters = {
colName: columnToSearchName,
prefixText: request.term
};
$.ajax({
url: './ViewNQueryData.asmx/AutoCompleteSearch',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(paramters),
success: function (data) {
response($.each(data.d, function (index, value) {
return {
label: value,
value: index
}
}));
}
});
}
The problem is that new the colModels have the search option that were created the second time and dont have my specific "sopt" i want them to have....
I there any way of changing the second searchoption so that it will get the "sopt" option from the original colMadel?
Thank you in advance.
the answer for this is:
for (var i = 0; i < columnModel.length; i++) {
var nameCol = columnModel[i].name;
var soptOption = columnModel[i].searchoptions.sopt;
myGrid.jqGrid('setColProp', nameCol,
{
searchoptions: {
sopt: soptOption,
dataInit: function (elem) {
$(elem).autocomplete({
source: function (request, response) {
autoFillSearch(request, response, $(elem).attr('name'));
},
minLength: 1
});
}
}
});
}

Resources