how can I add class_list or set attribute for every td in column when using [yajra ] (https://github.com/yajra/laravel-datatables) datatable
You do it in the javascript. I have a datatable with the css id of "claims-table". I want to add classes to the first column, which in my case is called "id". My code is below. Look at the "columns" to see that I'm adding classes and returning the column as an href.
$(function() {
$('#claims-table').DataTable({
processing: true,
serverSide: true,
searching: false,
ajax: '/claims-table',
columns: [
{data: 'id', name: 'id', render: function(data,type,row) {
data = '<a class="claim_info underline_td" claim_id="'+data+'" href="/#">Claim ID '+data+'</a>';
return data;
}},
{data: 'order_id', name: 'order_id'},
{data: 'name', name: 'name'},
{data: 'status_description',name: 'status_description'}
]
});
});
Related
I'm using jqGrid. Here is my pared-down code for the grid:
$("#users").jqGrid({
datatype: 'json',
url: 'AjaxProxy.cfm',
mType: 'POST',
gridview: true,
colModel: [
{name: 'lastname', label: 'Last Name'},
{name: 'firstname', label: 'First Name'},
... more columns ...
],
height:'auto',
autowidth:true,
caption:'Users',
rowNum:20,
rowList:[10,20,50],
sortorder:'asc',
sortname: 'lastname',
ignoreCase: true, // case-insensitive filtering
pager: '#pager',
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
cell: "", //not used
id: "0" //will default first column as ID
},
postData: postData
});
I recently added in the mType: 'POST'. However, when I output the request_method in the AjaxProxy.cfm file it indicates that it's using a GET, and all the grid params are being passed in the URL rather than as POST values. Firebug and Chrome Developer Tools also indicate that it's using GET. Why is it still using GET?
There are exist no mType option, only mtype. All names are case-sensitive in JavaScript. The usage of
mtype: 'POST'
should solve your problem.
I am using ng-grid from following link:http://angular-ui.github.io/ng-grid/
My MVC Controller function return data in json format which includes
date like this
:
"RunDate":"\/Date(1439577000000)\/","RunDate":"\/Date(1441391400000)\/" etc....
My View:
<div ng-grid="gridOptions" style="min-height:420px"></div>
My Grid options in js:
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
columnDefs: [{ field: "RunDate", displayName: "Run Date", width: 120, cellFilter: "date:'yyyy-MM-dd'" }],
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
I want date to be display in this format:06/April/2015
Can anybody help me with this???
You need to apply custom filter on you variable while binding data. Do use cellTemplate of column level.
Code
$scope.gridOptions = {
data: 'gridData',
columnDefs: [{
field: 'RunDate',
displayName: 'Run Date',
cellTemplate： '<span> {{row.entity.RunDate | date:\'dd-MMM-yyyy\'}}</span>'，
},
....
]
});
Use Angular date filter, like this:
{{row.entity.RunDate | date:'dd-MMM-yyyy'}}
You need to change the date formatting on your gridOptions
The correct date format you need is
dd/MMM/yyyy
$scope.gridOptions = {
data: 'myData',
enablePinning: true,
columnDefs: [
{ field: 'RunDate',displayName: 'Run Date', cellFilter: 'date:\'dd/MMM/yyyy\'' },
]
};
...........
});
Check this link for an example
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
);
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(','));.
I have a class (Person) with 4 properties : Id, FirstName, LastName, Code.
I show a person list in a jqgrid. I'd like a link column with this format (the code has this format 2011.0001)
/Person/Detail/Code => /Person/Code/2011.0001
But I have this with the code below :
/Customer/Detail?Code=2
I tried this :
colModel: [
{ name: 'Code', index: 'Code', formatter: 'showlink', formatoptions: { baseLinkUrl: '/Customer/Detail', idName: 'Code' }},
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' }
],
How can I correct this ?
Thanks,
Update1, Data format
[
{"Id":1,"FirstName":"AAAA","LastName":"AA","Code":"2011.0001"},
{"Id":3,"FirstName":"BBBB","LastName":"BB","Code":"2011.0003"}
]
You can try to use the custom formatter in the form
formatter: function (cellvalue, options, rowObject) {
return '' + cellvalue + '';
}
instead of predefined formatter 'showlink':
formatter: 'showlink', formatoptions: {baseLinkUrl:'/Customer/Detail', idName:'Code'}
You can easy receive /Customer/Detail?Code=2011.0001 if you have unique data in the 'Code' column and if you would add key: true to the column definition. In the case the Id value from the JSON input will be ignored and the value from the 'Code' column will be used as the rowid. If you do need to have the href value in the form /Customer/Detail/Code/2011.0001 or instead of /Customer/Detail?Code=2011.0001 you will need use custom formatter as I described before.