Does anyone know if it is possible in ui-grid to set type of cell using condition like cellEditableCondition ?
I need to set some editable rows type to text instead of number.
Thanks
u should define algoritm to specify columns in columnDef
here is part from my working solution:
var type = '';
var cellFilter = '';
var widthLength = 100;
switch (value.Type) {
case "int":
case "bigint":
case "numeric":
type = 'number';
widthLength = 120;
break;
case "date":
type = 'dateStr';
cellFilter = "date: 'dd.MM.yyyy'";
widthLength = 90;
break;
case "datetime":
type = 'dateStr';
cellFilter = "date: 'dd.MM.yyyy HH:mm' : 'UTC'";
widthLength = 120;
break;
case "bit":
type = 'boolean';
break;
default:
type = 'string';
widthLength = 150;
break;
}
var item = {
name: value.Name,
displayName: value.Name,
minWidth: widthLength,
width: '*',
type: type
};
and when u fully define needed column just push it to columnDefs array.
$scope.yourGridName.columnDefs.push(item);
or
vm.yourGridName.columnDefs.push(item);
if u r using view model instead of $scope.
Related
How can we add a callback when clicked the encircled ranges? I want to change the input placeholder based on the range picked. For example the user clicked "This week" so the placeholder also on the right should be changed to "This week". I've red the documentation but I cant find thing I need. Thank you so much for your help in advance! Here's a snippet of my code.
const [dateState, setDateState] = useState<any>([
{ startDate: null, endDate: null, key: "selection" },
]);
{openDateRange && (
<DateRangePicker
className="date-range"
editableDateInputs={true}
onChange={(item) => setDateState([item.selection])}
moveRangeOnFirstSelection={false}
ranges={dateState}
/>
)}
I had the same issue,
here is my workaround ;
while selecting ranges it updates both selection values in the very first click.
onDateRangeChanged= () => {
.....
if(ranges.selection.startDate !== ranges.selection.endDate){
const result = calculateDateRangeFromTwoDates(ranges);
if(result.specificTimeSpan === true)
toggleRangePicker();
}
.....
}
and with the calculator below u can extract whether your dates is defined range or not (of course code below can be refactored like reading from a Json file etc.)
export const calculateDateRangeFromTwoDates = (ranges: any) => {
const beginDate = moment(ranges.selection.startDate);
const endDate = moment(ranges.selection.endDate);
const today = moment();
let text = '';
let specificTimeSpan = true;
const duration = moment.duration(endDate.diff(beginDate));
const selectedDateDifference = duration.get('days');
switch (selectedDateDifference) {
case 30:
case 29:
text = moment(endDate).isSame(today, 'month') ? 'This Month' : 'Last Month';
break;
case 7:
case 6:
text = moment(endDate).isSame(today, 'week') ? 'This Week' : 'Last Week';
break;
case 1:
case 0:
text = moment(endDate).isSame(today, 'day') ? 'Today' : 'Yesterday';
break;
default:
text = `
${moment(ranges.selection.startDate).format('MM/DD/YYYY')} - ${moment(ranges.selection.endDate).format(
'MM/DD/YYYY',
)}
`;
specificTimeSpan = false;
break;
}
return ({
text,
specificTimeSpan
})
};
I have a stored procedure that returns dynamic columns and I was able to paint the output with some help on angularJS ui-grid. Now I am trying to add "CellToolTip". Screenshot below is the output of the stored procedure in which columns 25 to 22 are dynamic (which means they can range from 150 to 0 depending on the input given to the stored procedure). The columns that start with "Tgt"are Targets which I don't want to display but show the target value when hovered over the column. I was able to successfully hide the "Tgt-"columns on the webpage with out issue.
Now I need to show them as a CellToolTip when I hover over the dynamic columns 25 to 22 with which I need help. In the screenshot example below when I hover over the cell with value 0.901 that is against column 25 and row "Vat Fill Calc F/P Ratio" attributename I would like to see "0.89". But if I hover over the cell value 0.89 that is against column 25 and row "Vat Batch data F/P" attributename I would like to see "No value" since Tgt-25 column has a NULL for that attributeName.
In my code below within the push function I added "var key = 'Tgt-' + sortedKeysArray[i];
var value = row.entity[key];". When I put break points I get error saying key is undefined. But if I hardcode the key value like "var value = row.entity["Tgt-25"];" then it works fine. I need help with making the hover values dynamic in which I would like to get the target values from their respective target columns. Thanks in advance for the help.
LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {
$scope.error = true;
$scope.errorDescription = "No data found for selected criteria.";
} else {
$scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
data.VatMakeRptList.length
);
var VatMakeRptList = data.VatMakeRptList;
var keysArray = [];
keysArray = Object.keys(VatMakeRptList[0]);
var sortedKeysArray = keysArray.sort().reverse();
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'LineNumber', field: 'LineNumber', width: '20%', visible: true });
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'AttributeName', field: 'AttributeName', width: '20%', visible: true });
for (var i = 0; i < sortedKeysArray.length; i++) {
if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))
$scope.gridOptionsVatMakeRpt.columnDefs.push({
name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
var key = 'Tgt-' + sortedKeysArray[i];
// var value = row.entity["Tgt-25"];
var value = row.entity[key];
if (value != null) {
return value;
} else {
return "No Value";
}
}
});
}
}
All I had to do was move the "Key" value above the if statement.
for (var i = 0; i < sortedKeysArray.length; i++) {
var key = 'Tgt-' + sortedKeysArray[i];
if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))
$scope.gridOptionsVatMakeRpt.columnDefs.push({
name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
// var value = row.entity["Tgt-25"];
var value = row.entity[key];
if (value != null) {
return value;
} else {
return "No Value";
}
}
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
Actually I have a combo box with values "Last seven days", "Last three days" and "Today", I want to apply the filter on the basis of selected value date range by current date
If the filterOptions of the grid are not working for you then try keeping your full set of data in one array and the filtered set in another. Set the gridOptions.data to your filtered set. Apply a function when the user makes a selection from the dropdown that sets your filtered set to whatever you want. Something like this:
<select ng-model="filterValue"><option value=1>Last 7 days</option></select>
$scope.allItems = [{someDate:'10/21/14'},{someDate:'11/2/14'},{someDate:'10/24/14'}];
$scope.filteredItems = [];
$scope.filterValue;
$scope.$watch("filterValue", function() {
// filter your dataset here
if($scope.filterValue == 1) { // Last 7 days
angular.forEach(allItems,function(value) {
// Use something like moment.js to do date arithmetic
if(date in last 7 days) {
$scope.filteredItems.push(value);
}
});
}
};
$scope.gridOptions = { data: 'filteredItems' ....};
Below is the solution for filtering the data of the grid view on the basis of selected Date options from the combo box as described in the problem statement:
Here durationFilter() is the function call on the change of the value in the combo box
$scope.durationFilter = function () {
var currentDate = new Date();
var difDate = new Date();
$scope.filteredItems = [];
switch ($scope.selectedItem.id) {
case 1:
$scope.range = 1;
break;
case 2:
$scope.range = 3;
break;
case 3:
$scope.range = 7;
break;
default:
$scope.range = 0;
$scope.filteredItems = [{ 0: new Date() }];
$scope.gridOptions.filterOptions.filterText = '';
break;
}
for (var i = 0; i < $scope.range; i++) {
currentDate.subtractDays(i);
difDate = currentDate;
$scope.difDate = $filter('date')(difDate, 'MM/dd/yyyy');
$scope.filteredItems.push($scope.difDate);
currentDate = new Date();
}
$scope.searchingFilters.filteredDate = $scope.filteredItems;
$scope.setFilterText();
};
$scope.setFilterText = function () {
$scope.gridOptions.filterOptions.filterText = 'Submit Time:' + $scope.searchingFilters.filteredDate[0] + '|' + $scope.searchingFilters.filteredDate[1] + '|' +
$scope.searchingFilters.filteredDate[2] + '|' + $scope.searchingFilters.filteredDate[3] + '|' + $scope.searchingFilters.filteredDate[4] +
'|' + $scope.searchingFilters.filteredDate[5] + '|' + $scope.searchingFilters.filteredDate[6] + ';';
}
I need to build a graph to show world's population by region and sample data would be
China 1,361,300,000
India 1,236,970,000
United States 317,148,000
Indonesia 237,641,326
Brazil 201,032,714
I am new to Dygraphs and I tried simple example on the same:
<html>
<head>
<script type="text/javascript"
src="http://dygraphs.com/dygraph-combined.js"></script>
</head>
<body>
<div id="demodiv" style="width:500px;height:500px"></div>
<script type="text/javascript">
var data = "Country,Population\n" +
"1,1361300000\n" +
"2,1236970000\n" +
"3,317148000\n" +
"4,237641326\n" +
"5,201032714\n";
g = new Dygraph(document.getElementById("demodiv"), data, {
title: "World's Population"
});
</script>
</body>
</html>
Now, How can I use Dygraphs to display country Name instead of numbers on x-Axis? Is it possible with Dygraphs?
Thanks in Advance.
You could use the valueFormatter and axisLabelFormatter options. See http://dygraphs.com/options.html
The following example will print 'text:' inside the legend and the x value from your data.
axes: {
x: {
valueFormatter: function(x) {
return 'text';
},
axisLabelFormatter: function(x) {
return x;
},
}
},
Example in jsfiddle: http://jsfiddle.net/JaM3S/
#user3020781 Those two options for the x-axis helped me as well, thank you! I also had an issue with having .5 steps between the whole numbers, and found the issue was I had the chart set too wide and I only had 6 groups plotted on the x-axis, so dygraph was automatically adding the half step.
Couple solutions:
1. Add cases in the switch statements for the .5 steps
2. use the pixelsPerLabel option inside the x axis. The default for the x axes is 60, I doubled to get 120 which fixed mine.
3. Make the whole graph smaller. Mine are all set to be 1000px wide.
Both worked for my problem. Here's the Dygraph code. I commented out the case statements because I went with the pixelsPerLabel fix.
g = new Dygraph(
document.getElementById("graphdiv"),
dataArray,
{
xlabel: "x something",
ylabel: "y something",
title: "The coolest chart ever!",
labels: ["FR", "Avg1", "Avg2"],
labelsDiv: document.getElementById("labelsdiv"),
labelsSeparateLines: true,
width:1000,
colors: ["#339933", "#990000"],
strokeWidth: 2.5,
valueRange: [4, 5.8],
axes: {
x: {
/*the space between grid lines on x axis: default is 60px*/
pixelsPerLabel: 120,
valueFormatter: function(FR) {
var ret;
switch (FR){
case 1:
ret = 'A';
break;
case 2:
ret = 'B';
break;
case 3:
ret = 'C';
break;
case 4:
ret = 'D';
break;
case 5:
ret = 'D';
break;
case 6:
ret = 'F';
break;
/*case 1.5:
ret = '';
break;
case 2.5:
ret = '';
break;
case 3.5:
ret = '';
break;
case 4.5:
ret = '';
break;
case 5.5:
ret = '';
break;
case 6.5:
ret = '';
break;*/
}//end switch
return ret;
},//end of label formatter,
axisLabelFormatter: function(FR) {
var ret;
switch (FR){
case 1:
ret = 'A';
break;
case 2:
ret = 'B';
break;
case 3:
ret = 'C';
break;
case 4:
ret = 'D';
break;
case 5:
ret = 'E';
break;
case 6:
ret = 'F';
break;
/*case 1.5:
ret = '';
break;
case 2.5:
ret = '';
break;
case 3.5:
ret = '';
break;
case 4.5:
ret = '';
break;
case 5.5:
ret = '';
break;
case 6.5:
ret = '';
break;*/
}//end switch
return ret;
}//end of axis label formatter
}//end of x axis
}//end of axis
} );