DataTables 1.10.13 YADCF 0.9.3
Ajax data.
On load I'm calling following function:-
columnDataType= columnd data type to set filter type
columns = to get column title to set label
table = table object to init yadcf plugin
function addFilter(columnDataType,columns,table){
var col = "";
var type="";
var label = "";
for(var i=0;i<columnDataType.length;i++){
if(columnDataType[i]=="Character"){
col = i;
type = "text";
for(var index=0;index<columns.length;index++){
if(i==index)
label = "Select "+columns[i].title;
}
yadcf.init(table, [{
column_number: col,
filter_type: type,
filter_default_label : label
}]);
} else if(columnDataType[i]=="Number"){
col = i;
type = "range_number";
yadcf.init(table, [{
column_number: col,
filter_type: type
}]);
} else if(columnDataType[i]=="Date"){
col = i;
type = "date";
label = "dd-MMM-yyyy";
yadcf.init(table, [{
column_number: col,
filter_type: type,
moment_date_format: 'dd-MMM-yyyy',
filter_default_label : label
}]);
}
}
}
Above implementation giving Cannot read property 'filter_delay' of undefined error
So, the scenario is that columns(no.,type) are dynamic,table might have multiple character columns for which I want to set text filter type, multiple date,number columns etc.So How to pass these column no.s to plugin like:-
yadcf.init(table, [{
column_number: col1,col2,col3,
filter_type: 'text',
filter_default_label : label
}]);
OR
var col = [col1,col2,col3];
yadcf.init(table, [{
column_number: col,
filter_type: 'text',
filter_default_label : label
}]);
You can't init yadcf like that , each column filter definition should have its own object
you can create them in a loop and push into array which later can be passed to yadcf.init function
Related
I am using Master detail in Kendo Grid in AngularJS.
Here is the setup of the code:
In cshtml is:
<script type="text/x-kendo-template" id="template">
<div>
<div class="orders"></div>
</div>
</script>
In the AngularJS controller is
The MasterRowId is the id of the Column in the Master row. So the Master grid is a grid with
columns Id and name
$scope.getorders = function (masterRowId)
{
myservice.getorders(masterRowId)
.then(function (result) {
for (var j = 0; j < result.data.length; j++)
$scope.ordergroupdata.push(result.data[j]);
});
}
In the master grid definition i have
......
detailTemplate: kendo.template($("#template").html()),
detailInit: $scope.detailInit,
The definition of $scope.detailInit is
$scope.detailInit = function (e)
{
$scope.MasterRowId = e.data.Id;
$scope.getorders ($scope.MasterRowId);
var orderdata = $scope.ordergroupdata;
var orderdatasource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(orderdata);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.orderdata;
item.Id = orderdata.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
OrderId: { type: 'string'},
}
}
},
});
e.detailRow.find(".orders").kendoGrid({
dataSource: orderdatasource,
columns: [
{ field: "OrderId", title: "OrderId" },
]
});
}
The issue is that if i click on the first row , i can retrieve the data according to the MasterRowId from my MVC action method. So If i click on the first row and the MasterRowId is for example 10 , then i get an OrderId of "1234" .
I can click on the second row with MasterRowID of 15 and it will retrieve the OrderId of "8231", BUT if i go back to the first row the data (OrderId) in the details grid is actually the data from the second row, so its "8321" NOT "1234".
How can i always call the $scope.detailInit so that i can go back to the MVC Action method and always retrieve the correct data for that particular row with that MasterRowId ?
Once i expand the row and move on to another row , the detailsInit doesnt get called any more for that row ?
detailInit is only called on first expand, but you can use detailExpand that is called every time you expand the detail table.
Offical example:
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
detailExpand: function(e) {
console.log(e.masterRow, e.detailRow);
}
});
</script>
Docs: detailExpand
Official example: detailExpand example
I am trying to create AG-grid (NOT UI Grid)where the column headers have to be loaded dynamically from the JSON response. I have tried many ways but I could not accomplish so any help is very much appreciable.
Grid – The format which I am expecting (Image attached)
In the grid, the first two columns Part No and Part Name are fixed. The remaining columns are dynamic where the column header is not decided before initializing the grid.
I’m ready to change the JSON format to make the grid format
JSON Format
[
{
"partNo":"P00001",
"partName":"AAAAA",
"periodList":[
{
"period":"Jan-15",
"periodValue":"267"
},
{
"period":"Feb-15",
"periodValue":"347"
}
]
},
]
AG GRID Sample Format
My understanding of angular is limited, but I am will attempt to help (disclaimer:) Though, I am sure there is an easier method, I hope this one helps
//For convenience, lets call your dataset partSales.
//1st get dynamic columns
var myDynamicColumns = getMyDynamicColumns(partsales);
//2nd format data to make period data have a unique name.
//Note the periodValue will be assigned to its period e.g. 'Jan-15':'267'
//This should match the columnDefs field value. e.g. field: 'Jan-15'
var myData = myDataFormatter(partsales);
//fixed columns
var gridOColDefs = [
{
field: 'partNo',
enableCellEdit: false,
headerName: 'Part No',
},
{
field: 'partName',
enableCellEdit: false,
headerName: 'Part Name',
cellClass: 'text-right',
width: 45,
headerGroup: 'Farm'
}].concat(myDynamicColumns);
];
//Define you grid options
var gridOptimizerOptions = {
pinnedColumnCount:2,
columnDefs: myDynamicColumns,
rowData: myData
};
//Returns an list of dynamic column definitions
function getMyDynamicColumns(partsales){
var columnFields = [];
//loop though parts
_.each(partSales, function(singlePartSale){
//loop through periods
_.each(singlePartSale.periodList, function(period){
var periodTitle = period.period;
//Do something to make sure the column definition has not already been added. The conditional syntax below is not valid.
if(periodTitle is not in columnFields){
columnFields.push(
{
//You will have to flush this out. You may need to loop through you data and give each period an unique name.
field: [periodTitle],
headerName: [periodTitle],
width: 50
});
} //end condition
}); //periods loop
});//end parts loop
//Return new column defs so they can be concattinated to the fixed column Definitions
return columnFields;
}
function myDataFormatter(partSales){
var newDataList = [];
_.each(partSales, function(partSale){
var newData = {
partNo = partSale.partNo,
partName = partSale.partName
}
_.each(partSale.periodList, function(singlePeriod){
var newField = singlePeriod.period;
newData.push([newField] = singlePeriod.periodValue);
});
newDataList.push(newData);
})
return newDataList;
})
// so your data should look like this from the data formatter function.
[{
'partNo':"P00001",
'partName':'AAAAA',
'Jan-15':"267",
'Feb-15':"347",
...and so on.
},
{
'partNo':"P00002",
'partName':'AAAB',
'Jan-15':"421",
'Feb-15':"2",
...and so on.
}]
I have a cell template that displays data from an external ui-select. However I only want the cell template to appear if the row(s) is/are selected. Here is my current code:
$scope.gridOptions.columnDefs = [
{ name: 'resourceChannel',
cellTemplate: '<div ng-if="$(\'.ui-grid-row\').hasClass(\'ui-grid-row-selected\')">{{grid.appScope.channel.selected.channel}}</div>'},
];
You could add something like a Row-Selected-Listener and ng-if - check if the current row is in the selection.
I added a Plunkr that demonstrates a possiblity of show/hide cellTemplate.
First you add an ng-click to the ui-grid rowtemplate, f.e. addRowtoSelection().
$templateCache.put('ui-grid/uiGridViewport',
...
"<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
"ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
...
);
Then you add that function to your appScope.
all.gridOptions = {
columnDefs: [
{field: 'firstName', cellTemplate: '<div ng-if="grid.appScope.isRowSelected(row.uid)">something</div>'},
{field: 'lastName'},
{field: 'company'},
{field: 'employed'}
],
...,
appScopeProvider : {
addRowtoSelection : function(row) {
var contains = false;
for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
if(all.rowsSelectedIds[i] === row.uid) {
all.rowsSelectedIds.splice(i, 1);
contains = true;
}
}
if(!contains) {
all.rowsSelectedIds.push(row.uid);
}
},
isRowSelected : function(id) {
for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
if(all.rowsSelectedIds[i] === id) {
return true;
}
}
return false;
},
},
I also added a check for already selected row-IDs so you add/remove on click. In ColumnDefs you can see the reference to the isRowSelected() check, where you pass in the row.uid. That parses the current array and returns true or false.
In this plunk I have an empty grid (without columns). When I click on "Build Grid" I need to add columns (taken from an array) and also add a row to the table.
The problem is that the columns are not added to the grid, any ideas? If I try to refresh the grid, I get an undefined error.
HTML:
<button ng-click="buildGrid()">Build Grid</button>
<div kendo-grid="grid" k-options="gridOptions" k-data-source="ds"></div>
Javascript:
var app = angular.module("app", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.ds = []
$scope.colsList = [{ name: "col1" },
{ name: "col2" },
{ name: "col3" },
{ name: "col4" }];
var gridCols = [];
$scope.gridOptions = {
columns: gridCols
};
$scope.buildGrid = function() {
$scope.data = {};
for (var x=0;x<$scope.colsList.length;x++) {
var col = {};
col.field = $scope.colsList[x].name;
col.title = $scope.colsList[x].name;
$scope.data[col.field] = "" + (1111 * (x+1));
gridCols.push(col);
}
// add one row to the table
$scope.ds.push($scope.data);
//$scope.grid.refresh();
};
}
You need to use k-rebind so that the grid reinitializes (you can't set the columns dynamically on an existing grid):
<div kendo-grid="grid"
k-options="gridOptions"
k-data-source="ds"
k-rebind="gridOptions"></div>
(demo)
I have a grid with a check box, and every time I checked 3(three) data's , it doesn't show all the id's instead it only show the 1st data i clicked and display it 3times..
here is my code
{
header: '',
width: 23,
dataIndex: 'id_product',
renderer: function(chck, value, metaData, record, row, col, store, gridView) {
return '<input name="check[]" type="checkbox" value="'+chck+'">';
},
listeners: {
click: function(){
var check = document.getElementsByName('check[]');
var checkLength = check.length;
for(var i=0; i < checkLength; i++){
if(check[i].checked){
console.log(check[i].value);
break;
var store = this.getStore('BP4.sub.ProductPricing.store.PriceListStore');
var SKU = store.getAt(i).get('id_product');
console.log(SKU);
}
}
}
}
}
it displays something like this when I clicked 3 data's , it only display and repeat the 1st data id that I clicked,
--
1 1 1
--
but I need an output like this
--
1 2 3
--
Thanks in advance !!!
change:
var check = document.getElementsByName('check[]');
to
var check = this;
add Class:
<input name="check[]" type="checkbox" value="'+chck+'">
to:
<input name="check[]" type="checkbox" value="'+chck+'" class="cb">
then add a listener:
Ext.get('cb').on('click', function(e, t){
t = Ext.get(t);
console.log(t);
}