This is my view where i want to split the comma separated values of a column AlertType
with individual comma value to popup
table = $('#DataQualityDT').dataTable({
"bAutoWidth": false,
destroy: false,
"serverSide": true,
retrieve: true,
"searching": false,
sColumns: true,
bFilter: true,
fixedHeader: true,
pagingType: 'full_numbers',
"sAjaxSource": "/hello/xyz",
"fnServerParams": function (aoData) {
aoData.push({ "name": "CustomerAlertID", "value": Customerid });
},
"aoColumnDefs": [
{
"mData": 'RowNum',
"aTargets": [0],
"bSortable": false,
"bSearchable": false
},
{
"mData": 'PositionDate',
"bSearchable": true,
"bSortable": false,
"aTargets": [1]
},
{
"mData": 'AlertID',
"bSearchable": true,
"bSortable": false,
"aTargets": [2],
"mRender": function (data, type, row) {
return ' ' + data + ' ';
}
},
{
"mData": 'Alert_Type',
"bSearchable": true,
"bSortable": false,
"aTargets": [3],
"mRender": function (data, type, row) {
return ' ' + data + ' ';
}
},
{
"mData": '',
"aTargets": [4],
"bSortable": false,
"bSearchable": false,
"mRender": function (data, type, row) {
return "<a href='# AlertID=" + row.AlertID + "' data-userId=" + row.AlertID + "' class='hreflink_create' ><i style='cursor:pointer'></i> Create</a> ";
}
}
],
"drawCallback": function (settings) {
$('#loading').hide();
},
"order": [[1, 'asc']]
});
How can I split this Alert_Type value(IR , MC, MM_MMP, MM_Remit, Telepin, WCB) to invidula comma hyperlink in so that i can call individual popup for individual alerttype.
I'm lost in how to approach this. thank u in advance
Related
Here is the information about my development environment:
Microsoft Visual Studio Professional 2013
.NET Framework 4.0
jQuery-2.1.4.min.js
jQuery DataTables 1.10.7
Newtonsoft.Json.7.0.1
jQuery UI 1.11.2
var GetAUsersLogs = function (sortColumn, isDescending) {
$('#PersonalUsersLogTable').DataTable({
"aoColumns": [
{ "sTitle": "LogBsonValueId" },
{ "sTitle": "UserID" },
{ "sTitle": "Driver Name" },
{ "sTitle": "Log Date" },
{ "sTitle": "Duty Cycle" },
{
"mData": null,
"mRender": function (obj) {
return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewLogAuditHistory(this)" >Log Hist</a>';
}
},
{
"sTitle": "Details",
"mData": null,
"mRender": function (obj) {
return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)" >View</a>';
}
}
],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0, 1, 5] }],
"iDisplayLength": 5,
"sDom": '<"clear">frtip',
"bProcessing": true,
"bServerSide": true,
"bLengthChange": false,
"bPaginate": true,
"bDestroy": true,
"bSort": false,
"bInfo": true,
"bFilter": false,
"sAjaxSource": 'LogsList.aspx/BindPersonalUsersLogDataTable',
"bJQueryUI": true,
"bDeferRender": true,
"sPaginationType": "full_numbers",
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "sortColumn", "value": sortColumn },
{ "name": "isDescending", "value": isDescending }
);
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
var json = jQuery.parseJSON(msg.d);
fnCallback(json);
},
beforeSend: function () {
$('.loader').show()
},
complete: function () {
$('.loader').hide()
}
});
}
}); // end of PersonalUsersLogTable DataTable method
}
// end of Code used to Bind Data to Table
The invocation to BindPersonalUsersLogDataTable method is in a C# file.
Within BindPersonalUsersLogDataTable, I will code that will determine if logged in user is an Admin or plain user.
If the logged in user is a plain user, then I want to dynamically make some of the columns in the jQuery DataTable Invisible.
Could some please tell me the changes I need to make in order to the aforementioned code to get the desired functionality?
You can use column().visible() or columns().visible() API methods to dynamically show/hide a single column or a set of columns.
"success": function (msg) {
var api = $('#PersonalUsersLogTable').DataTable();
var json = jQuery.parseJSON(msg.d);
// Enable/disable columns based on user type
if(json.isAdminUser){
api.columns([2,3]).visible(true);
} else {
api.columns([2,3]).visible(false);
}
fnCallback(json);
},
I am using jquery datatable and filling that datatable with ajax call and its working fine but now i need to shows the images in a column but i m don't know how to bind these images.Image link is coming from backend in category_image.
Back End:
var displayedCategories = filteredCategories;
var result = from c in displayedCategories select new[]
{c.id, c.category_name, c.category_image,c.id};
return Json(new{
sEcho = param.sEcho,
iTotalRecords = lstAllCategories.Count,
iTotalDisplayRecords = 10,
aaData = result},JsonRequestBehavior.AllowGet);
Front End:
$('#tblInterests').dataTable({
"bServerSide": true,
"sAjaxDataProp": "aaData",
"bProcessing": true,
"bLengthChange": false,
"sPaginationType": "full_numbers",
"bSort": true,
"aoColumns":[
{"sName": "id"},
{"sName": "category_name" },
{"sName": "category_image",
"bSearchable": false,
"bSortable": false,
"mRender": function (data) {
return '<img src="" width="50" height="50" />'
}
},
{"mData": "Id",
"bSearchable": false,
"bSortable": false,
"sWidth": "40px",
"mRender": function (data) {
return '<button class="btn btn-primary" type="button" >Edit</button>'
}
},
],
"ajax": "/Admin/InterestsJson",
"columns": [
{ "data": "id" },
{ "data": "category_name" },
{ "data": "category_image" },
{ "data": "id" }
]
});
in mRender, data (==category_image) should be set as src for the image :
...
{ "sName": "category_image",
"bSearchable": false,
"bSortable": false,
"mRender": function(data, type, full) {
return '<img src="'+data+'" width="50" height="50" />'
}
}
...
I am using Jquery DataTable TableTool in my MVC4 ASP.NET web application. Export to Excel and PDF working well with Chrome. But not working in IE and FireFox.
My code is given below
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "../media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "xls",
"sFileName": "Orders.csv",
"bFooter": false,
"mColumns": "visible",
"bHeader":false
}
]
},
Any one please help me
var oTable1 = $('#Ccctbl').dataTable({
"bPaginate": true,
"bDeferRender": true,
"bProcessing": true,
"bJQueryUI": true,
"sDom": '<"toolbar">frtip',
"sAjaxSource": "/Setup/LoadCostCenterCategory/",
"iDisplayLength": 15,
"bDestroy": true,
"fnPreDrawCallback": function (oSettings, json) {
var id = $(this).attr('id');
$("#ToolTables_" + id + "_0").html("<i class='icon-copy bigger-120 blue'></i>")
$("#ToolTables_" + id + "_1").html("<i class='icon-file-text green bigger-120'></i>")
$("#ToolTables_" + id + "_0").attr("title", "Copy");
$("#ToolTables_" + id + "_1").attr("title", "Export To Excel");
},
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"oTableTools": {
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls.swf",
"aButtons": [
{
'sExtends': 'copy',
"oSelectorOpts": { filter: 'applied', order: 'current' },
},
{
'sExtends': 'xls',
"oSelectorOpts": { filter: 'applied', order: 'current' },
}
]
},
"aoColumns": [
{ "mData": "CODE", "sTitle": "Cost Center Category Code", "sWidth": "25%", "bSortable": false },
{ "mData": "DESCRIPTION", "sTitle": "Description", "sWidth": "25%", "bSortable": false },
{ "mData": "strsegcattype", "sTitle": "Segment", "sWidth": "25%", "bSortable": false },
{ "mData": "strIsActive", "sTitle": "Active", "sWidth": "25%", "bSortable": false },
]
});
I have implemented the JqGrid in my application. I have done the edit,delete, insert operations but I am failing in searching the records. I have bind the data from the sql server.
Here is my script
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.extend(jQuery.jgrid.edit, {
closeAfterEdit: true,
closeAfterAdd: true,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
return JSON.stringify(postdata); ;
}
});
jQuery.extend(jQuery.jgrid.del, {
ajaxDelOptions: { contentType: "application/json" },
onclickSubmit: function (eparams) {
var retarr = {};
var sr = jQuery("#contactsList").getGridParam('selrow');
rowdata = jQuery("#contactsList").getRowData(sr);
retarr = { PID: rowdata.PID };
return retarr;
},
serializeDelData: function (data) {
var postData = { 'data': data };
return JSON.stringify(postData);
}
});
$.extend($.jgrid.defaults,
{ datatype: 'json' }
);
jQuery.extend(jQuery.jgrid.search, {
});
$("#contactsList").jqGrid({
url: '/WebService.asmx/GetListOfPersons1',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
colModel: [
{ name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
{ name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true },
{ name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
{ name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true },
editoptions: { value: getAllSelectOptions() }
}],
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'PID',
sortorder: "asc",
pager: jQuery('#gridpager'),
viewrecords: true,
gridview: true,
height: '100%',
editurl: '/WebService.asmx/EditRow',
// searchurl: '/WebService.asmx/Searchrow',
caption: 'Person details'
}).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: true, search: true });
jQuery("#contactsList").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
// jQuery("#contactsList").setGridParam({ data: results.rows, localReader: reader }).trigger('reloadGrid');
jQuery("#contactsList").jqGrid('setGridParam', { url: "WebService.asmx/searchrow", page: 1 }).trigger("reloadGrid");
});
function getAllSelectOptions() {
var states = { 'male': 'M', 'female': 'F' };
return states;
}
</script>
Here I have given the reference for searching in my asmx file like WebService.asmx/searchrow when I click the find button in the popup the cursor is moving to the specified method in the url.
Here is my question how can I get the user entered search parameter name and value to that method to perform the search operation .
I have defined the searchrow method like following
[WebMethod]
public List<Person> searchrow(HttpContext context)
{
return null;
}
Please help me to out from this problem or any other alternative to do the search operation in JQGrid.
thanks
purna
I need to extract the data "FechaCaducidad" from the grid "FarmacoGrid" to store it in an auxiliary variable "fechaCadAux". I tried to do it several different ways but have not been successful.
$(document).ready(function () {
$("#FarmacoGrid").jqGrid({
url: '#Url.Action("Load", "Farmaco")',
datatype: 'json',
mtype: 'POST',
autowidth: true,
altRows: true,
altclass: 'grid-alt-row',
rowNum: #(ViewBag.PageSize * (ViewBag.PageIndex + 1)),
colNames: ['NomFarmaco', 'Cantidad', 'FechaCaducidad', 'FechaPedido','FechaReposicion', '', '', '', ''],
colModel: [
{ index: 'NomFarmaco', name: 'NomFarmaco', sortable: true, resizable: false },
{ index: 'Cantidad', name: 'Cantidad', sortable: true, resizable: false },
{ index: 'FechaCaducidad', name: 'FechaCaducidad', sortable: true, resizable: false },
{ index: 'FechaPedido', name: 'FechaPedido', sortable: true, resizable: false },
{ index: 'FechaReposicion', name: 'FechaReposicion', sortable: true, resizable: false },
{ name: 'imagen', sortable: false, classes: 'grid-cell-imagen', resizable: false },
{ name: 'fechaCadAux', sortable: false, classes: 'grid-cell-fechaCadAux', resizable: false },
{ name: 'fechaHoyAux', sortable: false, classes: 'grid-cell-fechaHoyAux', resizable: false },
{ name: 'edit', sortable: false, classes: 'grid-cell-edit', resizable: false },
],
gridComplete:
function(){
var ids = jQuery("#FarmacoGrid").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++)
{
var rowId = ids[i];
var fechaCadAux = $("#FarmacoGrid"+FechaCaducidad).val();
var fechaHoyAux = Date.parse(new Date());
var imagenHtml = imagenHtml = '<img src="#Url.Content("~/Content/Images/verde.png")"/>';
var editHtml = '<img src="#Url.Content("~/Content/Images/CRUD/edit.png")"/>';
var deleteHtml = '<img src="#Url.Content("~/Content/Images/CRUD/delete.png")"/>';
$("#FarmacoGrid").jqGrid('setRowData', ids[i], { imagen: imagenHtml, "fechaCadAux": fechaCadAux, "fechaHoyAux": fechaHoyAux, "edit": editHtml, "delete": deleteHtml});
}
The solution for my own question is:
var fechaCadAux = jQuery("#FarmacoGrid").jqGrid('getRowData',rowId).FechaCaducidad;