How can i set fixed right column(action) in laravel datatables like this simple example - not work in laravel). Thanks
tableWatches = $('.datatable-watches').DataTable({
orderCellsTop: true,
fixedHeader: false,
dom: "Bfrtip",
"pageLength": 50,
"processing": true,
"serverSide": true,
scrollY: true,
scrollX: true,
scrollCollapse: true,
paging:false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
"ajax": {
url: "/admin/watches/all-watches",
data: {
condition: condition,
}
},
"searchCols": [
.................
],
columns: [
..................
],
});
Method, which created table content
And this part (
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
not worked, without errors and warnings, columns still arent fixed.
Need more explanation!
Totally there is no difference between plain js datatable and yajra/laravel-datatables-oracle.
If you wanna use it locally, just need a 100% with table:
<table id="users" class="table responsive" width="100%"></table>
And a js script to feed datatable by jso data:
$('#users').DataTable({
responsive: true,
"data": [
{
"first_name": "the first name1",
"last_name": "the last name1"
},
{
"first_name": "the first name2",
"last_name": "the last name2"
},
]
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
});
Also for server side feeding datatables, Just use ajax:
$('#users').DataTable({
responsive: true,
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
ajax: {
url: your_post_url_returning_datatable_object_json,
type: 'POST'
},
});
As i mentioned, you can define each column of table or make horizontally scrollable:
scrollX: '100%',
Related
I am using KTDatatable. it works like a charm in desktop view. but when I view the table on the mobile screen, only first two-column is being shown. Code:
<div class="kt-datatable"></div>
<script>
function listing(){
$('.kt-datatable').KTDatatable({
translate: {
records: {
processing: '{{"Please wait"|__}}...',
noRecords: '{{"No records found"|__}}'
},
toolbar: {
pagination: {
items: {
default: {
first: '{{"First"|__}}',
prev: '{{"Previous"|__}}',
next: '{{"Next"|__}}',
last: '{{"Last"|__}}',
more: '{{"More pages"|__}}',
input: '{{"Page number"|__}}',
select: '{{"Select page size"|__}}'
},
info: "{{"Displaying"|__}} {{ '{{' }}start{{ '}}' }} - {{ '{{' }}end{{ '}}' }} {{"of"|__}} {{total}} {{"records"|__}}"
}
}
}
},
// layout definition
layout: {
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#generalSearch'),
delay: 400,
},
data: {
type: 'remote',
source: {
read: {
url: '{{url("api/dashboardpayments")}}'
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
// columns definition
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100
},
{
field: "amount",
title: "{{'Amount'|__}}",
sortable: false,
width: 'auto',
},
{
field: "trxId",
title: "{{'trxId'|__}}",
sortable: false,
width: 'auto'
},
{
field: "for",
title: "{{'Service'|__}}",
sortable: false,
width: 'auto'
},
{
field: "created_at_date",
title: "{{'Date'|__}}",
sortable: false,
width: 'auto',
},
{
field: "Actions",
width: 100,
title: "{{'Actions'|__}}",
sortable: false,
overflow: 'visible',
template: function (data) {
var output = '' +
'<div class="btn-group btn-group">'+
'<a href="javascript:;" data-id='+data.id+' class="btn btn-brand btn-sm btn-icon confirmPayment" data-skin="dark" data-toggle="kt-tooltip" data-placement="top" title="{{"OK"|__}}"><i class="fa fa-check"></i></button>';
'</div>';
return output;
},
}
]
});
$('body').tooltip({selector: '[data-toggle="kt-tooltip"]'});
}
</script>
I am trying a lot of possible ways of custom CSS. But no luck. Any idea?
To make this work you can add the following:
rows: {
autoHide: false
},
AND
// layout definition
layout: {
scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
header: true,
},
I just put autoHide:false in a column definition. i.e:
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100,
autoHide: false
}
]
I want to export the details in form of pdf file.Pdf are downloaded but only headers means product,quantity,price ,total only missing the body of the content means product details.
$("#list_records_view").jqGrid({
url: "view.php?name="+sample,
datatype: "json",
mtype: "GET",
colNames: ["Product", "Price", "Qty", "Total", "Date"],
colModel: [
{ name: "product" },
{ name: "price" },
{ name: "qty" },
{ name: "total" },
{ name: "date" }
],
pager: "#perpageview",
rowNum: 10,
rowList: [10,20],
sortname: "id",
sortorder: "asc",
height: 200,
width: 780,
viewrecords: true,
//loadonce: true,
gridview: true,
//editurl: "clientArray",
caption: ""
});
$("#export").on("click", function(){
$("#list_records_view").jqGrid("exportToPdf",{
title: 'Customer Report',
orientation: 'portrait',
pageSize: 'A4',
description: 'Purchase Report',
customSettings: null,
download: 'download',
includeLabels : true,
includeGroupHeader : true,
includeFooter: true,
fileName : "jqGridExport.pdf"
})
});
Exporting to PDF, CSV, Excel is possible only with datatype set to local or with loadonce parameter set to true.
In order to make the export possible you need to uncomment loadonce : true and make it active.
More on exporting features can be read here:
Here is my scenario. My jqgrid v5.2.1 doesn't display any data when a page loads up. It is by design. Users will either have to enter all the data for the grid and subgrid manually or click a button to load a default data from the server in the json format via
$("#jqGrid").jqGrid('setGridParam', { datatype: 'local', data: dataResponse.groups }).trigger("reloadGrid");
Users perform CRUD operations locally until the data is right in which case a button is clicked and the grids data goes to the server via $("#jqGrid").jqGrid('getGridParam', 'data').
Edit/Delete operations work fine with the default data loaded but I have a problem with adding new records.
Id's of new rows are always _empty(which is fine because the server side will generated it), but the new rows from the subgrids are not transferred to the server. The question is how to establish the relationship between the newly created rows in the main grid and associated rows in the subgrid and then transfer everything to the server for processing?
Here is the code:
var mainGridPrefix = "s_";
$("#jqGrid").jqGrid({
styleUI: 'Bootstrap',
datatype: 'local',
editurl: 'clientArray',
postData: {},
colNames: ['Id', 'Group', 'Group Description', 'Markets', 'Group sort order'],
colModel: [
{ name: 'id', key: true, hidden: true },
{ name: 'name', width: 300, sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
{ name: 'description', width: 700, sortable: false, editable: true, editoptions: { maxlength: 256 } },
{ name: 'market', width: 200, sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
{ name: 'sortOrder', width: 130, sortable: false, editable: true, formatter: 'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: ',', decimalPlaces: 2 } }
],
sortname: 'Id',
sortorder: 'asc',
idPrefix: mainGridPrefix,
subGrid: true,
//localReader: { repeatitems: true },
jsonReader: { repeatitems: false},
autowidth: true,
shrinkToFit: true,
loadonce: true,
viewrecords: true,
rowNum: 5000,
pgbuttons: false,
pginput: false,
pager: "#jqGridPager",
caption: "Group Template",
altRows: true,
altclass: 'myAltRowClass',
beforeProcessing: function (data) {
var rows = data.rows, l = rows.length, i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.groupItems) {
subgrids[item.id] = item.groupItems;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData"),
subgridPagerId = subgridDivId + "_p";
$("#" + $.jgrid.jqID(subgridDivId)).append($subgrid).append('<div id=' + subgridPagerId + '></div>');
$subgrid.jqGrid({
datatype: "local",
styleUI: 'Bootstrap',
data: subgrids[pureRowId],
editurl: 'clientArray',
colNames: ['Item', 'Item Description', 'Health Standard', 'Sort order', 'Statuses', 'Risks', 'Solutions', 'Budgets'],
colModel: [
{ name: 'itemName', width: '200', sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
{ name: 'itemDescription', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'healthStandard', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'itemSortOrder', width: '200', sortable: false, editable: true, formatter: 'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: ',', decimalPlaces: 2 } },
{ name: 'statuses', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'risks', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'solutions', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
{ name: 'budgets', width: '400', sortable: false, editable: true, editoptions: { maxlength: 100 } }
],
//rownumbers: true,
rowNum: 5000,
autoencode: true,
autowidth: true,
pgbuttons: false,
viewrecords: true,
pginput: false,
jsonReader: { repeatitems: false, id: "groupId" },
gridview: true,
altRows: true,
altclass: 'myAltRowClass',
idPrefix: rowId + "_",
pager: "#" + subgridPagerId
});
$subgrid.jqGrid('navGrid', "#" + subgridPagerId, { edit: true, add: false, del: true, search: true, refresh: false, view: false }, // options
{ closeAfterEdit: true }, // edit options //recreateForm: true
{ closeAfterAdd: true }, // add options
{}, //del options
{} // search options
);
}
});
$('#jqGrid').navGrid('#jqGridPager', { edit: true, add: false, del: true, search: true, refresh: false, view: false }, // options
// options for Edit Dialog
{
editCaption: "Edit Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
bottominfo: "<br/>",
recreateForm: true,
closeOnEscape: true,
closeAfterEdit: true
},
// options for Add Dialog
{
//url:'clientArray',
addCaption: "Add Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
bottominfo: "<br/>",
recreateForm: true,
closeOnEscape: true,
closeAfterAdd: true
},
// options for Delete Dailog
{
caption: "Delete Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
msg: "Are you sure you want to delete?",
recreateForm: true,
closeOnEscape: true,
closeAfterDelete: true
},
// options for Search Dailog
{
caption: "Search Group",
beforeShowForm: function (form) {
form.closest('.ui-jqdialog').center();
},
recreateForm: true,
closeOnEscape: true,
closeAfterDelete: true
}
);
There was a small bug in the form editing which is fixed now. Thank you for help us to find them.
Now to the problem.
When you add data in main grid it is natural to add a unique id of every row. Since of the bug instead of inserting a row with the Guriddo id Generator there was a wrong insertion with id = s_empty. This causes every inserted row in main grid to have same id, which is not correct.
The fix is published in GitHub and you can try it.
We have updated your demo in order to insert correct the data in the subgrid. The only small addition is in afterSubmit event in add mode, where the needed item is created.
Hope this will solve the problem
Here is the demo with the fixed version
Edited
At server you can analyze the id column if contain string 'jqg', which will point you that this is a new row. The corresponding id for the subgrid is in userData module which will connect the main grid id with the subgrid data
EDIT 2
One possible solution to what you want to achieve is to get the main data and the to get the subgrid data using userData property. After this make a loop to main data and update it like this
var maindata = $("#jqGrid").jqGrid('getGridParam', 'data');
var subgrids = $("#jqGrid").jqGrid('getGridParam', 'userData');
for(var i= 0;i < maindata.length;i++) {
var key = maindata[i].id;
if(subgrids.hasOwnProperty(key) ) {
if(!maindata[i].hasOwnProperty(groupItems) ) {
maindata[i].groupItems = [];
}
maindata[i].groupItems = subgrids[key];
}
}
The code is not tested, but I think you got the idea.
The other way is to update the groupitems on every CRUD of subgrid, which I think is not so difficult to achieve.
I am trying to implement sortable rows in jqgrid, I have searched a lot but still sortable rows is not working. Here is my js files I have included
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.6.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.layout.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src.js")"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
here is my code
function BindGridView(columnNames, colModel) {
myData = [
{ ID: "1", Name: "Aswin", Value: "2" },
{ ID: "3", Name: "bshley", Value: "2" },
{ ID: "2", Name: "sgnel", Value: "4" },
{ ID: "4", Name: "dnoop", Value: "6" }
];
var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
$("#dataList").jqGrid('GridUnload');
jQuery("#dataList").jqGrid({
datatype: "local",
data: myData,
loadonce: true,
colNames: ["ID", "Name", "Value"],
colModel: [
{ name: "ID", width: 80 },
{ name: "Name", width: 90 },
{ name: "Value", width: 80, align: "right" }
],
autowidth: true,
width: 'auto',
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
scrolling: true,
shrinktofit: true,
pager: '#pager',
sortable: true,
sortname: 'Name',
rownumbers: false,
rownumWidth: 30,
viewrecords: true,
sortorder: "desc",
multiselect: false,
imgpath: gridimgpath,
}).navGrid("#pager",
{ refresh: false, add: false, edit: false, search: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{} // Search options. Some options can be set on column level
);
}
jQuery("#dataList").jqGrid(
'sortableRows',
{
update: function (e, ui) {
console.log("sortable");
alert("item with id=" + ui.item[0].id + " is droped");
}
});
jQuery("#dataList").setGridParam({ data: myData }).trigger("reloadGrid");
Grid is loaded with data but drag drop functionality of sortable row is not working.
i am very much new to kendo grid, so please consider my question and help me.
i have a coldfusion page which has an array variable that contains all the user records retrieved from database.
now i have a function, for pagination.
i want to enable server side paging in this, but actually have no idea on how to do this.
please help.
$(document).ready(function(){
$("#data_table3").kendoGrid({
dataSource: {
pageSize: 10
},
pageable: {
refresh: true,
pageSizes: true
},
columns: [ {
field: "UserName",
width: 90,
title: "User Name"
} ,
{
field: "FirstName",
width: 90,
title: "First Name"
}
],
height: 460,
sortable: true
});
$("#data_table").show();
});
Hi try like this ,
$("#appointmentsGrid").kendoGrid({
columns: [
{ field: "MemberFirstName", title: "Member<br/>First Name" },
{ field: "MemberLastName", title: "Member<br/>Last Name" }
],
dataSource: new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: "/Content/GetCustomerNameWithId",
data: additionalData
}
},
pageSize: 10,
schema: { data: "data", total: "total" }
}),
pageable: true,
sortable : true
});