I am using material ui tables, in that, I have select buttons data and each data having separate table data, but while clicking on second select option previous data is showing with new data
I want to show new data on each click
var data1 = [
('India1', 'IN', 1324171354, 3287263),
('China1', 'CN', 1403500365, 9596961),
];
var data2 = [
('India2', 'IN', 1324171354, 3287263),
('China2', 'CN', 1403500365, 9596961),
];
var data3 = [
('India3', 'IN', 1324171354, 3287263),
('China3', 'CN', 1403500365, 9596961),
];
After select second option first and second data are showing
Related
I am using Ag-Grid for displaying tabular data, is there a way we can add a placeholder in the dropdown options which are displayed in a column where we have an agSelectCellEditor?
Problem Statement:
Sample Code:
for(const [key,value] of countryCodes ) {
if (key !== ' ') {
countryNames.push([value.countriesCd]);
}
}
console.log(this.countryNames) = [['France'], ['Belgium'], ['USA'], ['UAE']]
For eg: The column filed = 'country'
country.cellEditor = 'agSelectCellEditor',
country.singleClickEdit = true,
country.cellEditorParams = {
values.countryNames,
}
When clicking on the country column, it shows the select dropdown with the countryNames list and without making any selection it defaults the dropdown to France, its confusing for the users as an option is displayed in the editorCell without selection
I have to enable columns selection and perform operation like export Excel/copy to clipboard on particular columns selected.
The requirement is when I click on column header it should select the entire column.
How can this be achieved?
There are a few ways to do it.
One would be to add a new 'Select Column' entry to the Column Menu and then in the Action create a new cell range. Something like this should do the trick:
var gridOptions = {
....
getMainMenuItems: getMainMenuItems,
....
}
function getMainMenuItems(params) {
var menuItems = params.defaultItems.slice(0);
menuItems.push({
name: 'Select Column',
action: function () {
gridOptions.api!.clearRangeSelection();
const cellRangeParams: CellRangeParams = {
rowStartIndex: 0,
rowEndIndex: gridOptions.api!.getDisplayedRowCount(),
columnStart: params.column.getId(),
columnEnd: params.column.getId(),
};
gridOptions.api!.addCellRange(cellRangeParams);
},
});
return menuItems;
}
I'm building a new grid but i need a select field that options appear depending on the choice of the first field.
I have two cellEditors
columnDefs = [
{ field: 'typePizza', editable:true, cellEditor:'pizza'},
{ field: 'toppings', editable: true, cellEditor: 'gridSelect' }
];
The 'pizza' one is a select that i choose a type of pizza, the gridSelect have a multiple select that i can choose one or more ingredients but I need to show the options that are affected by the type of pizza.
I have this toppingList on gridSelectComponent: toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
And PizzaList on PizzaComponent pizzaList: string[] = ['Pizza A','Pizza B', 'Pizza C'];
For example, if i choose Pizza A i want that on that row only appear the options 'Extra Cheese, Onion' options.
If i choose Pizza B only appear the options 'Mushroom, Tomato'
Stackblitz
How can i do this?
Thank you
On your mat-select, upon the event of the dropdown being expanded, call a method in your class:
(openedChange)="matOpenedChanged($event)"
In this method, see what the value of the typePizza field is and set your dropdown list appropriately:
matOpenedChanged(event) {
const currentPizzaType = this.params.data.typePizza;
if (currentPizzaType == 'Pizza A') {
this.toppingList = ['Extra cheese', 'Onion'];
} else if (currentPizzaType == 'Pizza B') {
this.toppingList = ['Mushroom', 'Tomato'];
} else {
this.toppingList = [
'Extra cheese',
'Mushroom',
'Onion',
'Pepperoni',
'Sausage',
'Tomato'
];
}
}
Demo.
I'm having trouble getting the current JSON model element which is bound to a RowRepeater element.
With tables and lists, I would simply retrieve the current index (or indices) and based on these values, I point to the matching element in my JSON model.
However, the RowRepeater element does not have a current index property. As I feel I should be able to retrieve the current element directly, as opposed to indirectly by the current index, is there a better, uniform way to retrieve the current element?
Sample code for model :
var mydata = {
"data": [
{
"key": "67b895bf-8d89-11e3-94a7-0000005341de",
"name": "my 1st item"
},
{
"key": "7780de05-8d83-11e3-bec4-0000005341de",
"name": "my 2nd item"
}
]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dummydata);
sap.ui.getCore().setModel(oModel);
Sample code for RowRepeater (I want to retrieve the current 'key' upon pressing the delete icon):
var oRowRepeater = new sap.ui.commons.RowRepeater();
//create the template control that will be repeated and will display the data
var oRowTemplate = new sap.ui.commons.layout.MatrixLayout();
var matrixRow, matrixCell, control;
// main row
matrixRow = new sap.ui.commons.layout.MatrixLayoutRow();
//Text
control = new sap.ui.commons.TextView();
control.bindProperty("text","name");
//add content to cell, cell to row
matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
matrixCell.addContent(control);
matrixRow.addCell(matrixCell);
//delete icon
var icon = new sap.ui.core.Icon({
src: sap.ui.core.IconPool.getIconURI("delete"),
size: "16px",
color: "#333",
activeColor: "#BBB",
hoverColor: "#888",
width: "60px",
});
icon.attachPress(function(oEvent) {
sap.ui.commons.MessageBox.alert("TODO: Implement delete based on current/data/?/key");
});
//add content to cell, cell to row
matrixCell = new sap.ui.commons.layout.MatrixLayoutCell({ hAlign : sap.ui.commons.layout.HAlign.Right });
matrixCell.addContent(icon);
matrixRow.addCell(matrixCell);
// add row to matrix
oRowTemplate.addRow(matrixRow);
//attach data to the RowRepeater
oRowRepeater.bindRows("/data", oRowTemplate);
the following works for me
icon.attachPress(function(oEvent) {
sap.ui.commons.MessageBox.alert(this.getBindingContext().getProperty('name'));
});
the selected object
var seletedRow = this.getBindingContext().getObject()
I have EnhancedGrid which loads data after getting response from AJAX call based on my query to database.When i make the first request i can see the data to be populated in grid correctly. However, i change my query it still loads the previous data. My response returns correct data from database in JSON.
I tried in all possible ways and debugged using firebug but unable to get the output. I tried searching the similar post but still it didn't work for me.Any help would be much appreciated. I am pasting my code below.
_initialiseGrid:function(){
var layout = [
{'name': 'Project Name', 'field': 'projectName', 'width': '200px'},
{'name': 'Date Created', 'field': 'createdDate', 'width': '100px',formatter:this.formatDate},
{'name': 'Comments', 'field': 'senderComments', 'width': '250px',editable:true}
];
dataGrid = new dojox.grid.EnhancedGrid({
id: 'JoinProjectGrid',
structure: layout,
rowSelector: '20px',
plugins: {indirectSelection: {headerSelector:true}}},
document.createElement('div'));
}
_loadData:function(response){
var projectList=response.retrievedList;
var rowData = {
identifier: "projectId",
items: projectList
};
dataStore = new dojo.data.ItemFileWriteStore({data: rowData});
dataGrid.set("store",dataStore);
dojo.byId("gridDivForJoin").appendChild(dataGrid.domNode);
dataGrid.startup();
}
i tried using :
dataGrid.setStore(dataStore)
which is not working for the second request so,
i used dataGrid.set("store",dataStore) which is not loading the new data but shows previous one.I also tried :
clearOnClose:true, urlPreventCache:true
to refresh the grid and used below code also to clear the store on second request.
var newStore = new dojo.data.ItemFileReadStore({data: { identifier: "", items: []}});
dataGrid.setStore(newStore);
i got it worked after adding
dataGrid.render()