SearchPanes options are empty on the serverSide yajra dataTable - laravel

I tried to use the SearchPanes on the serverSide datatable, but It doesn't work; the SearchPanes options are empty.
public function getSalesReturnsData()
{
$sales = Sale::query()
->select(DB::raw("Bestelldatum, kLieferscheinPos ,cBestellNr,
Verkaufsplattform, SKU, GTIN, HAN, Hersteller, Lieferant, cName,
Menge, VKPreis, UVP, Farbe, Groesse, Warengruppe, Transaktion,
Anmerkung, Lieferland, Versandart, Zahlungsart, VersandkostenBrutto,
GutscheinBestellungBrutto"))
->where('Bestelldatum', '>', now()->subDays(30)->endOfDay());
$returns = ProductReturn::query()
->select(DB::raw("Retourendatum, kRMRetoure,cBestellNr, Verkaufsplattform,
SKU, GTIN, HAN, Hersteller, Lieferant, cName, Menge, VKPreis, UVP, Farbe,
Groesse, Warengruppe, Transaktion, Anmerkung, Lieferland, Versandart,
Zahlungsart, VersandkostenBrutto, GutscheinBestellungBrutto"));
$results = $sales->unionAll($returns);
return DataTables::of($results)
->addColumn('Bestelldatum', function ($row) {
$bestelldatum = date("d.m.Y", strtotime($row->Bestelldatum));
return $bestelldatum;
})->make(true);
}
JavaScript
$(document).ready(function () {
load_data();
function load_data() {
$('#datatable').DataTable({
processing: true,
serverSide: false,
ajax: {
url: "{{ route('getSalesReturnsData') }}"
},
"columns": [{
"data": "Bestelldatum"
},
{
"data": "kLieferscheinPos"
},
{
"data": "cBestellNr"
},
{
"data": "Verkaufsplattform"
},
{
"data": "SKU"
},
{
"data": "GTIN"
},
{
"data": "HAN"
},
{
"data": "Hersteller"
},
{
"data": "Lieferant"
},
{
"data": "cName"
},
{
"data": "Menge"
},
{
"data": "VKPreis"
},
{
"data": "UVP"
},
{
"data": "Farbe"
},
{
"data": "Groesse"
},
{
"data": "Warengruppe"
},
{
"data": "Transaktion"
},
{
"data": "Anmerkung"
},
{
"data": "Lieferland"
},
{
"data": "Versandart"
},
{
"data": "Zahlungsart"
},
{
"data": "VersandkostenBrutto"
},
{
"data": "GutscheinBestellungBrutto"
},
],
dom: 'PBfrtip',
stateSave: true,
searchPanes: {
initCollapsed: true,
cascadePanes: true,
dtOpts: {
paging: 'flase',
pagingType: 'simple',
select: {
style: 'multi'
}
},
columns: [3, 5, 8, 6, 7, 9, 11, 16]
}
});
}
});

Related

DataTable Ajax Nested List

I am returning a nested list of json from an Ajax call and would like to populate my data table with this. F
or example: In my C# Class:
public class Product_Browser : Json_Response
{
public List<PRODUCT_TABLE> ProductData { get; set; }
public List<ProductPlans> ProductPlan { get; set; }
}
Javascript function:
$dtBrowser = $(dtElementID).dataTable({
filter: false,
serverSide: true,
processing: true,
responsive: true,
ajax: {
url: _Url,
type: "GET",
"dataSrc": function (jsonObj) {
console.log(jsonObj)
return jsonObj
}
},
columns: [
{ data: "ProductData.ProductKey", title:"Key", visible: true },
{ data: "ProductPlan.PlanID", title: "Id", visible: true },
],
order: [[1, "desc"]],
});
}
Now when i log the jsonObj it is valid JSON, but in my columns, data I don't know the correct way of accessing the two different lists of objects. I am able to do it for one list by changing the dataSrc to return jsonObj.ProductData but I need both pieces of data.
This is what my JSON looks like:
{
"ProductData": [
{
"ProductKey": 102234,
"ProductID": "TEST1",
},
{
"ProductKey": 102310,
"ProductID": "TEST2",
},
{
"ProductKey": 102319,
"ProductID": "TEST3",
},
],
"ProductGrabBagPlan": [
{
"PlanID": 1,
"ProductKey": 102234
},
{
"PlanID": 2,
"ProductKey": 102310
},
{
"PlanID": 3,
"ProductKey": 102319
},
],
"Success": true,
"Messages": [],
}

Kendo Grid Server side filtering with a array type column

I have this kendo grid blinded to my web service. One of the columns has a custom filter with a kendo multiselector array so the client can choose multiple ItemTypes. The grid is displaying data correctly but my costume filters are not working for this particular column. I got this error from the service: "A binary operator with incompatible types was detected. Found operand types 'Telerik.Sitefinity.DynamicTypes.Model.ClinicFinder.Clinic.ItemType.ItemType' and 'Edm.Int32' for operator kind 'Equal'."
My grid definition
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: function () {
return "//myservice/api/clinics?$select=Id,Title,Address,ItemType,productsystems&top=20";
}
}
},
schema: {
model: {
fields: {
Title: { type: "string" },
CountryCode: { type: "string" },
Street: { type: "string" },
City: { type: "string" },
Zip: { type: "string" },
ItemType: { type: "" }
}
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: false,
pageSize: 20
},
pageable: true,
filterable: {
mode: "row",
extra: false,
showOperators: false,
operators: {
string: {
contains: "contains"
}
}
},
sortable: false,
columns: [
{ field: "Title", title: "Clinic" },
{ field: "CountryCode", title: "Country" },
{ field: "Street", title: "Address" },
{ field: "City", title: "City" },
{ field: "Zip", title: "Zip", filterable: false },
{ field: "ItemType", title: "Clinic Type", filterable: { multi: true } }
],
rowTemplate: kendo.template($("#template").html())
});
My Filter function
function filterByclinicCategory() {
var filter = { logic: "or", filters: [] };
var grid = $('#grid').data('kendoGrid');
var filterValue = $("#clinicTypeFilter").data("kendoMultiSelect").value();
var clinicCode = [];
if (filterValue.length > 0) {
$.each(filterValue, function (i, v) {
clinicCode.push(convertClinicTypesInCodes(v));
filter.filters.push({
field: "ItemType", operator: "eq", value: clinicCode, logic: "or"
});
grid.dataSource.filter(filter);
});
} else {
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
ItemType is the column I canĀ“t filter.
My webservice data
{
"#odata.context": "https://sf-admin-local.medel.com/api/wstest/$metadata#clinics(*)",
"value": [
{
"Id": "896aa08b-2f17-64e6-80bd-ff09000c6e28",
"LastModified": "2019-05-13T09:28:04Z",
"PublicationDate": "2018-06-19T14:19:13Z",
"DateCreated": "2018-06-19T14:19:13Z",
"UrlName": "??",
"Email": "",
"URL": "",
"Telephone": "",
"Title": "????????",
"officeregions": [],
"salespartnerregions": [],
"productsystems": [
"b8ec2a8b-2f17-64e6-80bd-ff09000c6e28",
"1878cb61-ac79-69d9-867b-ff01007297b6",
"1b78cb61-ac79-69d9-867b-ff01007297b6",
"36d8938b-2f17-64e6-80bd-ff09000c6e28"
],
"Area": "",
"Order": 0,
"Tags": [],
"AdditionalInformation": "",
"ImportID": 1,
"Featured": false,
"ItemType": "2",
"Address": {
"Id": "d76aa08b-2f17-64e6-80bd-ff09000c6e28",
"CountryCode": "AT",
"StateCode": "",
"City": "????",
"Zip": "6800",
"Street": "Carinagasse ?????",
"Latitude": 47.2311043,
"Longitude": 9.580079999999953,
"MapZoomLevel": 8
}
}
]
}
I manage to fix it using parameterMap https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.parametermap.
I add a parameterMap: functiondata, type) function, with that I was able to intercept and change the call made by the filters.
parameterMap: function (data, type) {
var c = kendo.data.transports["odata-v4"].parameterMap(data, type);
if (c.$filter) {
//my transformation
c = myTransformation;
return c;
} else{
return c; //not apply transformation loading the data
}
}

DataTables Searching Option is not working

If i search "Hossain" datatable is not getting sorted. Though this data is available in datatable. How can i solve this problem?
var table = $('#list_table').DataTable( {
"processing": true,
"serverSide": true,
"destroy": true,
"searching": true,
"ordering": true,
"bInfo": true,
"paging": true,
"ajax": {
"url": "{{URL::to('/')}}/current_employeelist",
"type": "POST",
"headers":{'X-CSRF-TOKEN': '{{ csrf_token() }}'},
"data": {location: $("#location").val()}
},
"columns": [
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="{{asset('employee_image')}}/'+JsonResultRow.Images+'" style="height:30px; width:30px; border-radius: 30px;"/>';
}
},
{ "data": "Link",
"mRender": function (data, type, full) {
return '<a target="_blank" href="{{URL::to('/')}}/employeeinfo/'+full.id+'">'+full.employee_name+'</a>';
}
},
{ "data": "location_name" },
{ "data": "depertment_name" },
{ "data": "designation_name" },
{ "data": "contact_number" },
{ "data": "joining_date" },
#permission('EditEmployeeInfo')
{ "data": "Link", name: 'action', orderable: false, searchable: false},
#endpermission
],[enter image description here][1]
"order": [[0, 'asc']]
});
I want to get searching actual data from datatable.
Image is here

ExtJS: How to hide specific data on store with filtering?

I want to hide a record on Grid that returns from server.
I've setted a filter on store and can reach that specific data but how I'll handle to hide/ignore this record?
fooStore: {
....
filters: [
function(item) {
let me = this;
let theRecord = item.data.status === MyApp.STATUS; //true
if (theRecord) {
console.log(theRecord); //True
console.log("So filter is here!!")
//How to hide/ignore/avoid to load this specific data record to load Grid??
}
}
]
},
Returned JSON;
{
"success": true,
"msg": "OK",
"count": 3,
"data": [
{
//Filter achives to this record and aim to hide this one; avoid to load this record.
"id": 102913410,
"status": "P"
},
{
"id": 98713410,
"status": "I"
},
{
"id": 563423410,
"status": "A"
}
]
}
I can't save my fiddle cause i don't have sencha forum's account so i give you my code :
Ext.application({
name : 'Fiddle',
launch : function() {
var model = Ext.create('Ext.data.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'status', type: 'string'},
]
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: model,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
filters: [function(item) {
if (item.data.status === "P") {
return true;
}
else {
return false;
}
}],
listeners: {
load: {
fn: function() {
console.log(this.getRange());
}
}
}
});
}
});
Also i create data.json like this :
{
"success": true,
"msg": "OK",
"count": 3,
"data": [{
"id": 102913410,
"status": "P"
}, {
"id": 98713410,
"status": "I"
}, {
"id": 563423410,
"status": "A"
}]
}
I thinks it's near to you'r code and after the loading of the store the filter work as you can this :
Here is sencha fiddle link : https://fiddle.sencha.com/#view/editor
If this can't work, i don't understand what the fuck doing...

Datagrid delete column with confirmation

This is my code
function GetLaminasyon() {
$('#tblLaminasyon').DataTable().destroy();
$('#tblLaminasyon').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searching":false,
"data": objLaminasyon,
"columns": [
{ "data": "Name" },
{ "data": "Amount" },
{ "data": "Price" },
{
"data": "Id",
"render": function(data,type,row) {
var actionButton = "<button type='button' id='btnDeleteLaminasyon' class='btn btn-danger'>Sil</button>";
return actionButton;
}}
]
} );
}
How can i a delete confirmation for this datatable? I tried to find the solution but i couldnt find it. thanks a lot.

Resources