A re-post of my previous question as I am not getting any satisfactory answer
The problem is as follows :
I have given my code in JSBin http://live.datatables.net/aqowib/2 for which I am not able to link to the sSwfPath properly. I am using codeiginter in my application so I am trying to load the files as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://<?php base_url(); ?>/assets/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="http://<?php base_url(); ?>/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="http://<?php base_url(); ?>/media/js/ZeroClipboard.js" type="text/javascript"></script>
<script src="http://<?php base_url(); ?>/media/js/TableTools.js" type="text/javascript"></script>
And my script tag contains the following code:
$(document).ready(function(){
var oTable = $('#datatables').dataTable({
"sPaginationType":"full_numbers",
"sDom": 'Tlfrtip',
"oTableTools": {
"sSwfPath": "<?php base_url();?>/media/swf/copy_cvs_xls_pdf.swf"
},
"sScrollX": "100%",
"bScrollCollapse": true,
"bAutoWidth": true,
"aaSorting":[[0, "asc"]],
"bJQueryUI":true
}).columnFilter({
aoColumns: [ null,
null,
{ type: "select", values: [ 'male', 'female'] },
null,
null,
null,
null,
{ type: "select", values: [ '1', '2', '3', '4', '5', '6', '7','8','9','10'] },
{ type: "select", values: [ 'A', 'B', 'C'] },
null,
{ type: "select", values: ['P', 'A'] },
null,
null,
null
]
});
});
Everytime I am getting the 404 error saying that Unable to load SWF file - please check the SWF path
Please help me where am I wrong ?
Thanks in advance.
Ah, Got the solution !!
You just need to configure the sSwfPath URL in the TableTools.js file i.e.
CHANGE TableTools default settings for initialisation
Here I go :
TableTools.DEFAULTS = {
"sSwfPath": "http://localhost/codegen/media/swf/copy_cvs_xls_pdf.swf", <----------------- HERE IS WHERE I GOT STUCK
"sRowSelect": "none",
"fnPreRowSelect": null,
"fnRowSelected": null,
"fnRowDeselected": null,
"aButtons": [ "copy", "csv", "xls", "pdf", "print" ]
};
Thanks :-)
No need to write full path
Just place echo before base_url :)
Change
<?php base_url();?>
To
<?php echo base_url();?>
Related
I came across this, and i really don´t know how to change it. I have column field like this:
{ field: "nome", title: "Nome", width: "20px", template: '<span><img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/></span>#= nome #',hideMe: true},
As you can see, i´m using a template and inside it there´s an image...it´s basically a icon that appears on the left side of the text in each row. What i want is to change this icon dinamically, so i know i have to use the dataBound function, and iterate through rows, and i´m actually doing this, but i don´t know how to access the template and his content:
my dataBound:
var grid = this;
grid.tbody.find('>tr').each(function()
{
var dataItem = grid.dataItem(this);
console.log(dataItem);
if(dataItem.tipo === 'pdf')
{
"what do i do here" ?
}
});
Thanks for your time, regards.
EDIT:
Hi everyone, thanks to your suggestions, i found a way, here it is for someone who could have the same problem:(in the databound put this)
var grid = $("#gridBaseDados").data("kendoGrid");
$(grid.tbody).find('tr').each(function ()
{
var dataItem = grid.dataItem(this).tipo;
var ficheiroValExtension = dataItem.split('.').pop();
if(ficheiroValExtension === 'pdf')
{
$(this).find('img').prop('src', 'index.hyperesources/icon_rowPdf.png').css('width','17px').css('height','22px');
}
}
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="Grid">
</div>
<script>
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
template: '<img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/>'
}
]
});
});
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).find('tr').each(function () {
$(this).find('img').prop('src', 'Your new image src');
//Below syntax will return orderID
//$($(this).find('td').get(0)).html()
});
}
</script>
</body>
</html>
Let me know if any concern.
As i understand you want to show specific image corresponding to each data item. Then you have two options:
1.Additional field in dataSource that represents img.src
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=imgSrc#" .../></span>#= nome #',
hideMe: true
}
2.Use clientSide function that return image source dependent on data item:
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=getImgSrc(data)#" .../></span>#= nome #',
hideMe: true
}
and function itself:
var getImgSrc = function(item)
{
if(item.tipo === 'pdf') { return ... }
...
}
Update: of course for that no need to iterate dataSource in dataBound event
I want to filter 3rd column field as per write in text field. But its not work. And i also want to column filter textfield after table head.
JS
<script type="text/javascript" src="assets/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.datatables.columnfilter.js"></script>
JS
<script>
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bFilter" : true,
//"bServerSide": true,
"aaSorting": [[0,'desc']],
"aoColumns":[{ "bVisible":false, "bSearchable": false, "bSortable": false},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": rendercheckbox},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": renderucwords},
{ "bVisible":true,"bSearchable": true, "bSortable": false , "mRender": renderattachment, "sClass": "center"},
{ "bVisible":true, "bSearchable": false, "bSortable": false ,"mRender": renderaction , "sClass": "center"}],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"sAjaxSource":"<?php echo site_url('admins/promotion/getdata');?>"
} ).
columnFilter({
sPlaceHolder: "head:before",
bFilter: false,
aoColumns: [ null,
null,
{ type: "text",
},
null,
null
]
});
});
</script>
Use
$('#example').DataTable( {});
Instead of
$('#example').dataTable( {});
Also check for any javascript error in console
I've put together a simple example of a KendoUI web grid:
<div id="peopleGrid"></div>
<link type="text/css" rel="stylesheet" href="/Content/kendoui.web.2012.3.1114.commercial/styles/kendo.common.min.css" />
<link type="text/css" rel="stylesheet" href="/Content/kendoui.web.2012.3.1114.commercial/styles/kendo.default.min.css" />
<script type="text/javascript" src="/Content/kendoui.web.2012.3.1114.commercial/js/kendo.web.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#peopleGrid').kendoGrid({
dataSource: {
type: 'json',
transport: {
read: '/People/JsonTest'
},
schema: {
model: {
fields: {
ID: { type: 'number' },
FirstName: { type: 'string' },
LastName: { type: 'string' }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
resizable: true,
reorderable: true,
editable: {
mode: 'popup'
},
toolbar: ['create'],
columns: [
{
field: 'ID',
filterable: false,
hidden: true
},
{
field: 'FirstName',
title: 'First Name'
}, {
field: 'LastName',
title: 'Last Name'
},
{
command: ['edit', 'destroy'], title: ' '
}
]
});
});
</script>
The grid initializes and looks correct. And when I click on an edit button on a record or the create button in the toolbar, the popup displays. However, it doesn't appear to be animating. It's visible in the center of the window as only a few pixels.
Examining the DOM shows this as a style for the popup's containing element:
transform: scale(0.1);
Editing this in the DOM fixes the display. So it looks like there should be some animation taking place which isn't. Is there something wrong in my code that's preventing it, or maybe another resource I need to include? When the popup is active, pressing esc to close it results in a small animation which expands it to normal size while at the same time fading it out. So the animation appears to be happening at the wrong time. Any ideas?
Additionally, I'm seeing that when the popup is closed the associated record is removed from the grid. That one I have no idea why it's happening. But any advice would be much appreciated. Thanks!
This sounds like a bug that we fixed. Try downloading the latest internal build.
I had the same problem. Turns out it was caused by using a slightly out-of-date verion of jQuery.
Kendo UI currently requires version 1.8.2
I've tried and I finally give up trying to figure out why my jqGrid doesn't display data.
Let me try and go step-by-step:
The below is what is included for the script...
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
The JSON returned:
{
"total": 1,
"page": 1,
"records": 1,
"rows": [
{
"id": "0001",
"cell": [
"0001",
"XXXXX",
"XXXX",
"XXX",
"XXX",
"XXXXX",
"XXXX",
"7/27/2012 1:46:22 PM",
"XXXXX",
"7/30/2012 3:48:25 PM"
]
}
]
}
The jqGrid Code is as follows:
jQuery(function ($) {
jQuery('#tblManageApplication').jqGrid({
url: '/AdminView/ManageApplicationsJQGridData',
datatype: 'json',
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: 'GET',
colNames: ['Application ID', 'Application Name', 'Application Description', 'Country Code', 'Country Name', 'Source Indicator Code', 'Insert User ID', 'Insert User Timestamp', 'Update User ID', 'Update User Timestamp'],
colModel: [
{ name: 'ApplicationID', jsonmap: 'cell.ApplicationID', width: 150 },
{ name: 'ApplicationName', jsonmap: 'cell.ApplicationName', width: 200 },
{ name: 'ApplicationDescription', jsonmap: 'cell.ApplicationDescription', width: 250 },
{ name: 'CountryCode', jsonmap: 'cell.CountryCode', width: 100 },
{ name: 'CountryName', jsonmap: 'cell.CountryName', width: 100 },
{ name: 'SourceIndicatorCode', jsonmap: 'cell.SourceIndicatorCode', width: 100 },
{ name: 'InsertUserID', jsonmap: 'cell.InsertUserID', width: 100 },
{ name: 'InsertUserTimestamp', jsonmap: 'cell.InsertUserTimestamp', width: 100, formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, datefmt: 'd-m-Y' },
{ name: 'UpdateUserID', jsonmap: 'cell.UpdateUserID', width: 100 },
{ name: 'UpdateUserTimestamp', jsonmap: 'cell.UpdateUserTimestamp', width: 175, formatter: 'date', formatoptions: {newformat: 'd-m-Y'}, datefmt: 'd-m-Y' }
],
pager: jQuery('#pager'),
sortName: 'ApplicationID',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [10, 20, 50],
sortorder: 'desc',
height: 300,
width: 1200,
caption: 'Manage Applications',
onCellSelect: function (rowid, index, contents, event) {
alert('onCellSelect: ' + index + ' : ' + contents);
},
success: function (data, textStatus) {
if (textStatus == 'success') {
alert('Successful');
}
},
error: function (data, textStatus) {
alert('An error has occurred');
}
});
});
Wanted to add the corresponding HTML for your reference:
<table id="tblManageApplication"></table>
<div id="pager"></div>
Any help will be greatly appreciated.
first, can you confirm that that data you are sending from controller and colModal names are same alphabetically?
second check your json reader
check this link
http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm i think you need to specify a couple of things here like id and records.
The main error in your code is the usage of jsonReader: { repeatitems: false } option and jsonmap in the case where you don't need there at all. You produce the data in the standard format. So you have to remove the options to be able to fill the grid.
Additionally I would recommend you to change the data format to ISO 8601 format (you can use "o" format of DateTime on the server code) or at least define correct srcformat:
formatoptions: {srcformat: 'm/d/Y g:i:s A', newformat: 'd-m-Y'}
The demo demonstrate that the changes which I described above working.
I'm using datatables with the jeditable plugin, I have it setup to update directly to mysql, I need to validate some input fields to make sure a URL is being inserted. I have this code which validates jeditable fields (see jsfiddle) I need some help to integrate the jsfiddle with the table initializing code. I can add the onsubmit no problem but not sure how to add this part into my .makeEditable function, any help's appreciated thanks.
$('#url').editable(function(valurl) {
// Do your own stuff here...
return valurl;
},
http://jsfiddle.net/peter/CLuvp/
And my datatable is initialized with
var oTable3;
$(document).ready(function() {
oTable3 = $('#table3').dataTable( {
"sDom":'t<"bottom"ifpl><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false},
null,
null,
null,
null
]
}
).makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null,
null,
{
type: 'text',
submit:'Ok',
cancel:'Cancel',
width: "100px"
}
I think you can simply include the options for each column in the aoColumns option, e.g.:
.makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null, null,
{
submit: 'Save',
width: 200,
placeholder: 'Enter URL...',
onblur: 'submit',
onsubmit: function() {...}
}]
});
A cleaner way (or the aforementioned simply doesn't work) would be to use the url rule in that column:
.makeEditable({
sUpdateURL: "<?=$this->siteUrl()?>profiles/updatevalue",
"aoColumns": [null, null,
{
submit: 'Save',
width: 200,
placeholder: 'Enter URL...',
onblur: 'submit',
cssclass: 'url'
}]
});
See this demo for more details.