Products

[Hristofor]

Hi tanner anz,
thank you for the suggestion. We noticed that the demo is missing and it will be added to the website. The Smart.QueryBuilder has DynamicLinq support only. Any additional features require custom development. If you wish you can contact HTMLElements Sales for additional information.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi tanner anz,
the getLinq() method only works when you’ve specified customOperators list. Without that it’s not possible for the element to recognize an expression. Here’s an example of a Smart.QueryBuilder settings object that accepts a Linq expressions from value and converts the current element value to Linq expression via the method getLinq method. The code also illustrates how to use custom operators for certain fields:

{
            allowDrag: true,
            //Defining the necessary custom operations
            customOperations: [
                {
                    label: 'Less than',
                    name: '<',
                    expressionTemplate: '{0} < {1}',
                    //Determines which arguments from an expression are used for the fieldName and value for the QueryBuilder.
                    //Used when converting a Linq expression to QuieryBuilder value.
                    expressionReaderCallback: function (expression, bindings) {
                        return { fieldName: bindings[0], value: (bindings[1] === '@minPrice' ? 0 : 100) };
                    }
                },
                {
                    label: 'Status Equals',
                    name: 'status_equals',
                    expressionTemplate: '{0} = "{1}"'
                },
                {
                    label: 'Starts With',
                    name: 'startswith',
                    expressionTemplate: '{0}.StartsWith("{1}")'
                },
                {
                    label: 'List Not Contains',
                    name: 'list_not_contains',
                    expressionTemplate: '{0}.Any(!it.Contains("{1}"))'
                },
                {
                    label: 'Operator Contains',
                    name: 'contains',
                    expressionTemplate: '{0}.Contains("{1}")'
                },
                {
                    label: 'Contains',
                    name: 'keyvalue_contains',
                    expressionTemplate: '{0}["{1}"].Contains("{2}")',
                    //Determines the arguments for the Logical statement. Used when converting value to Linq expression
                    expressionBuilderCallback: function (dataField, operation, objValue) {
                        return this.expressionTemplate.replace('{0}', dataField).replace('{1}', objValue.name).replace('{2}', objValue.occupation);
                    },
                    //Determines which arguments from the expression are used for the fieldName and value for the QueryBuilder.
                    //Used when converting a Linq expression to QuieryBuilder value.
                    expressionReaderCallback: function (expression, bindings) {
                        return { fieldName: bindings[0], value: { name: bindings[1], occupation: bindings[2] } };
                    },
                    //Determines the a custom editor tempalte
                    editorTemplate: function (fieldType, valueObj, fieldData) {
                        const editor1 = document.createElement('smart-input'), editor2 = document.createElement('smart-input'), label = document.createElement('label'), container = document.createElement('div');
                        container.className = 'container';
                        label.classList.add('custom-label');
                        label.textContent = 'is';
                        if (typeof valueObj !== 'boolean') {
                            editor1.value = valueObj.name;
                            editor2.value = valueObj.occupation;
                        }
                        container.appendChild(editor1);
                        container.appendChild(label);
                        container.appendChild(editor2);
                        return container;
                    },
                    //Determines the HTML representation of the editor's value
                    valueTemplate: function (editor, obj) {
                        return obj.name + ' is an ' + obj.occupation;
                    },
                    //Determines how the value of editor is handled by the QueryBuilder
                    handleValue: function (editor) {
                        const editors = editor.getElementsByTagName('smart-input');
                        return {
                            name: editors[0].value, occupation: editors[1].value
                        };
                    }
                },
                {
                    label: 'Relative Time',
                    name: 'relative_time',
                    expressionTemplate: '{0} <= "{1}"',
                    expressionBuilderCallback: function (dataField, operation, value) {
                        let days = Math.abs(new Date().getTime() - value.getTime()) / (1000 * 60 * 60 * 24), hours = Math.floor((days % 1) * 60), minutes = Math.round((hours % 1) * 60), seconds = Math.round((minutes % 1) * 60);
                        const format = (amount) => amount.toString().length < 2 ? '0' + amount : amount;
                        return this.expressionTemplate.replace('{0}', dataField).replace('{1}', format(Math.round(days)) + '.' + format(hours) + ':' + format(minutes) + '.' + format(seconds));
                    },
                    expressionReaderCallback: function (expression, bindings) {
                        let value = bindings[1], targetDate = new Date();
                        //Timespan type handling
                        if (/([0-9]{2}).([0-9]{2}):([0-9]{2}):([0-9]{2})/gm.test(value)) {
                            let timeSpan = /([0-9]{2}).([0-9]{2}):([0-9]{2}):([0-9]{2})/gm.exec(value);
                            targetDate.setDate(targetDate.getDate() + parseInt(timeSpan[1]));
                            targetDate.setHours(targetDate.getHours(), 0, 0, 0);
                            targetDate.setHours(targetDate.getHours() + parseInt(timeSpan[2]));
                            targetDate.setMinutes(targetDate.getMinutes() + parseInt(timeSpan[3]));
                            targetDate.setSeconds(targetDate.getSeconds() + parseInt(timeSpan[4]));
                        }
                        return { fieldName: bindings[0], value: targetDate };
                    }
                }
            ],
            fields: [
                { label: 'Program Name', dataField: 'programName', dataType: 'string', filterOperations: ['status_equals', 'startswith'] },
                { label: 'Started Within', dataField: 'startedWithin', dataType: 'dateTime', filterOperations: ['relative_time'] },
                { label: 'Part Number', dataField: 'partNumber', dataType: 'string', filterOperations: ['status_equals'] },
                { label: 'Operator', dataField: 'operatorObject', dataType: 'object', filterOperations: ['keyvalue_contains'] },
                { label: 'Operator', dataField: 'operatorString', dataType: 'string', filterOperations: ['contains'] },
                { label: 'Id', dataField: 'id', dataType: 'string', filterOperations: ['list_not_contains'] },
                { label: 'Unit Price', dataField: 'price', dataType: 'number', filterOperations: ['<', 'status_equals'] },
            ],
            showIcons: true,
            value: '(partNumber = "PN-5478" && programName = "Voltage Test") && (startedWithin <= "90.00:00:00" || operator.Contains("John"))'
        };

Also you can get the Linq expression on change event from event.detail.linq. You can use or convert the resulted string expression the way you need to.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Mar Ria,
When exporting the Smart.Grid the only styles that are included are those defined in the dataExport.style property of the element. DataExport is a property of the Grid that allows to configure the exporting of the element. You can read more about it here. If no styles are defined, the Grid applies it’s default. You can read more about the DataExporter here.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi GLMSDev,
there’s a syntax error in the dateStart/dateEnd declaration of the individual tasks:

 dateStart:'2020-02-01′,
 dateEnd:'2020-02-10′,
...
 dateStart:'2020-02-10′,
 dateEnd:'2020-02-20′,

The closing apostrophe is not the same as the opening. This results in invalid date string declarations. That is why you don’t see any tasks loaded.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi GLMSDev,
There is no minimal task requirement for the Smart.GanttChart to load data. Perhaps there’s an issue with the dataSource that is loaded. Can you share a code sample with the data that you are loading or a demo from codepen or other ?
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi GLMSDev,
At present, we do not have development plans to add such functionality to the Smart.GanttChart. However, our company offers custom development services and we can implement this as a custom feature for you. If this is something which you are interested in, please send an email to sales@htmlelements.com
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi GLMSDev,
The TaskTree section of the Smart.GanttChart does not have a scroll bar. The columns always fit in the available space. Keep in mind that every column has it’s own minimum size as well which by default is equal to the min size of a timeline cell (70px) if not set in the taskColumns property.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi peter.jak,
just set the size of the Smart.DockingLayout to 100% via CSS and remember to style the Angular app-root element as well since it doesn’t have any styles by default:

smart-docking-layout {
    height: 100%;
}
app-root {
    height: 100vh;
    display: block;
}

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi GLMSDev,
there’s not enough space for all the columns to show. They always try to fit in the available space. In order to show them you need to set a bigger treeSize or treeMin. The treeMin property controls the minmum size of the TaskTree section.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi GLMSDev,
the dataSource items have invalid dates or too small time differences (between dateStart and dateEnd) for the current view. That’s why you are seeing this. If you share the dataSource and the Smart.GanttChart settings we can find the issue.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Hao Siong Ng,
you need the import the CSS files in order to use the Smart.Grid. It should work out of the box if you are following the React tutorial. What is the error thrown when trying to import the styles?
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Hao Siong Ng,
the ProjectCategoryPage function seems to be working properly when loaded in a default React App:

import React from "react";
import ReactDOM from "react-dom";
import { Smart, Grid } from 'smart-webcomponents-react/grid';
const ProjectCategoryPage = () => {
	const dataSource = new Smart.DataAdapter({
		dataSource: [
			{
				EmployeeID: 1,
				FirstName: 'Nancy',
				LastName: 'Davolio',
				ReportsTo: 2,
				Country: 'USA',
				Title: 'Sales Representative',
				HireDate: '1992-05-01 00:00:00',
				BirthDate: '1948-12-08 00:00:00',
				City: 'Seattle',
				Address: '507 – 20th Ave. E.Apt. 2A',
			},
		],
		keyDataField: 'EmployeeID',
		parentDataField: 'ReportsTo',
		id: 'EmployeeID',
		dataFields: [
			'EmployeeID: number',
			'ReportsTo: number',
			'FirstName: string',
			'LastName: string',
			'Country: string',
			'City: string',
			'Address: string',
			'Title: string',
			'HireDate: date',
			'BirthDate: date',
		],
	});
	const columns = [
		{
			label: 'First Name',
			dataField: 'FirstName',
			width: 200,
		},
		{
			label: 'Last Name',
			dataField: 'LastName',
			width: 200,
		},
		{
			label: 'Reports To',
			dataField: 'ReportsTo',
			width: 200,
		},
	];
	return (
		//  <AppPage screen='administration.projectCategory'>
		<div className='col-12'>
			<Grid
				id='grid'
				dataSource={dataSource}
				columns={columns}
			/>
		</div>
    /* </AppPage>  */
   );
 };
class App extends React.Component {
	render() {
		return ProjectCategoryPage();
	}
}
ReactDOM.render(<App />, document.querySelector("#root"));
export default App;

Can you provide the code for the AppPage React component because the issue seems to be there ?
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Hao Siong Ng,
it looks like you are missing the ‘smart-webcomponents-react’ file references. If no errors are thrown in the console, check if all JS and CSS files for the Smart.Grid are imported and present in their source folders. If you follow the example on the website you won’t have any issues loading the element. If you wish you can share your code or a link to a codepen to help you find the trouble.
Check out this topic for a complete guide on using the Smart.Grid with React.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi peter.jak,
A possible solution is to create an Angular Component with the AsyncPipe like the one shown here and create/append it dynamically to the target Smart.MenuItem when the Smart.Menu is ready. This should be done on ready because custom elements generate their inner HTML structure dynamically. Binding to onReady is as simple as binding to onClick:
<smart-menu-items-group (onReady)="handleReady($event)">...</smart-menu-items-group>.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi peter.jak,
Smart.Menu component can only contain Smart.Menu or Smart.MenuItemsGroup elements. So in order to add any static text you must define it inside a Smart.MenuItem for example:
<smart-menu-item><span>{{ userName | async }}</span></smart-menu-item>
If you want the item to be completely custom ( not selectable like the rest, etc) you can set the custom content as a template, like so:

<smart-menu>
 <smart-menu-item label="itemTemplate"></smart-menu-item>
</smart-menu>
<template id="itemTemplate">
 <span>{{ userName | async }}</span>
</template>

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts