Products

[davout]

I’ve solved the problem by setting the ‘datasource’ to an observable

<smart-kanban #kanban class="task-smart-kanban" id="kanban"
              [collapsible]="collapseColumns"
              [columns]="kanbanColumns"
              [dataSource]="specialTasks$ | async"
              [taskDue]="true"
              [formatStringDate]="'dd MMM yyyy'"
              [taskUserIcon]="false"
              [taskActions]="true"
>
</smart-kanban>

[davout]

I have adapted my app to set up a Kanban datasource of one task that is set up as part of the Typescript class as shown below

export class TaskSmartKanbanComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild('kanban') kanbanComponent: KanbanComponent;
  // public input properties
  @Input() viewId: number;
  @Input() pageSize = 1000;
  // public properties for Kanban component
  public kanbanColumns = null;
  public collapseColumns = true;
  public tasks = [{ id: 1, dueDate: null, status: '0', text: 'test' } ];
The Kanban shows this one task
It simply is not recognizing the updating of the 'datasource' at a later time when my async service call completes
I can't find a 'refresh' view model to force the component to redraw itself.

[davout]

I can’t find any docs to explain the function method signature that is used for this taskTemplate

[davout]

I found out how to do this from your docs,  see:
<h3 id=”toc-taskusericon_boolean” title=”taskUserIcon”><span class=”code”>boolean</span></h3>
<p class=”smart-property-description”>Toggles the visibility of the task user icon.</p>
<div class=”smart-property-default-value”>
<h4>Default value</h4>
<span class=”value”>true</span></div>
<div class=”code-example”>Try a demo showcasing the taskUserIcon property.</div>
<div class=”code-example”>
<h4>Example</h4>
Set the taskUserIcon property.
<pre class=”prettyprint”> <smart-kanban [taskUserIcon]=”true”></smart-kanban>
Set the taskUserIcon property by using the component’s instance.
<pre class=”prettyprint”> this.kanban.taskUserIcon = false;
Get the taskUserIcon property.
<pre class=”prettyprint”> let taskUserIcon = this.kanban.taskUserIcon;
</div>

[davout]

Thanks for that….
Is it also possible to hide the hour based rows BELOW the ‘all day’ row?

[davout]

If I am displaying a button on each row in a table,   how do I connect the tool tip to each instance of the button?

[davout]

I’ve managed to solve it by pointing the datetimepicker at a component class value, not the table cell value pushed to it by the template
#

[davout]

I’ve noticed that I have to select the new date value twice before the ‘change’ event is triggered
The date time picker is inside a template that is used for table cell editing

<ng-template #scheduledDateTemplate let-row="row" let-rowIndex="rowIndex" let-value="value">
          <span
            (click)="startInlineEdit(rowIndex + '-scheduled', rowIndex)"
            *ngIf="!isInlineEditing(rowIndex + '-scheduled')"
            title="Click to edit"
          >
            {{ value }}
          </span>
  <smart-date-time-picker
    *ngIf="isInlineEditing(rowIndex + '-scheduled')"
    formatString="ddd dd-MMM-yyyy"
    dropDownDisplayMode="calendar"
    drop-down-position="bottom"
    calendar-button placeholder="for"
    style="width: 180px"
    [nullable]="true"
    [autoClose]="true"
    [value]="value"
    [dropDownAppendTo]="'body'"
    (change)="updateScheduledValue($event)"
  >
  </smart-date-time-picker>
</ng-template>

[davout]

It is not practical to break out the code for very bug.   I have provided a clear replication path, and I would expect a support function to do that as part of their role.
The component mark up is shown below…
<smart-date-time-picker
formatString=”ddd dd-MMM-yyyy”
dropDownDisplayMode=”calendar”
drop-down-position=”bottom”
calendar-button placeholder=”for”
style=”width: 180px”
[nullable]=”true”
[autoClose]=”true”
formControlName=”scheduledDate”
[dropDownAppendTo]=”‘body'”
>
</smart-date-time-picker>

… Thiss is how I can calling the control in a reactive form

this.taskForm.get(this.CONTROL_SCHEDULED_DATE).patchValue(null);

[davout]

An I suggest that you update your documentation to specify what component work with Angular reactive forms?  Adding this to the component API guide

[davout]

What about https://www.htmlelements.com/angular/demos/buttongroup/overview/#toc-selectedvalues_string  ??

[davout]

Replication steps

1. Start a new Angular project
2. Add a new component
3. In the component HTML set a reactive form with two ‘smart-check-box’ checkboxes
4. In the component init code set up the form with two FormControl elements that pass in an initial false starting value
5. Else where in the component code push values into the form using the ‘setValue’ method.
6. Try pushing true boolean values into the controls to check the checkboxes – note the error that arises
7. Try pushing true string values into the controls – note how the UX does not show the control as checked

[davout]

What string?  Please provide an example, because when I have tried converting the boolean to a string this does  not work, as shown below
stateWIP: data.stateFilter.hasState(GdTaskWorkflowState.wip) === true ? ‘true’ : ‘false’,
Anyhow,  the component is included on this list https://www.htmlelements.com/docs/angular-reactive-forms/   but it does not support the standard way of communicating

[davout]

By experiment I’ve found that “smart-check-box” does not work with reactive forms.   Is there another version of a check box that I can use from your Smart product?
What does ‘smart-check-input’ do?

[davout]

I am setting the react form value to null but the datepicker is showing today’s date

<smart-date-time-picker id="scheduledStart" autoclose="true" calendar-button down-position="bottom"
                        dropDownDisplayMode="calendar"
                        formatString="dd-MMM-yyyy"
                        placeholder="From"
                        [autoClose]="true"
                        formControlName="scheduledFrom"
                        style="width: 150px">
</smart-date-time-picker>

 
 

[Author]

Posts