We Keep Coding

how can we add comma separated hyperlink in datatable jquery

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

How to dynamically make columns of jQuery DataTable disappear

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

How to get image src value from server side jquery datatable in datatable?

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" />'
}
}
...

Asp.net mvc4 to datatables js

The problems is Datatables JS stays in state "processing" and the Chrome debug throws:
Uncaught TypeError: Cannot read property 'length' of undefined
The code in question that "feeds" datatables js is (data is some linq query):
var jsonData = Json(data);
return jsonData;
The response is (textual response):
[{
"TotalCredito": 1649112940.000000,
"TotalClientes": 1040,
"Balance7": 188974066.000000,
"Balance37": 25152742.000000,
"Balance67": 53268069.000000,
"Mes": 1
}, {
"TotalCredito": 1910576150.000000,
"TotalClientes": 941,
"Balance7": 332301396.000000,
"Balance37": 84407873.000000,
"Balance67": -7053061.000000,
"Mes": 2
}, {
"TotalCredito": 1852843443.000000,
"TotalClientes": 809,
"Balance7": 300589569.000000,
"Balance37": 87170595.000000,
"Balance67": 41900708.000000,
"Mes": 3
}, {
"TotalCredito": 1736522626.000000,
"TotalClientes": 747,
"Balance7": 235758479.000000,
"Balance37": 107699635.000000,
"Balance67": 60831390.000000,
"Mes": 4
}, {
"TotalCredito": 1611546395.000000,
"TotalClientes": 702,
"Balance7": 201209547.000000,
"Balance37": 59028449.000000,
"Balance67": 64171607.000000,
"Mes": 5
}, {
"TotalCredito": 1306131513.000000,
"TotalClientes": 697,
"Balance7": 552835099.000000,
"Balance37": 67349028.000000,
"Balance67": 50490441.000000,
"Mes": 6
}]
And the script function in the view is:
<script>
$(document).ready(function () {
var datatable = $('#informe').dataTable({
"language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
"bFilter": false,
"processing": true,
"serverSide": true,
"ajax": {
"url": "somesupercoolurl",
"type": "POST",
"dataType": "json"
},
"columns": [
{ "data": "Balance7" },
{ "data": "Balance37" },
{ "data": "Balance67" },
{ "data": "Mes" },
{ "data": "TotalClientes" },
{ "data": "TotalCredito" }
],
});
});
Finally, the table is:
<table id="informe">
<thead>
<tr>
<th>Balance7</th>
<th>Balance37</th>
<th>Balance67</th>
<th>Mes</th>
<th>TotalClientes</th>
<th>TotalCredito</th>
</tr>
</thead>
</table>
I find it strange that while the information is properly formatted, is not able to process.

Finally, i resolve this
after seeing many examples, I noticed it's necessary include this 3 variables to json before parse the json object to datatables js; In the controller:
var totalDatos = data.Count();
var jsonData = Json(new {
iTotalDisplayRecords = totalDatos,
iTotalRecords = totalDatos,
aaData = data
});
return jsonData;
Whit this 'function', the json object is like this
{"iTotalDisplayRecords":6,"iTotalRecords":6,"aaData":[{"TotalCredito":1649112940.000000,"TotalClientes":1040,"Balance7":188974066.000000,"Balance37":25152742.000000,"Balance67":53268069.000000,"Mes":1},{"TotalCredito":1910576150.000000,"TotalClientes":941,"Balance7":332301396.000000,"Balance37":84407873.000000,"Balance67":-7053061.000000,"Mes":2},{"TotalCredito":1852843443.000000,"TotalClientes":809,"Balance7":300589569.000000,"Balance37":87170595.000000,"Balance67":41900708.000000,"Mes":3},{"TotalCredito":1736522626.000000,"TotalClientes":747,"Balance7":235758479.000000,"Balance37":107699635.000000,"Balance67":60831390.000000,"Mes":4},{"TotalCredito":1611546395.000000,"TotalClientes":702,"Balance7":201209547.000000,"Balance37":59028449.000000,"Balance67":64171607.000000,"Mes":5},{"TotalCredito":1306131513.000000,"TotalClientes":697,"Balance7":552835099.000000,"Balance37":67349028.000000,"Balance67":50490441.000000,"Mes":6}]}
The table, in the view:
<table id="informe">
<thead>
<tr>
<th>Mes</th>
<th>TotalCredito</th>
<th>TotalClientes</th>
<th>Balance7</th>
<th>Balance37</th>
<th>Balance67</th>
</tr>
</thead>
</table>
The Script is:
<script>
$(document).ready(function () {
var arrayDatos = {
'canal': $(" #ListaCanales ").val(),
'anio': $(" #ListaAnios ").val(),
'vendedorsigla': $(" #ListaVendedores ").val()
};
var datatable = $('#informe').dataTable({
"language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
"bFilter": false,
"processing": true,
"serverSide": true,
"ajax": {
"url": "mensualajax",
"type": "POST",
"dataType": "json",
"data": arrayDatos
},
"columns": [
{ "data": "Mes", "bSortable": false },
{ "data": "TotalCredito" },
{ "data": "TotalClientes" },
{ "data": "Balance7" },
{ "data": "Balance37" },
{ "data": "Balance67" }
],
});
$(" #FiltrarResultados ").click(function () {
var arrayDatos = {
'canal': $(" #ListaCanales ").val(),
'anio': $(" #ListaAnios ").val(),
'vendedorsigla': $(" #ListaVendedores ").val()
};
datatable.fnClearTable();
$('#informe').dataTable({
"bDestroy": true,
"language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
"bFilter": false,
"processing": true,
"serverSide": true,
"ajax": {
"url": "mensualajax",
"type": "POST",
"dataType": "json",
"data": arrayDatos
},
"columns": [
{ "data": "Mes", "bSortable": false },
{ "data": "TotalCredito" },
{ "data": "TotalClientes" },
{ "data": "Balance7" },
{ "data": "Balance37" },
{ "data": "Balance67" }
],
});
});
});
is important remark, i use the 'click' function to reload whit ajax the datatables, the 'click' function is nearly equal to the another, but i aggregate "bDestroy": true,in the datatable constructor to reload the datatables (It is not very elegant, but work).
Finally, my new superduper controller to render, capture and updating data with DatatablesJs
//repository with the query
var repositorio = new Repositorios.InformeMensualController();
//capture ajax
string canal = String.Join("", Request.Form.GetValues("canal"));
string auxAnio = String.Join("", Request.Form.GetValues("anio"));
int anio = Convert.ToInt32(auxAnio);
string auxVendedorCodigo = String.Join("", Request.Form.GetValues("vendedorsigla"));
int vendedorCodigo = Convert.ToInt32(auxVendedorCodigo);
//set up data
var data = repositorio.CargaDatos(canal, anio, vendedorCodigo);
//Transformación a JSON y Datatables JS.
var totalDatos = data.Count();
var jsonData = Json(new {
iTotalDisplayRecords = totalDatos,
iTotalRecords = totalDatos,
aaData = data});
return jsonData;
I hope this is useful to someone
regards! :)

igGrid anchor becomes unreachable when row is edittable

This is my first post, if I have done anything wrong/suboptimally please let me know.
I have an igGrid that is passed generated html code to make one column an tag. This works great if the row is not edittable. I also have a column in the same row that I would like to be able to edit. If I allow editting on the row the tag is no longer functional, as any click on the row enters the row into editting mode. Is there any way to allow editting only on one column? I have disabled editting for the columns that I don't want editted but a click on any of them still enters the entire row into editting mode, with only the allowed column being edittable.
a sample row could look like:
Filename = "<a href='path/Permit/DownloadFile?permitFileID=23'>filename.txt</a>"
Note = "file notes"
Email = "email#gmail.com"
AddedTime = "2013/05/14"
PermitFileID = "23"
I want to be able to edit the notes column and still be able to click the filename column.
Here is my code:
$(document).ready(function()
{
$('#attachedFilesGrid').igGrid(
{
columns:
[
{ headerText:"File Name", key: "FileName", dataType: "text"},
{ headerText:"Notes", key:"Note", dataType:"text"},
{ headerText:"Uploaded By", key:"Email", dataType:"text"},
{ headerText:"Date", key:"AddedTime", dataType:"date", format: "yyyy/MM/dd"},
{ headerText:"ID", key:"PermitFileID", dataType:"number"},
],
width:'700px',
dataSource: fileList,
autoCommit:true,
primaryKey:"PermitFileID",
features:
[{
name:"Updating",
enableDeleteRow:true,
rowDeleting:function(evt, ui)
{
$.post(BASEURL + "Permit/deleteFile", { "permitFileID": ui.rowID});
},
editRowEnded:function(evt, ui)
{
note = $("#attachedFilesGrid").igGrid( "getCellText", ui.rowID, "Note");
$.post(BASEURL + "Permit/updatePermitFileNotes", { "permitFileID": ui.rowID, "note": note });
},
enableAddRow:false,
editMode:"row",
columnSettings: [
{ columnKey:"FileName", editorOptions: { disabled: true} },
{ columnKey:"Note", editorOptions: { disabled: false} },
{ columnKey:"Email", editorOptions: { disabled: true} },
{ columnKey:"AddedTime", editorOptions: { disabled: true} },
{ columnKey:"PermitFileID", editorOptions: { disabled: true} },
]
},

I got this figured out, editMode needed to be "cell" and the columnSettings set up thusly:
$('#attachedFilesGrid').igGrid(
{
columns:
[
{ headerText: "File Name", key: "FileName", dataType: "text"},
{ headerText: "Notes", key:"Note", dataType:"text"},
{ headerText: "Uploaded By", key:"Email", dataType:"text" },
{ headerText: "Date", key:"AddedTime", dataType:"date", format: "yyyy/MM/dd" },
{ headerText: "ID", key:"PermitFileID", dataType:"number"},
],
width: '700px',
dataSource: fileList,
autoCommit: true,
primaryKey: "PermitFileID",
features:
[{
name: "Updating",
enableDeleteRow: true,
rowDeleting: function (evt, ui)
{
$.post(BASEURL + "Permit/deleteFile", { "permitFileID": ui.rowID});
},
editCellEnded: function (evt, ui)
{
note = $("#attachedFilesGrid").igGrid( "getCellText", ui.rowID, "Note");
$.post(BASEURL + "Permit/updatePermitFileNotes", { "permitFileID": ui.rowID, "note": note });
},
enableAddRow: false,
editMode: "cell",
columnSettings: [
{ columnKey: "FileName", readOnly: true },
{ columnKey: "Note", editorOptions: {disabled: false}},
{ columnKey: "Email", readOnly: true },
{ columnKey: "AddedTime", readOnly: true },
{ columnKey: "PermitFileID", readOnly: true },
]
},
{
name: "Hiding",
columnSettings: [
{ columnKey: "FileName", allowHiding: false },
{ columnKey: "Note", allowHiding: false },
{ columnKey: "Email", allowHiding: false },
{ columnKey: "AddedTime", allowHiding: false },
{columnKey: "PermitFileID", allowHiding: false, hidden: true}
]
}],
});
getFiles();