kendo-autocomplete 相关问题

我正在使用 AutoComplete(MUI) 创建国家/地区选择器，但收到以下错误消息。警告：在渲染不同的组件（`

我正在开发一个 React/Typescript 项目。我有一个 Autocomplete 元素，其选项是一系列包含 {label、value 和 endOfDay} 的对象。我有选项标签显示...

我试图在自定义编辑器模板中删除此组合框的验证： ... @{ ViewContext.FormContext = new FormContext(); } 我试图在自定义编辑器模板中删除此组合框的验证： ... @{ ViewContext.FormContext = new FormContext(); } <div data-container-for="ClientId" class="k-edit-field"> @(Html.Kendo().ComboBoxFor(model => model.ClientId) .HtmlAttributes(new { data_bind = "value:ClientId", id = "ClientId", data_val = false }) .Name("ClientId") .DataTextField("Text") .DataValueField("Value") .DataSource(source => { source.Read(read => { read.Action("GetClientsList", "Scheduler"); }).ServerFiltering(true); }) .Events(e => { e.Select("onSelect"); }) .HtmlAttributes(new { style = "width:100%;" })) </div> @{ ViewContext.FormContext = null; } ... 尝试使用以下方法删除模型中的验证： [AllowAnyValue] public int? ClientId { get; set; } public class AllowAnyValueAttribute : ValidationAttribute { public override bool IsValid(object value) { // Always return true to allow any value return true; } } 尝试在组合框输入中添加新文本，例如名称，我仍然收到此 Kendo 错误留言： `The field ClientId must be a number.` 我对验证 Kendo 控件不太熟悉，但在我看来，您正在为具有“Text”和“Value”字段的实体指定组合框，而您绑定的实体是一个名为“ClientId”的简单可为空 int . 添加一个 CbBoxValue 类，如下所示： public class CbBoxValue { [AllowAnyValue] public int? Value { get; set; } public string Text { get; set; } public CbBoxValue ( int? ClientId ) { Value = ClientId; Text = ClientId?.ToString() ?? ""; } } 然后将 CbBoxValue(ClientId) 传递给组合框，而不是直接传递 ClientId。注意：我还没有测试过这个，正如我所说，我对此事不是很熟悉，但这对我来说似乎是合乎逻辑的。

Mat-autocomplete 和 mat-option 事件在过滤后分页速度太慢？

使用我设法从API中找到的任何类型的事件进行选择和自动完成最终都会导致MatPaginator“落后一步”，例如而过滤后的数据应该只有 200 个...

我可以为自动完成列表框 Mui 提供自定义滚动条样式吗？

我需要在自动完成列表框中给出自定义滚动样式。我尝试并研究了它，但没有一个起作用。我最后的代码我需要在自动完成列表框中给出自定义滚动样式。我尝试并研究了它，但没有一个起作用。我最后的代码 <Autocomplete fullWidth popupIcon={<KeyboardArrowDownIcon />} id="combo-box-demo" options={allTableData} noOptionsText={"Məhsul tapılmadı"} getOptionLabel={(option) => option.name ?? option} ListboxProps={{ style: { maxHeight: "200px", "&::-webkit-scrollbar": { width: "20px", }, }, }} 是的，您可以将自定义 className 传递给 ListboxProps 组件的 Autocomplete，如下所示： ListboxProps={{ className: "myCustomList" }} 然后将滚动条相关的CSS添加到此类中，如下所示： .myCustomList::-webkit-scrollbar { width: 12px; background-color: #5f6f9c; } .myCustomList::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #d62929; } 您可以查看此沙箱，了解此解决方案的实时工作示例。而不是在 style 属性中添加样式；在 ListBoxProps 中添加 'sx' 属性中的样式。这对我有用。 ListboxProps={{ sx: { maxHeight: 300, // Adjust this value as per your requirement '&::-webkit-scrollbar': { width: '8px' }, '&::-webkit-scrollbar-track': { backgroundColor: theme.palette.background.default }, '&::-webkit-scrollbar-thumb': { backgroundColor: theme.palette.primary.main, borderRadius: '10px', border: `2px solid ${theme.palette.background.paper}` }, '&::-webkit-scrollbar-thumb:hover': { backgroundColor: theme.palette.primary.dark } } }}

向垫子表添加额外的行

所以我有一张垫子桌所以我有一张垫子桌 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag dkDragLockAxis="x" cdkDragBoundary="mat-header-row"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{ element[column.name] }} </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table> 但我需要在表标题下为相应的行过滤器添加一行。我尝试在标题和实际行声明之间添加 <mat-row> ，但是由于过滤器是不同的输入（例如数字、自动完成选择和多选），我无法 *ngFor 它们（而且我不是当然我是否能够）编辑：忘记发布过滤器 HTML <div class="filterGroup"> <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter za param1" formControlName="filterParam1"> </mat-form-field> <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter za param2" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter za param3" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </div> 以及相关组件.ts tableDisplayedColumns: string[] = ['param1', 'param2', 'param3']; columns: any[] = [ { name: 'param1', title: 'Param1' }, { name: 'param2', title: 'Param2' }, { name: 'param3', title: 'Param3' } ]; 为了解决这个问题，我设法通过删除 *ngFor 并手动放入过滤器来做到这一点。 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container matColumnDef="param1"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param1 <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param1}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param2"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param2 <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param2}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param3"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param3 <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param3}}</span> </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table>

kendo-autocomplete 相关问题

最新问题