I am trying to use dynamic dialog from prime ng
What I want to do is to open dialog in results-table.component.ts with
this.dialogService.open(ResultsComponent, {
data: item,
header: item.resultId,
width: '50vw'
});
and pass data to results.component.ts
The problem is that if I do this, DynamicDialogConfig {} is empty...
...but header is CORRECT and is set correctly, width is also set up properly despite it shows DynamicDialogConfig {}
Only data is not passed to component dynamically inserted into dynamic modal and DynamicDialogConfig is always {} even that width and header are passed properly and applied to UI.
Are you sure you are trying to read it in a correct way?
const item = config.data;
And not like
const item = config.data.item;
Also make sure you have dialog module imported in your module.
import { DialogModule } from 'primeng/dialog';
import { DialogService } from 'primeng/dynamicdialog';
....
declarations: [ ...
],
imports: [
....,
DialogModule,
],
providers: [
..., DialogService,
]
Related
The requirement is to have 'inline editing' of some cell in Tabulator based table.
The cell requires a custom editor since the input is a custom component (which is already used in another form, outside of Tabulator).
Our environment is React + Tabulator (v4.7) + BlueprintJS as the components library.
The problem is that the component won't fully open as a custom editor in Tabulator, while working fine outside of Tabulator, in a regular form.
Why the component won't fully open?
The custom component serving as the 'editor' for this cell is using Blueprint (BP) 'popover' so it has a popover target and a content. This is how it looks like in a form edit:
The problem is that upon clicking, the popover target is being rendered but the popover content is not, so the custom 'dropdown' input component is never appearing:
Relevant code sections
Tabulator column definition:
{
title: "Some Col Title",
field: "someField",
formatter: someFieldFormatter,
editor: "someFieldEditor" as Tabulator.Editor,
editorParams: (cell) => {
return { cell, zones: zonesDataTree };
},
},
Defining custom cell editor:
Tabulator.prototype.extendModule("edit", "editors", {
someFieldEditor: (
cell: CellComponent,
onRendered: Function,
success: Function,
cancel: Function,
editorParams: SomeFieldCellEditorParams
): Element => {
const elem = document.createElement("div");
// SomeFieldCellEditor is a React component that wraps around the same component used in
// the "regular form" scenario mentioned in the screenshot
const someFieldCellEditorComponent: any = React.createElement(SomeFieldCellEditor, {
theData: editorParams.data,
});
ReactDOM.render(someFieldCellEditorComponent, elem);
return elem;
},
});
This is happening because the element is contained inside of the cell.
To prevent corruption of the table layout, tabulator cells have overflow:hidden defined on their CSS.
Most dropdown libraries have a an option that lets you set where in the DOM the list should be appended. You can use this potion to append the list to the body tag which should resolve the issue.
On a side note, did you know that Tabulator comes with built in Select and AutoComplete Editors
I'm using ag-grid (angular) and I would like to export the select rows to CSV or Excel. From what i researched on documentation this feature seems to be possible only using an external button (yellow on image) and not from the export inside of the table (red underline in image).
Is this possible to export selected line through the table itself (red underline in image)?
I'm imagining a multi selection feature in table and if I've no elements selected so the ag-grid export all data and if i've some elements selected then the ag-grid only export the selected one.
This is possible and can be achieved defining your custom function under context menu:
indicate that you will customise your Context Menu:
var gridOptions = {
columnDefs: columnDefs,
getContextMenuItems: getContextMenuItems,
rowSelection: 'multiple',
...
};
define your action exportDataAsExcel and pass onlySelected: true param to reduce export lines:
function getContextMenuItems(params) {
var result = [
{
name: "Excel Export (.xlsx)",
action: () => params.api.exportDataAsExcel(
{onlySelected: true}
)
},
];
return result;
}
you don't need to remove all the menu elements as I did - more about Context Menu can be found in official ag-grid documentation
https://www.ag-grid.com/javascript-grid-context-menu/
You can also just change the default behavior by using the defaultCsvExportParams property. (https://www.ag-grid.com/javascript-data-grid/csv-export/#grid-properties)
var gridOptions = {
...
defaultCsvExportParams: {
onlySelected: true
},
...
};
They have a similar option for the Excel export (https://www.ag-grid.com/javascript-data-grid/excel-export-api/#excelexportparams)
I'm working on Ext JS MVC app, that needs to be localized. Trying to reproduce official docs (http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/localization.html).
Locale file load correctly.
Console message:
[W] Overriding existing mapping: 'viewmodel.users' From
'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'.
Is this intentional?
but overriding values don't display (they should be grid columns headers.
Model looks like this:
Ext.define('clt.view.users.UsersModel', {
extend: 'Ext.app.ViewModel',
requires:[
// something
],
// singleton: true,
data: {
key1: 'value1',
key2: 'value2',
keyN: 'valueN',
},
stores: {
// something
}
});
Values binding to view like this:
bind: { text: '{key1}' }
If I make this model singleton, localization starts working (grid headers displayed localized values), but grid data is empty.
So, what's the problem? Help me understanding it.
Update. Problem resolved. I found thread on Sencha forum with solution: add localized elements in config object in localization file. Example:
Ext.define('clt.locale.en.view.users.UsersModel', {
override: 'clt.view.users.UsersModel',
config: {
data: {
key1: 'value1',
// some other keys
}
}
});
Warnings are not a good sign. In your case, you don't apply an override like you should. The message
[W] Overriding existing mapping: 'viewmodel.users' From 'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'. Is this intentional?
says that first, clt.locale.en.view.users.UsersModel (your localized version) is loaded, and after that, clt.view.users.UsersModel (non-localized version) is loaded and completely replaces the localized version.
What you want to do is the following:
Ext.define('clt.view.users.UsersModel', {
extend: 'Ext.app.ViewModel', // <- EXTEND ViewModel class
// define your locale-agnostic user model here
});
Ext.define('clt.locale.en.view.users.UsersModel', {
override: 'clt.view.users.UsersModel', // <- OVERRIDE implementation in the overridden class
// define your localized properties here.
});
This should remove the warning. Then you can instantiate the UsersModel
Ext.create('clt.view.users.UsersModel', {
but you get a localized version of it.
I want to create a custom property editor, that makes use of the media picker. Right now my controller looks like this:
angular.module("umbraco").controller("My.MediaCropperController",
function($scope, dialogService) {
$scope.mediaPicker = {
view: 'mediapicker',
value: null, // or your value
config: { disableFolderSelect: true, onlyImages: true }
};
});
And my view looks like this:
<umb-editor ng-controller="My.MediaCropperController" model="mediaPicker" ng-if="mediaPicker">
</umb-editor>
As I understand it, I need to create config object for built-in editors, then use in the template to show the editor. However when i bring my property editor into my backoffice, nothing is being shown. What am I doing wrong here?
This is my package manifest file:
{
//you can define multiple editors
propertyEditors: [
{
/*this must be a unique alias*/
alias: "My.MediaCropper",
/*the name*/
name: "My Media Cropper",
/*the html file we will load for the editor*/
editor: {
view: "~/App_Plugins/MediaCropper/mediacropper.html"
}
}
]
,
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/MediaCropper/mediacropper.controller.js'
]
}
dialogService.mediaPicker rather than $scope.mediapicker ?
May be what is causing your error, just from comparing my script to yours.
I'm pretty new to Angular and having a problem figuring out how to bind a value from a data service to a customization of the https://github.com/rpocklin/ui-router-tabs project that I have created.
The customization is to display an icon in the tab heading that toggles based on the validation state of the corresponding ui-view. I've wired up a data service that is updated when validation succeeds or fails, and the binding is being "seen" by the controller that renders the tabs.
The problem arises when I attempt to pass this value into the tab data as "options". The value change/icon toggle is not being processed as the validation state changes. If I pass a hard-coded "true" into the tab data, the desired icon is displayed.
vm.tabs = [
{
heading: "View 1",
route: "manage.view1",
options: {
status: vm.stateService.getForm1State()
}
},
{
heading: "View 2",
disable: vm.disableTabs,
route: "manage.view2",
options:{
status: true
}
}
];
This doesn't seem like something that should be that difficult, so I think I'm just missing something obvious about the scoping. Here is a plunk http://plnkr.co/edit/iefvwcffSZmpfy83NGde?p=preview that demonstrates the issue.
Note: should be tagged as ui-router-tabs, but I lack the reputation to create the tag.
The problem lies here:
options: {
status: vm.stateService.getForm1State()
}
Since stateService.getForm1State() returns a boolean value, this value will be copied and assigned as the value of the status property.
So when this code has executed once it will for example be:
options: {
status: false
}
The options object won't react to any changes within the stateService.
An easy solution is to have stateService.getForm1State() return an object instead.
For example:
function stateService() {
var form1IsValid = {
status: false
};
return {
getForm1State: getForm1State,
setForm1State: setForm1State
};
function getForm1State() {
return form1IsValid;
}
function setForm1State(newValue) {
form1IsValid.status = newValue;
return;
}
Then make the options object refer to the same object:
options: vm.stateService.getForm1State()
Now whenever you have:
options.status
It will be the same as:
vm.stateService.getForm1State().status
And it will correctly reflect the changes.
Demo: http://plnkr.co/edit/KjXVSSMJbLw7uod0ac6O?p=preview