I would like to make my Site_ID column with hyperlink, when click the each Site_ID, it will links to different pages. below is my code, can anyone give me some suggestions?
var infoTable = $('#resultTable').dataTable({
"processing" : true,
"serverSide" : true,
"scrollX" : true,
"jQueryUI" : true,
"deferRender" : true,
"order" : [[ 0, "asc" ]],
"ajax": "./DataTables-1.10.15/examples/server_side/scripts/server_processing.php",
"pagingType" : "full_numbers",
"oLanguage" : {
"sSearch": "Search all columns:"
},
"aoColumns":[
{
"data":"Site_ID",
"render": function ( data,type,full, meta ) {
return ''+data+'';
}
},
]
});
I got the answer, it's running well.
var infoTable = $('#resultTable').dataTable({
"processing" : true,
"serverSide" : true,
"scrollX" : true,
"jQueryUI" : true,
"deferRender" : true,
"order" : [[ 0, "asc" ]],
"ajax": "./DataTables-1.10.15/examples/server_side/scripts/server_processing.php",
"pagingType" : "full_numbers",
"oLanguage" : {
"sSearch": "Search all columns:"
},
columnDefs : [
{ targets : [0],
render : function(data) {
return ''+data+''
}
}
]
});
Related
I have to set default value to ag-grid agTextColumnFilter.
I order to do that I I added filterParams and defaultOption, but the filter does't works after my changes.
gridOptions = {
enableFilter: true,
...
columnDefs: [
{headerName: "Status", field: "status", filter: "agTextColumnFilter",
filterParams: { defaultOption: { notContains: 'default text'} } }
]
}
I am using this documentation.
https://www.ag-grid.com/javascript-grid-filter-text/
Just do this when you are pushing data in ag-grid
columnData.push({
headerName: "Site Name",
field: "siteName",
dataType: "string",
enableValue: true,
filter: "agTextColumnFilter",
editable: false,
});
I am using select2 plugin. All are working well. but pagination is not working. Showing "Loading more results" at the end & it's disabled. I am confused what I am missing. Please guide. I have the file like:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js, https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css, https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js.
Here is my code:
$('.itemName').select2({
placeholder : 'Select an item',
ajax : {
url : 'search_ajax.php',
dataType : 'json',
delay : 250,
data : function (params) {
return {
term : params.term || '',
page : params.page || 1
}
},
processResults : function (data, params) {
params.page = params.page || 1;
return {
results : data.results,
pagination : {
more : (params.page * 5) < data.total_count
}
};
},
cache : true
}
});
Here is the json response:
{
"total_count" : "10",
"results" : [{
"id" : "200",
"text" : "Australian National University"
}
]
}
What am I doing wrong? Am I missing some file to include?
I need to show an empty grid with no pagination and display a message "You have no records found" if empty results in jqGrid.i'm pretty new to this jqgrid.
I have added the code as below. Please Find the Oleg Demo1, Demo2
$(function () {
var $grid = $("#oversight-sample"),
//mydata = [{actions: "a", url: "http://stackoverflow.com/q/24609566/315935", created: "7/7/2014"}];
mydata = [];
emptyMsgDiv = $("<div><span style='color:red;font-size:24px'>You have no records found</span></div>");
$grid.jqGrid({
//autowidth: true,
caption: "Evaluated URLs",
colNames: ["Actions", "URL", "Fetch Date"],
colModel: [
{ name: "actions", align: "center", title: false, width: 60, resizable: false, sortable: false },
{ name: "url", width: 400 },
{ name: "created", align: "center", width: 125, sorttype: "date" }
],
data: mydata,
datatype: "local",
emptyrecords: "0 records found",
localReader: {
page: function (obj) {
return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page;
}
},
loadComplete: function () {
var ts = this;
if (ts.p.reccount === 0) {
$(this).hide();
emptyMsgDiv.show();
} else {
$(this).show();
emptyMsgDiv.hide();
}
},
height: "auto",
sortname: "created",
toppager: true,
pager: "#url-pager",
viewrecords: true
});
// place div with empty message insde of bdiv
emptyMsgDiv.insertAfter($grid.parent());
});
<table id="oversight-sample"><tbody><tr><td></td></tr></tbody></table>
<div id="url-pager"></div>
Here is the link to fiddler with the 'No records found' message. I hope it will give you an idea on how to create a basic jqgrid and what library references are required.
https://jsfiddle.net/99x50s2s/2/
<table id="sg1"></table>
<div id="psg1"></div>
jQuery("#sg1").jqGrid({
datatype: "local",
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
height: 'auto',
viewrecords: true,
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
emptyrecords: 'No records found',
pager: '#psg1',
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:80},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
caption: "Test Grid"
});
var mydata = [];//pass empty data
for(var i=0;i<=mydata.length;i++)
jQuery("#sg1").jqGrid('addRowData',i+1,mydata[i]);
I would like to do the following with the contextmenu plugin:
- Rename "Create" as "Add"
- Remove "Edit"
How does one do it?
I do NOT want to create a custom menu because then I only get a node and not the nice data object that can be used in the Create, Rename and Delete events.
Found the answer in the code of jstree itself:
Added this to the jstree code:
"contextmenu": {
items: customContextMenu
}
And this for the context menu items:
function customContextMenu() {
'use strict';
var items = {
"create" : {
"separator_before": false,
"separator_after": true,
"_disabled": false, //(this.check("create_node", data.reference, {}, "last")),
"label": "Add",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); }, 0);
});
}
},
"rename" : {
"separator_before": false,
"separator_after": false,
"_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
"label": "Rename",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"remove" : {
"separator_before": false,
"icon": false,
"separator_after": false,
"_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
"label": "Withdraw",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if (inst.is_selected(obj)) {
inst.delete_node(inst.get_selected());
} else {
inst.delete_node(obj);
}
}
}
};
return items;
}
Hi there im building a grid that have dynamic columns depending on the number of a specific object.. here's a example
public class Team
{
string name {get;set;}
List<members> memberslist {get;set;}
}
public class member{
string name {get;set;}
int goals {get;set;}
}
in the view:
#(Html.Kendo().Grid(Model.TeamList)
.Name("goalslist")
.Columns(columns =>
{
columns.Bound(team => team.name).Title("Team Name");
columns.Bound(team => team.memberslist);
}...
what i would like the result was something like this:
Team Name, John Smith Taylor Fernandez
Ajax 22 1 3
Milan 0 1 2
Any Ideia?! how its done will print object[object], i tried a lot of stufs but without sucess.. thanks
The easiest way to do this is through JSON. Convert your column list into json and pass it to the column, see below. At the very bottom you can see me pushing the columns to the grid. Below that you can see what the JSON itself looks like.
var gridJSON = {
dataSource: {
data: data,
schema: {
model: {} // the model gets filled in by the JSON coming from the database
},
pageSize: 20
},
height: 550,
groupable: false,
sortable: true,
resizable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
toolbar: kendo.template($("#template").html())
};
gridJSON.columns = currentReport.JSON.columns;
gridJSON.dataSource.schema.model.fields = currentReport.JSON.fields;
Here is the JSON for the 'currentReport.JSON.columns'
"columns" : [{
"field" : "ReceiverID",
"title" : "Receiver ID"
}, {
"field" : "ReceiverBatchID",
"title" : "Batch ID"
}, {
"field" : "PoNumber",
"title" : "PO Number"
}, {
"field" : "ReceiverTransactionDate",
"title" : "Receiver Trans Date",
"format" : "{0: yyyy-MM-dd}"
}, {
"field" : "PrintingLocation",
"title" : "Location"
}, {
"field" : "VendorID",
"title" : "Vendor ID"
}, {
"field" : "InNemo",
"title" : "InNemo"
}, {
"field" : "Path",
"title" : "Path",
"encoded" : "true",
"template": "#=Path#",
"width" : "50"
}
]