I want to delete a record in jqgrid.
For this I have the image and when the user clicks on this the record is getting deleted.
But I want to show the confirm box and when true then only the record should get deleted.
So any one can tell how to call javascript in jqgrid.
My jqgrid is
jQuery(document).ready(function() {
jQuery("#list47").jqGrid({
url: 'AddFilterGrid.aspx?Show=ViewFilter',
datatype: "json",
id: "FilterName",
colNames: ["SubCategory", "Filter", 'Delete', 'Edit'],
colModel: [{
name: 'CategoryName',
index: 'CategoryName',
width: 150,
align: 'left',
sortable: true,
sorttype: 'text'
}, {
name: 'FilterName',
index: 'FilterName',
width: 150,
align: 'left',
sortable: true,
sorttype: 'text'
}, {
name: 'f',
index: 'f',
width: 100,
align: "center",
formatter: 'showlink',
formatter: formateadorLinkDelete
}, {
name: 'FilterId',
index: 'FilterId',
width: 100,
align: "center",
formatter: 'showlink',
formatter: formateadorLinkEdit
},
],
height: 280,
width: 650,
//autowidth: true,
mtype: "GET",
pager: '#plist47',
rowNum: 10,
rowList: [10, 20, 30, 40],
repeatitems: false,
viewrecords: true,
sortname: 'FilterName',
viewrecords: true,
sortorder: "desc",
gridview: true,
imgpath: '/Scripts/themes/redmond/images'
});
});
Make a column with a delete button, give your button an attribute with the id, so you can post that id to delete it.
do a post to your delete controller
$.post('url/delete/$(this).val("deletid")', function(data) {
$('.result').html(data);
});
# edit: create a delete link in one of your colums, with class="delete" and deleteid="the id"
you can create a confirm popup box:
$(function(){
$(.delete).foreach(function(){
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Submit": function(){
$.post('url/delete/$(this).val("deletid")', function(data) {
//find your tr and hide it
$(this).parent().parent.... .hide();
});
};
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Related
hii Guys !!
I implemented filter with dropdownlist in jqgrid but grid is not showing the values of the column on which i added filter neither is filtering the data..
Here is my code...
<script type="text/javascript">
var categoriesStr = ":All;1:vikas;2:Ankur";
$(function () {
$("#UsersGrid").jqGrid({
url: 'getGriddahico.ashx',
datatype: 'json',
height: 250,
colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID'],
colModel: [
{ name: 'UserID', index: 'UserID', width: 100, sortable: true, align: 'center' },
{ name: 'UserName', width: 100, sortable: true, align: 'center' , formatter: 'select', stype: 'select',
sorttype: function (cell) { return categories[cell]; },
edittype: 'select', editoptions: { value: categoriesStr },
searchoptions: { sopt: ['eq'] }
},
{ name: 'FirstName', width: 100, sortable: true, align: 'center' },
{ name: 'MiddleName', width: 100, sortable: true },
{ name: 'LastName', width: 100, sortable: true, align: 'center' },
{ name: 'EmailID', width: 150, sortable: true, align: 'center' }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#UsersGridPager',
sortname: 'UserID',
loadonce: true,
viewrecords: true,
ignorecase:true,
sortorder: 'asc',
autowidth: true,
toppager: true,
height: '100%'
});
$("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false, search: false });
$("#UsersGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn", beforeSearch: function () {
//alert("verifying the data");
var postData = grid.jqGrid('getGridParam', 'postData');
// we use `stringResult: true` so decoding of the search parameters are a little complex
var searchData = jQuery.parseJSON(postData.filters);
for (var iRule = 0; iRule < searchData.rules.length; iRule++) {
if (searchData.rules[iRule].field === "UserName") {
var valueToSearch = searchData.rules[iRule].data;
if (valueToSearch.length != 5) {
alert("The search string MUST de 5 charachters length!");
return true; // error
}
}
}
return false;
}
});
//jQuery("#UsersGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
});
</script>
Anyhelp will be welcomed ...
Thanx in advance
May be getGriddahico.ashx is not returning sorted values.
if u could share the code of getGriddahico.ashx, it would be better.
Hii Guys!!!
I made jqgrid in which i added a FilterToolbar.Now as per my need i need dropdownmenu for unique values in FilterToolbar column.I am using asp.net...
Here is my code...
$(function () {
$("#UsersGrid").jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
height: 250,
colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID'],
colModel: [
{ name: 'UserID', index: 'UserID', width: 100, sortable: true },
{ name: 'UserName', width: 100, sortable: true },
{ name: 'FirstName', width: 100, sortable: true },
{ name: 'MiddleName', width: 100, sortable: true },
{ name: 'LastName', width: 100, sortable: true },
{ name: 'EmailID', width: 150, sortable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#UsersGridPager',
sortname: 'UserID',
viewrecords: true,
sortorder: 'asc',
autowidth:true
//caption: 'JSON Example'
});
$("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false });
$("#UsersGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter:true, defaultSearch: 'cn' });
$("#UsersGrid").jqGrid('navButtonAdd', '#UsersGrid-pager', { caption: "Filter", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { $("#UsersGrid")[0].toggleToolbar(); }
});
Plz guys help me to get the solution..
Thanx in advance....
The easiest way is the usage stype: "select". If you want fill dropdown with unique value from the column you can do this either on the server side or on the client side. If you provide all possible the unique values on the server side in form HTML fragment of <select> you can specify dataUrl option of searchoptions (or editoptions). If you provide the data on the client side you can specify value property of searchoptions (or editoptions) instead. In the answer you will find the example of possible implementation.
I have the following JQgrid which is working fine.
$("#Groups_UseCases_Grid").jqGrid({
url: 'groupsHandler.ashx?mod=3',
datatype: 'json',
mtype: 'GET',
loadonce: true,
height: 'auto',
width:'750px',
colNames: ['id', 'groupname', 'workSpace'],
colModel: [
{ name: 'id', index: 'id', key:true, width: 200, sortable: false, editoptions: {readonly: true,size: 10}},
{ name: 'groupname', width: 200, sortable: false, editable:false },
{ name: 'workSpace', width: 400, sortable: false, editable:true , edittype:"select",editoptions:{multiple:true, size:"<%=combolistSize%>", value:"<%=combolist%>"} }
],
rowNum: 30,
rowList: [30, 60, 90],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: 'asc',
caption: 'Groups UseCases Ascosiation Grid',
editurl: 'groupsHandler.ashx?mod=3',
hidegrid: false,
altRows:false,
altclass:'myAltRowClass',
grouping:true,
groupingView : {
groupField : ['useCase'],
groupText : ['<b> useCase : {0} (Records {1}) </b>']
}
});
jQuery("#Groups_UseCases_Grid").jqGrid('navGrid',"#pager",
{edit:false,add:false,del:false});
jQuery("#Groups_UseCases_Grid").jqGrid('inlineNav',"#pager",
{edit:true,add:false,del:false},
{afterSubmit: function(rowid, aData){document.forms[1].submit();//alert("row id is "+rowid)
}},
{closeAfterEdit: true,reloadAfterSubmit: false},
{closeAfterAdd: true,reloadAfterSubmit: false},
{reloadAfterSubmit: true});
C# code :
private string combolist;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
combolist =create_combolist();
}
}
private string create_combolist(/string groupID/)
{.....}
My problem is that i want column workSpace values to be generated by giving the id of the selected row as it depends on it and narrows the dropdown valuelist
Is it possible using the onSelectRow?
I tried
onSelectRow: function(id){<%usecasesample.create_combolist(); <%combolist = usecasesample.create_combolist();%>; } ,
that works too but i cant supply row id in it.
Any help appreciated, thanks in advance,
alex
This seems to work fine
$("#Groups_UseCases_Grid").jqGrid({
url: 'groupsHandler.ashx?mod=2',
datatype: 'json',
mtype: 'GET',
loadonce: true,
height: 'auto',
width:'850px',
colNames: ['groupid', 'groupname', 'workspaces'],
colModel: [
{ name: 'groupid', index: 'id', key:true, width: 200, sortable: false, editoptions: {readonly: true,size: 10}},
{ name: 'groupname',index: 'groupname', width: 200, sortable: false, editable:false },
{ name: 'workspaces', width: 400, sortable: false, editable:true , edittype:"select",editoptions:{multiple:true, size:"" }}
],
onSelectRow: function(id) {
var name='workspaces';
jQuery("#Groups_UseCases_Grid").setColProp(name, { editoptions: {multiple:true, dataUrl: 'groupsHandler.ashx?mod=3&rowID='+id }})
},
rowNum: 30,
cellEdit:false,
rowList: [30, 60, 90],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: 'asc',
caption: 'Groups UseCases Ascosiation Grid',
editurl: 'groupsHandler.ashx?mod=2&rows=20&page=1',
hidegrid: false,
altRows:false,
altclass:'myAltRowClass',
grouping:true,
groupingView : {
groupField : ['useCase'],
groupText : [' useCase : {0} (Records {1}) ']
}
});
jQuery("#Groups_UseCases_Grid").jqGrid('navGrid',"#pager",
{edit:false,add:false,del:false});
jQuery("#Groups_UseCases_Grid").jqGrid('inlineNav',"#pager",
{edit:true,add:false,del:false},
{afterSubmit: function(rowid, aData){document.forms[1].submit();//alert("row id is "+rowid)
}},
{closeAfterEdit: true,reloadAfterSubmit: false},
{closeAfterAdd: true,reloadAfterSubmit: false},
{reloadAfterSubmit: true});
I have
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/TabMaster/GetGridData',
datatype: 'json',
mtype: 'GET',
colNames: ['col ID', 'First Name', 'Last Name', '', '', '', ''],
colModel: [
{ name: 'colID', index: 'colID', width: 100, align: 'left' },
{ name: 'FirstName', index: 'FirstName', width: 150, align: 'left' },
{ name: 'LastName', index: 'LastName', width: 300, align: 'left' },
{ name: 'add', width: 18, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-plus'></span>"
}
},
{ name: 'edit', width: 18, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-pencil'></span>"
}
},
{ name: 'del', width: 18, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-trash'></span>"
}
},
{ name: 'details', width: 18, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>"
}
}
],
onSelectRow: function (rowJsonId)
{ handleSelectedRow(rowJsonId); },
pager: jQuery('#pager'),
rowNum: 4,
rowList: [1, 2, 4, 5, 10],
sortname: 'colID',
sortorder: "asc",
viewrecords: true,
gridview: true,
rownumbers: true,
multiselect: true,
imgpath: '/scripts/themes/steel/images',
caption: 'Tab Master Information'
}).navGrid(pager, { edit: true, add: true, del: true, refresh: true, search: true });
});
function handleSelectedRow(thing) {
}
but i could not able to see buttons for Add, Edit, Delete and View i am only able to see for empty column in JQGrid.
for your reference
Please provide your valuable comments for the same.
It seems to me that you try to use my demo from the answer:
All classes for the ui-icon-plus, ui-icon-trash and so on come from jQuery UI CSS. You shoul just verify that you included jQuery UI correctly together with the images subdirectory.
I'm trying to implement a simple grid using jqGrid, my first read example of my own.
Here is my JSON code:
$(document).ready(function() {
$("#editgrid").jqGrid({
url: '<%= ResolveUrl("~/User/index") %>',
datatype: "json",
myType: 'GET',
colNames: ['UserId', 'Surname', 'Forename', 'Pax', 'Mobile', 'Active', 'Email'],
colModel: [
{ name: 'UserId', index: 'UserId', width: 80, editable: true, editoptions: { size: 10} },
{ name: 'Surname', index: 'Surname', width: 90, editable: true, editoptions: { size: 25} },
{ name: 'Forename', index: 'Forename', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Pax', index: 'Pax', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Mobile', index: 'Mobile', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Active', index: 'Active', width: 55, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
{ name: 'Email', index: 'Email', width: 100, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "20"} }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagered',
sortname: 'Surname',
viewrecords: true,
sortorder: "desc",
caption: "Editing Example",
editurl: "detail.aspx"
});
$("#bedata").click(function() {
var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
if (gr != null) jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
else alert("Please Select Row");
});
});
I have the following HTML :
<table id="editgrid"></table>
<div id="pagered"></div>
<input type="button" id="bedata" value="Edit Selected" />
But when I run all this I get client code breaking within jquery-1.5.2.js (Microsoft JScript runtime error: Object doesn't support this property or method) where I can do nothing about this, this is probably of no use but here is the error below, stops at the finally part :
// resolve with given context and args
resolveWith: function( context, args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || [];
firing = 1;
try {
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context, args );
}
}
finally {
fired = [ context, args ];
firing = 0;
}
}
return this;
},
Must be something simple making this crash out on me, any ideas anyone?