ng2-smart-table - How to Open Record in a Different View - ng2-smart-table

I was able to add a custom action to the table but I still don't know how to use that custom action to open a record in a different page/modal when it's clicked. How to assign the ID to that record row? How to pass it to a different view?
in the component.html
<ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomAction($event)"></ng2-smart-table>
in the component.ts
settings = {
mode: 'external',
hideSubHeader: true,
actions: {
position: 'right',
add: false,
edit:false,
delete: false,
custom: [
{ name: 'viewRecord', title: '<i class="far fa-file-alt"></i>'},
],
},
columns: {
firstName: {
title: 'First Name',
type: 'string',
},
lastName: {
title: 'Last Name',
type: 'string',
},
username: {
title: 'Username',
type: 'string',
},
email: {
title: 'E-mail',
type: 'string',
},
age: {
title: 'Age',
type: 'number',
},
},
};
onCustomAction(event): void {
//WHAT TO DO HERE?
}

SOLVED
onCustomAction(event): void {
//get action name to switch in case of different actions.
var actionName = event.action;
//get row id.
var id = event.data.id;
//navigate to edit/view url.
this.router.navigate(url)
}

your can inject NbdialogService in constuctor to open in dialog/Modal
private dialogService: NbDialogService
onCustomAction(event) {
switch (event.action) {
case 'view-details':
this.service.getDetails(event.data.Id)
.pipe(
tap(res => {
this.dialogService.open(UserDetailsComponent, { // inject your component will be displayed in modal
context: {
details: res,
},
});
})
).subscribe();
break;
default:
console.log('Not Implemented Action');
break;
}
or navigate sure as you did by this.router.navigate(url)

Related

How to show antd multiple select component on this Simple Schema

I have this JSON schema, I tried to populate multiple select component with the uniform autoform.
(() => {
const ajv = new Ajv({ allErrors: true, useDefaults: true, keywords: ["uniforms"] });
const schema = {
title: 'Address',
type: 'object',
properties: {
city: {
type: 'string',
uniforms: {
options: [
{ label: 'New York', value: 'new york' },
{ label: 'Nashville', value: 'nashville' },
],
},
},
}
};
function createValidator(schema) {
const validator = ajv.compile(schema);
return (model) => {
validator(model);
if (validator.errors && validator.errors.length) {
return { details: validator.errors };
}
};
}
const schemaValidator = createValidator(schema);
return new JSONSchemaBridge(schema, schemaValidator);
})()
And the result look like this
Rendered component with this JSON schema
The multiselect component example from antd
could I render multiselect component instead select component (which default from uniform)?
Can I select new york and nashville at the same time?

Update echart on data change

i'm looking for a solution to update an echart when new data comes in. Currently i have a chart and a drop down with some data.When i open the page, data is displaying at the chart perfectly fine. But when i use the drop down and change option to next data, nothing is happening. The previous data is still on the chart. Any ideas how to update the chart (object) when data changes ?
My code:
chart1: EChartOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Tests Open','Tests Approved', 'Tests Failed']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
magicType: { title: '1', show: true, type: ['line', 'bar',] },
restore: { title: 'Restore', show: true },
saveAsImage: { title: 'Save Chart',show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Tests Open',
type: 'bar',
data: [],
itemStyle: {
color: '#FDD051'
}
},
{
name: 'Tests Approved',
type: 'bar',
data: [],
itemStyle: {
color: '#2EAD6D'
}
},
{
name: 'Tests Failed',
type: 'bar',
data: [],
itemStyle: {
color:'#F0533F'
}
},
]
};
refreshChart(statistics: TestResultSiteStatistics) : void {
let months = [];
let open = [];
let approved = [];
let failed = [];
for (let month in statistics.monthly){
months.push(month);
approved.push(statistics.monthly[month].approved);
open.push(statistics.monthly[month].open);
failed.push(statistics.monthly[month].failed);
}
this.chart1.xAxis[0].data = months;
this.chart1.series[0].data = open;
this.chart1.series[1].data = failed;
this.chart1.series[2].data = approved;
}
<div #chart style="height:590px; width:1190px;" echarts [options]="chart1" ></div>
You cannot add data directly to instance because Echarts incapsulated diffucult logic to process data. You need to use method myChart.setOption({series: [new_data]}). It explained in API docs: https://echarts.apache.org/en/api.html#echartsInstance.setOption and https://echarts.apache.org/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data

Load form data via REST into vue-form-generator

I am building a form, that needs to get data dynamically via a JSON request that needs to be made while loading the form. I don't see a way to load this data. Anybody out here who can help?
JSON calls are being done via vue-resource, and the forms are being generated via vue-form-generator.
export default Vue.extend({
template,
data() {
return {
model: {
id: 1,
password: 'J0hnD03!x4',
skills: ['Javascript', 'VueJS'],
email: 'john.doe#gmail.com',
status: true
},
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'Website',
model: 'name',
maxlength: 50,
required: true,
placeholder: companyList
},
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
},
companies: []
};
},
created(){
this.fetchCompanyData();
},
methods: {
fetchCompanyData(){
this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
console.log(response.data.company);
let companyList = response.data.company; // Use this var above
}, (response) => {
console.log(response);
});
}
}
});
You can just assign this.schema.fields.placeholder to the value returned by the API like following:
methods: {
fetchCompanyData(){
this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
console.log(response.data.company);
this.schema.fields.placeholder = response.data.company
}, (response) => {
console.log(response);
});
}
}

Extjs MVC run function after store loads

I've got a grid getting data through a json store. I want to display the total number of rows in the grid. The problem is that the store.count() function is running before the store loads so it is returning 0. How can I get my count function to run only once the store has loaded? I'm working in MVC, here is my app.js which has my counting logic in it.
Thank you for any help
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
resizable: 'true',
forceFit: 'true',
layout: 'fit',
items:[{
xtype: 'userpanel',
}]
});
var port = Ext.ComponentQuery.query('viewport')[0],
panel = port.down('userpanel'),
grid = panel.down('userlist'),
label = panel.down('label');
var count = grid.store.getCount();
var labelText = "Number of people in list: " + count;
label.setText(labelText);
}
});
store code:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'queue',
successProperty: 'success'
}
},
sortOnLoad: true,
//autoLoad: true,
sorters: [
{
property: 'PreReq',
direction: 'DESC'
},
{
property: 'Major1',
direction: 'ASC'
},
{
property: 'UnitsCompleted',
direction: 'DESC'
}
],
listeners:{
onload: function(){
var port = button.up('viewport'),
grid = port.down('userlist'),
panel = port.down('userpanel'),
label = panel.down('label'),
count = grid.store.getCount(),
labelText = "Number of people in list: " + count;
label.setText(labelText);
},
scope: this
}
});
grid code:
Ext.define('AM.view.user.List' , {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
height: 'auto',
width: 'auto',
//resizable: 'true',
features:[{
ftype: 'grouping'
}],
autoFill: 'true',
layout: 'fit',
autoScroll: 'true',
initComponent: function() {
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
this.columns=[
//code for all my columns
]
];
this.callParent(arguments);
}
});
Try putting a listener on the store then listen for the onload event get the count and update the field that way. Though there are many ways to do this that is just one.
But in the example above you never load the store you just create it, which is why you see zero.
figured it out, needed to add a listener for the "load" event, not "onLoad". Code below...
Ext.define('APP.store.Store', {
extend: 'Ext.data.Store',
model: 'APP.model.Model',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
},
sortOnLoad:true,
sorters: [{
property: 'last',
direction: 'ASC'
}],
listeners: {
load:{
fn:function(){
var label = Ext.ComponentQuery.query('#countlabel')[0];
label.setText(this.count()+ ' Total Participants);
}
}
}
});

Ext JS 4: Returning .NET nullable DateTime? from web method as JSON object to ExtJS not displaying in Ext.grid.Panel

I'm returning a list of .NET serialized objects (Project objects) from a JSON web service via an Ext JS JSON proxy. I'm not able to get my Ext.grid.Panel to properly display my date formatted fields. Why would that be? Search for "this one" below. All other fields are showing properly in my Ext grid. And when I save the date from my calendar control, it stores the date properly in the database. To rule out other issues, I've hard coded the date for you in my object.
Serialized class:
[Serializable]
public class Project
{
public string project_id;
public string project_number;
public string project_name;
public string description;
public DateTime? date_start;
}
Web method:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
public List<Project> GetProjects(string myTest, string bar)
{
Database db = DatabaseFactory.CreateDatabase("HIMC-DEV");
DbCommand cmd = db.GetStoredProcCommand("project_get_list");
db.AddInParameter(cmd, "#user_id", DbType.String, "");
DataSet ds = db.ExecuteDataSet(cmd);
DataTable dt = ds.Tables[0];
List<Project> projectList = new List<Project>();
foreach (DataRow row in dt.Rows)
{
Project p = new Project();
p.project_id = row[0].ToString();
p.project_number = row[1].ToString();
p.project_name = row[2].ToString();
p.description = row[3].ToString();
p.date_start = new DateTime(2012, 1, 12); // <=== this one
projectList.Add(p);
}
return projectList;
}
Ext Model:
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: [
{ name: 'project_id' },
{ name: 'project_name' },
{ name: 'project_number' },
{ name: 'description' },
{ name: 'date_start', type: 'date' }
]
});
JSON proxy:
Ext.define('Ext.ux.AspWebAjaxProxy', {
extend: 'Ext.data.proxy.Ajax',
require: 'Ext.data',
buildRequest: function (operation) {
var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
request;
params = Ext.applyIf(params, this.getParams(params, operation));
if (operation.id && !params.id) {
params.id = operation.id;
}
params = Ext.JSON.encode(params);
request = Ext.create('Ext.data.Request', {
params: params,
action: operation.action,
records: operation.records,
operation: operation,
url: operation.url
});
request.url = this.buildUrl(request);
operation.request = request;
return request;
}
});
Ext Window with embedded form:
Ext.define('ProjectEdit', {
extend: 'Ext.window.Window',
alias: 'widget.projectedit',
title: 'Edit Project',
layout: 'fit',
autoShow: true,
closable : true,
initComponent: function () {
this.items = [
{
xtype: 'form',
width: 650,
height: 300,
bodyPadding: 20,
items: [
{
xtype: 'textfield',
name: 'project_id',
fieldLabel: 'Project ID'
//disabled: true
},
{
xtype: 'textfield',
name: 'project_number',
fieldLabel: 'Project Number'
},
{
xtype: 'textfield',
name: 'project_name',
fieldLabel: 'Project Name'
},
{
xtype: 'datefield',
format: 'm/d/Y',
allowBlank: true,
name: 'date_start',
fieldLabel: 'Start Date'
},
{
xtype: 'combo',
fieldLabel: 'Manager',
emptyText: 'select keyword',
store: keywordStore,
valueField: 'name',
displayField: 'name',
mode: 'remote',
autoSelect: false,
selectOnFocus: true,
shadow: true,
forceSelection: true,
triggerAction: 'all', // not sure what this is?
hideTrigger: true,
//multiSelect:true,
typeAhead: true,
minChars: 1,
renderTo: document.body
},
{
xtype: 'htmleditor',
name: 'description',
fieldLabel: 'Description',
enableColors: false,
enableAlignments: false,
width: '100%'
}
]
}
];
...
Ext grid:
Ext.define('ProjectGrid', {
extend: 'Ext.grid.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
store: store,
columns: [
{ text: 'Project ID', dataIndex: 'project_id', sortable: true },
{ text: 'Project Number', dataIndex: 'project_number', sortable: true },
{ text: 'Project Name', dataIndex: 'project_name', sortable: true, width: 300 },
{ text: 'Start Date', dataIndex: 'date_start', sortable: true, width: 300, renderer: Ext.util.Format.dateRenderer('Y-m-d') },
{ text: 'Description', dataIndex: 'description', sortable: true, width: 500 }
],
listeners: {
//itemdblclick: this.editProject
itemdblclick: function(view, record, item, index, e) {
//var w = new ProjectEdit();
var w = Ext.widget('projectedit');
w.show(); // show the window
w.down('form').loadRecord(record); // load the record in the form
w.callback = Ext.bind(this.editProject, this); // bind lets you set the scope of the callback (for the project that was double clicked)
}
}
});
me.callParent(arguments);
},
...
});
JSON request image from Firebug NET tab (open in a new tab to make it larger):
The issue you experience seems to be connected with the date format for this date field.
By default ExtJS expects date to be sent in format that differs from one used by .Net.
Updating your model the following way should help:
{ name: 'date_start', type: 'date', dateFormat: 'MS' }
or
{ name: 'date_start', type: 'date', dateFormat: 'U' }
See ExtJS API for dateFormat and its possible values.