Images can be dragged and drop in textbox in jqgrid - ruby-on-rails

In my rails application ,iam using jqgrid to enter data in rows.there is a description box which allows certain no of characters.The problem here is i can drag and drop images and urls which the description box accepts.How can i prevent it.
here is the short code i have taken out from the main after some edit..
$(document).ready(function() {
colNamesData = [ 'Description', 'Hours']
colModelHash = [
{name:'description',index:'description', width:130,sorttype:"text", editable:true, edittype:"textarea", editoptions: {rows:"5",cols:"25",maxlength:"255"}, stype:'text'},
{name:'hours',index:'hours', width:130, align:'center',editable:true, edittype:"select",editoptions:{value:"<%= hours_options %>"}, search:true, stype:'text'}
},
]
$("#data_table").jqGrid({
datatype: "local",
height: "auto",
autowidth: true,
ignoreCase: true,
colNames: colNamesData,
colModel: colModelHash,
pager: '#pager',
rowNum:10,
rowList:[10,25,50,100],
sortname: 'hours',
sortorder: 'desc',
viewrecords: true,
editurl:"/data_call.json",
caption: 'My info',
},
data:<%= raw #data_jqgrid_date.to_json %>
});
jQuery("#data_table").jqGrid('navGrid','#pager',{del:false,add:true,edit:false},{}, {}, {});
var details = <%= raw #details.to_json %>

You can bind 'drop' event handler to the 'description' column having edittype:"textarea". To do this you can include dataEvents which look like
editoptions: {
dataEvents: [
{
type: 'drop',
fn: function(e) {
console.log('drop');
if (e.originalEvent !== undefined &&
e.originalEvent.dataTransfer !== undefined &&
e.originalEvent.dataTransfer.getData) {
console.log("URL: "+e.originalEvent.dataTransfer.getData('URL'));
console.log("Text: "+e.originalEvent.dataTransfer.getData('Text'));
e.preventDefault();
}
}
}
]
}
in the code the URL and the Text dropped in the control will be displayed on the console and the dropping will be prevented. You can prevent the dropping depend on the data returned by dataTransfer.getData('URL') and dataTransfer.getData('Text').

In my view you can have a JavaScript method.
Just bind the change method of that text box with the method.
Check the value, if it contains any invalid character then reset it to balnk('') and return false.

Related

Bug onSelectRow in free-jqgrid

I use free-jqGrid v4.14.0. I have a table, when I click on a row in this table, I execute a stored procedure and in another table I enter the result.
The problem is that when you first click on a row in the table, the data does not load into the second table, and when the second button is clicked, the data appears, and this problem occurs only once, the following clicks immediately load the data into the second table.
When you first click in the browser console, you can see that the url stored procedure is loading: '# Url.Action ("GetAccident")',
$(document).ready(function () {
$("#jqg").jqGrid({
url: '#Url.Action("GetAccident")',
datatype: "json",
colNames: ['id_Accident', .......],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, sortable: false },
.....................
.....................
],
guiStyle: "bootstrap",
iconSet: "fontAwesome",
pager: "#pager",
rowList: [10, 20, 30],
rowNum: 10,
loadonce: false,
onSelectRow:
function (idRow) {
celValue = $('#jqg').jqGrid('getCell', idRow, 'id_Accident');
jQuery("#jqg1").jqGrid('setGridParam', { url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + celValue, page: 1 }).trigger('reloadGrid');
}
});
jQuery("#jqg1").jqGrid({
url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + 0,
datatype: "json",
colNames: ['id_Accident', 'Name Organization'],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, stype: 'text', sortable: true },
{ name: 'Name', index: 'Name', autowidth: true, sortable: true }
],
guiStyle: "bootstrap",
pager: "#pager1",
rowList: [10, 20, 30],
rowNum: 10,
});
I can't reproduce the problem. You can examine Network traffic of the demo https://jsfiddle.net/OlegKi/ed0yLkce/1/. I uses
datatype: "local"
in the second grid as initial option to prevent unneeded Ajax requests. I use additionally idPrefix with different values in both grids to be sure that one will have no conflicts with duplicates of ids. You will see in Network tab of Developer Tools that the request to for example https://fiddle.jshell.net/echo/json?celValue=test2 will be send it the second row is selected.

jqGrid navigation button fired post method?

jqGrid
$(document).ready(function () {
$("#grid").jqGrid({
url: '#Url.Action("GetAllAuthors", "Admin")',
datatype: "json",
mtype: 'get',
colNames: ['Yazar Adı', 'Öz Geçmiş'],
colModel: [
{ name: 'Name', index: 'Name', editable: false },
{ name: 'Description', index: 'Description', editable: false }
],
jsonReader: {
repeatitems: false,
id: "sno",
root: "rows", //array containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false
},
rowNum: 10,
rowList: [10, 20, 30, 40, 50],
pager: jQuery('#gridpager'),
sortname: 'Name',
viewrecords: true,
sortorder: "asc",
width: 710,
height: 300
})
.navGrid('#gridpager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#gridpager', {
caption: "Düzenle",
buttonicon: "ui-icon-pencil",
onClickButton: function () {
var grid = $("#grid");
var rowid = grid.jqGrid('getGridParam', 'selrow');
//alert(rowid + " - " + grid.jqGrid('getCell', rowid, 'CustomerName') + " - Link: " + $("#customers_grid_table a.customer_details").attr("href"));
window.location = '#Url.Action("EditAuthor", "Admin")?authorId=' + rowid;
//LoadAction('#Url.Action("EditAuthor", "Admin")?authorId=' + rowid);
}
}); //end jqgrid
});
I have two method in my controller
Get method
[HttpGet]
public ActionResult EditAuthor(int authorId)
Post method
[HttpPost]
public ActionResult EditAuthor(AuthorViewModel model, HttpPostedFileBase file)
I selected a row and clicked edit button, I expect to fire get method, but post method is fired. What can I do to fire get method?
Thanks.
If you set new value of window.location the HTTP GET will be used. To produce HTTP POST you can either use $.ajax or submit some form. You can for example dynamically build invisible <form> and submit it. For example
onClickButton: function () {
var rowid = $(this).jqGrid("getGridParam", "selrow"),
myForm = document.createElement("form"),
param1 = document.createElement("input");
myForm.action = '#Url.Action("EditAuthor", "Admin")';
myForm.method = "POST";
myForm.style.display="none";
param1.name = "authorId";
param1.type = "text";
param1.value = rowid;
myForm.appendChild(param1);
document.body.appendChild(myForm);
myForm.submit();
document.body.removeChild(myForm);
}
I recommend you additionally to include additional validation whether some row is selected (whether rowid is not null).
Moreover I recommend you
to use always gridview: true option in the grid which will just improve the performance of the grid.
replace the option pager: jQuery('#gridpager') to pager: '#gridpager'.
replace the current value of jsonReader option to jsonReader: {repeatitems: false, id: "sno"}. The options which you specify will be combined with default value (see the documentation). Additionally your current value of jsonReader option contains syntax error because you specify the same property repeatitems: false twice.

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
);

jqGrid: pass selected IDs as HTML form parameters

I have an HTML form (Razor) with jqGrid to select entities (please assume customers, for example).
The customers jqGrid looks like:
jQuery("#ajaxGrid").jqGrid({
url: '#Url.Action("CustomersData")',
datatype: 'json',
mtype: 'GET',
jsonReader: { repeatitems: false, id: "Id" },
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', editable: true, sortable: false, hidden: false },
{ name: 'Name', editable: true, sortable: false, hidden: false }
],
multiselect: true,
viewrecords: true,
rowNum: 5,
width: '850',
height: '15em'
});
So, the grid allows multiple selection.
The question is: how to pass selected customer IDs (as IEnumerable) to the controller on submit (to the appropriate submit action)?
I guess it can be done by setting all selected IDs as form parameter. I don't know how to copy the data from the array:
var ids = jQuery("#ajaxGrid").getGridParam('selarrrow');
to HTML form hidden value.
If I understand you correct you can for example create string with comma-separated ids of selected rows with respect of ids.join(','). Then you can use the jQuery.val(newValue) to set the new halue to the hidden field: $("#hiddenFieldId").val(ids.join(','));.

How to implement search on jqgrid?

So I've got basic example of jqgrid working in ASP.NET MVC, the javascript looks like this:
$(document).ready(function() {
$("#list").jqGrid({
url: '../../Home/Example',
datatype: 'json',
myType: 'GET',
colNames: ['Id', 'Action', 'Parameters'],
colModel: [
{ name: 'id', index: 'id', width: 55, resizable: true },
{ name: 'action', index: 'action', width: 90, resizable: true },
{ name: 'paramters', index: 'parameters', width: 120, resizable: true}],
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multikey: "ctrlKey",
imgpath: '../../themes/basic/images',
caption: 'Messages'
});
Now I am trying to implement the search button that they have in the jqgrid examples (click on Manipulating/Grid Data). But I don't see how they implement it. I'm expecting e.g. a "search:true" and a method to implement it.
Has anyone implemented search on jqgrid or know of examples that show explicitly how to do it?
I recently implemented this myself (yesterday actually) for the first time. The biggest hurdle for me was figuring out how to write the controller function. The function signature is what took me the longest to figure out (notice the _search, searchField, searchOper, and searchString parameters as those are missing from most of asp.net mvc examples I've seen). The javascript posts to the controller for both the initial load and for the search call. You'll see in the code that I'm checking whether the _search parameter is true or not.
Below is the controller and the javascript code. My apologies for any formatting issues as this is my first time posting on here.
public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
List<AppGroup> groups = service.GetAppGroups();
List<AppGroup> results;
if (_search)
results = groups.Where(x => x.Name.Contains(searchString)).ToList();
else
results = groups.Skip(page * rows).Take(rows).ToList();
int i = 1;
var jsonData = new
{
total = groups.Count / 20,
page = page,
records = groups.Count,
rows = (
from appgroup in results
select new
{
i = i++,
cell = new string[] {
appgroup.Name,
appgroup.Description
}
}).ToArray()
};
return Json(jsonData);
}
And here is my HTML/Javascript:
$(document).ready(function() {
$("#listGroups").jqGrid({
url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
datatype: 'json',
mtype: 'GET',
caption: 'App Groups',
colNames: ['Name', 'Description'],
colModel: [
{ name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
{ name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
],
loadtext: 'Loading Unix App Groups...',
multiselect: true,
pager: $("#pager"),
rowNum: 10,
rowList: [5,10,20,50],
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});
See my article on codeproject, which explains how we can do multiple search in jqgrid:
Using jqGrid’s search toolbar with multiple filters in ASP.NET MVC
I use IModelBinder for grid's settings binding, expression trees for sorting and filtering data.
In case you're still wondering about dealing with optional parameters, just declare them as nullables by adding a ? after the type name.
Now you'll be able to compare them with null to check if they are absent.
Note that you don't need to do this with strings, as they are already nullable.
#Alan - ok, I used your method and extended my webservice to expect those additional three parameters and check for "_search" is true/false. But, in order to make this work, I had to add this to my ajax call in the JavaScript:
if (!postdata._search) {
jQuery("#mygrid").appendPostData( {searchField:'', searchOper:'', searchString:''});
}
Just follow this link. It has all implementations explained...
You can create a button searchBtn and can invoke search form on click
$("#searchBtn").click(function(){
jQuery("#list4").searchGrid(
{options}
)});

Resources