Есть ли способ определить максимальную и минимальную дату для столбца даты в сетке кендо? - PullRequest
Новая
       15

Есть ли способ определить максимальную и минимальную дату для столбца даты в сетке кендо?

0 голосов
/ 08 апреля 2019

У меня есть сетка кендо с редактированием в ячейке и пара столбцов даты.Я хочу указать максимальную и минимальную дату для указателей даты внутри ячейки, которую редактирует пользователь, но, похоже, для этого не существует какого-либо свойства.

Я пытался сделать это с помощью шаблонов: 

<kendo-grid-column field="StartDate" title="Start Date">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <kendo-datepicker
        format="{0:dd/MM/yyyy}"
        [(ngModel)]="dataItem"
        ></kendo-datepicker>
    </ng-template>
</kendo-grid-column>

Но я получаю кучу ошибок.Как я могу сделать эту работу?

РЕДАКТИРОВАТЬ: Я создал пример стекаблиц на основе одного из примеров редактирования в ячейке, которое я нашел в документации:

https://stackblitz.com/edit/angular-ewvsh5

Здесь я обнаружил, что не указывал свойство, к которому должен подключаться ngModel: 

[(ngModel)]="dataItem"

Должно быть: 

[(ngModel)]="dataItem.Date"

Хорошо, яизменил его, но теперь, когда я нажимаю на ячейку даты, вместо того, чтобы появиться средство выбора даты, появляется обычный ввод.Пожалуйста, проверьте эту часть в шаблоне компонентов, где проблема: 

<!-- This doesn't work -->
<kendo-grid-column field="Date" title="Date">
    <ng-template
        kendoGridCellTemplate
        let-dataItem
        let-rowIndex="rowIndex"
        let-isEdited="isEdited"
        *ngIf="editingDateCell"
    >
        <kendo-datepicker [(ngModel)]="dataItem.Date"></kendo-datepicker>
    </ng-template>

    <ng-template
        kendoGridCellTemplate
        let-dataItem
        let-rowIndex="rowIndex"
        let-isEdited="isEdited"
        *ngIf="!editingDateCell"
    >
        {{ dataItem.Date | date }}
    </ng-template>
</kendo-grid-column>

Что я делаю не так?

РЕДАКТИРОВАТЬ II: Все решения такдалеко покажите указатель даты внутри клетки.Хорошо, я знаю, как это сделать.Проблема заключается в том, что перед тем, как пользователь щелкнет, чтобы отредактировать ячейку, эта ячейка должна быть похожа на метку, а когда пользователь нажимает на эту метку, она должна стать средством выбора даты.Если пользователь меняет дату и щелкает, сетка должна знать, что данные были обновлены, и действовать соответствующим образом.Таким образом, мне нужно сохранить поведение редактирования в ячейке.

Ответы [ 4 ]

1 голос
/ 08 апреля 2019

Наконец, мне нужно было использовать kendoGridEditTemplate вместо kendoGridCellTemplate и использовать [formControl] вместо [(value)] или [(ngModel)]. Если вы следуете примеру , приведенному в документации, и хотите добавить настраиваемый столбец даты, чтобы иметь полный доступ к свойствам средства выбора даты, добавляемая разметка будет такой: 

<kendo-grid-column
  field="StartDate"
  title="Start Date"
  [format]="{ date: 'dd/MM/yyyy' }"
>
  <ng-template
    kendoGridEditTemplate    <!-- Important -->
    let-column="column"
    let-formGroup="formGroup"
  >
    <kendo-datepicker
      format="dd/MM/yyyy"
      [formControl]="formGroup.get(column.field)"    <!-- Important -->
      [min]="minimumDate"
    >
    </kendo-datepicker>
  </ng-template>
</kendo-grid-column>
1 голос
/ 08 апреля 2019

Вам необходимо использовать свойства выбора минимальной и максимальной даты. Пожалуйста, обратитесь к этой справочной ссылке API для примера выбора даты min max. Также см. эту ссылку на форум для примера шаблона столбца выбора даты. 

 @Component({
  selector: 'my-app',
  template: `
      <form novalidate #myForm="ngForm">
          <kendo-grid
              [data]="view | async"
              [height]="533"
              [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
              [pageable]="true" [sortable]="true"
              (dataStateChange)="onStateChange($event)"
              (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
              (save)="saveHandler($event)" (remove)="removeHandler($event)"
              (add)="addHandler($event)"
              [navigable]="true"
            >
            <ng-template kendoGridToolbarTemplate>
                <button kendoGridAddCommand type="button">Add new</button>
            </ng-template>
            <kendo-grid-column field="ProductName" title="Product Name">
                <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                    <input [(ngModel)]="dataItem.ProductName" kendoGridFocusable name="ProductName" class="k-textbox" required/>
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="date" title="Date" format="{0:yyyy-MM-dd}">
                <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                    <kendo-datepicker  
                    [format]="'yyyy-MM-dd'" 
                    [(ngModel)]="dataItem.date" 
                    [min]="min"
                    [max]="max"
                    name="date"></kendo-datepicker>
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-command-column title="command" width="220">
                <ng-template kendoGridCellTemplate let-isNew="isNew">
                    <button kendoGridEditCommand type="button" class="k-primary">Edit</button>
                    <button kendoGridRemoveCommand type="button">Remove</button>
                    <button kendoGridSaveCommand type="button" [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                    <button kendoGridCancelCommand type="button">{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
                </ng-template>
            </kendo-grid-command-column>
          </kendo-grid>
      </form>
  `
})
export class AppComponent implements OnInit {
    public min: Date = new Date(2018, 2, 10);
    public max: Date = new Date(2018, 11, 25);
}
0 голосов
/ 08 апреля 2019

Вот пример кода, который делает то, что вам нужно: 

@Component({
   selector: 'my-app',
   template: `
       <p>Date</p>
       <kendo-grid [data]="gridData">
        <kendo-grid-column field="ProductID"></kendo-grid-column>
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="date" [format]="{ date: 'long' }">
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <kendo-datepicker [(value)]="dataItem.date" [min]="minDate" [max]="maxDate">

                </kendo-datepicker>
            </ng-template>
        </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
    public minDate = new Date(2018, 4, 1);
    public maxDate = new Date(2018, 4, 31);

    const products = [{
       "ProductID": 1,
       "ProductName": "Chai",
       "UnitPrice": 18.0000,
       "Discontinued": true,
       date: new Date("2018-05-05T00:00:00-05:00")
     }, {
       "ProductID": 2,
       "ProductName": "Chang",
       "UnitPrice": 19.0000,
       "Discontinued": false,
       date: new Date("2018-05-07T00:00:00-05:00")
     }
    ];

    public gridData: any[] = products.map(item => {
      item.date = new Date(item.date);
      return item;
    });
}
0 голосов
/ 08 апреля 2019

Чтобы установить минимальное и максимальное значения даты, используйте [min] и [max]. См. это демо для примера.

...