标签: devextreme

当我在DevExtreme图表中点击一个点时,我试图显示一些东西(最终是一个菜单).为简单起见,我开始使用条形图.

我想要做的是,当用户点击一个栏以在该特定点的DOM中显示其他内容时.我试图设置它并且大部分都是这样,我得到的问题我不确定如何解决是关于坐标.

上面的示例显示了我单击的位置,以及我附加的红色圆圈,它出现在栏的顶部.添加它的代码非常简单:

var clicked = function(p) {
 var element = p.element[0];
 var group = d3.select(element)
             .select("svg")
               .append("g")
               .attr("transform", "translate("+ [p.target.x, p.target.y] +")")
               .append("circle")
               .attr({ cx : 0, cy: 0, r: 10, class: "circle"});
};

只需获取目标点击元素的坐标即可.显然这似乎是顶角.有没有人可以想到获得实际点击的位置？

我在这里举了一个示例小提琴:http://jsfiddle.net/IPWright83/ho2euurh/2/

什么时候 ？单击按钮，不工作刷新。如果目的是添加到数据库按钮按钮按下来到屏幕。但是不更新。我用ajax创建了一个数据网格。我在ViewModel中也写了刷新功能，不更新可能是什么原因。我的数据是json。

$.ajax({
        type: "GET",
        url: "https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems"
        success: function (msg, result, status, xhr) {
        var obj = jQuery.parseJSON(msg);
        $("#gridContainer").dxDataGrid({
        dataSource: obj,
        filterRow: {
        visible: true}});}});
        var viewModel = {
        refresh: function () {        
        var dataGrid = $('#gridContainer').dxDataGrid('instance');
        dataGrid.refresh();}};
return viewModel;

<div data-options="dxView : { name: 'dd',disableCache: true } " >
   <div data-bind="dxCommand: { icon: 'refresh', id: 'save', onExecute: refresh }"></div>
     <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
       
         <div  id="gridContainer"></div> 
        
            </div>
</div>

我的 angular2 项目中有一个 devextreme 数据网格。但是，具有日期数据类型的列仅以以下格式显示完整的 javascript 日期：yyyy-MM-ddTHH:mm:ss。我想将此列的格式设置为对用户更友好的格式，例如 dd.MM.yyyy（欧洲风格）。

但是直到现在我所有设置日期格式的尝试都没有成功。

以下是我目前在组件模板中的内容：

    <dx-data-grid [dataSource]="tasks">
        <dxi-column dataField="barcode" ></dxi-column>
        <dxi-column dataField="receiptDate" format="shortDate">
            <dxo-format type="shortDate"></dxo-format> 
        </dxi-column>
    </dx-data-grid>

不幸的是，设置格式的类型根本不会改变任何东西——我仍然得到这个未格式化的 JS 日期字符串。而且我在控制台中也没有任何异常。

我在 Angular 应用程序中使用devExtreme UI 框架。

在文档中我找到了如何设置focus它说使用method focus()

但没有重点DxTextBoxComponent

如何设定焦点？

我的代码是：

@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;

  ngAfterViewInit() {
    this.inputName.instance.focus();
  }

HTML 是：

<dx-text-box #name>

没有效果

在撰写本文时，我正在使用最新版本的DevExtreme for Angular 2，即版本 16.2。我有一个 DevExtreme 表单，它正在user从其组件获取数据。正如您所看到的，没有太多内容。

<dx-form id="form" [(formData)]="user">
    <dxi-item dataField="fName"></dxi-item>
    <dxi-item dataField="lName"></dxi-item>
</dx-form>

但是，我不知道如何更改从dataField. 我查看了文档，似乎找不到答案。我觉得我应该能够写：

<dxi-item dataField="lName" customLabel="Last Name"></dxi-item>

似乎是一个应该存在的功能，并且应该很容易在文档中找到。

如何使用DevExtreme和Angular2在EditMode中隐藏DataGrid列？

<h3>Test</h3>
<dx-data-grid id="gridContainer" 
[dataSource]="xxx" 
[allowColumnReordering]="true" 
[allowColumnResizing]="true" 
[rowAlternationEnabled]="true">
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxi-column dataField="Id" 
    [visible]="false" 
    [width]="50"
    [allowEditing]="false" ></dxi-column>
    <dxi-column dataField="Name"></dxi-column>
    <dxi-column dataField="Type"></dxi-column>
    <dxi-column dataField="Data"></dxi-column>
    <dxo-editing mode="form"
                 [allowUpdating]="true"
                 [allowDeleting]="true"
                 [allowAdding]="true">
    </dxo-editing>
</dx-data-grid>

列不显示在网格上,而是显示在Editform上.

谢谢您的帮助.

我是Angular2的新手并尝试从头开始开发应用程序.在该应用程序中,我需要广泛使用调度程序,网格,图表等控件以及其他控件.我一直在寻找谷歌,并遇到了Syncfusion,Kendo UI,DevExtreme等但无法找到决定性的解决方案.请建议我应该使用哪种Thrid方UI控件.我的基本需求是 -

• 性能

• 非常好的文档

• 来自特定公司以及使用相同公司的社区的轻松支持.

• 延迟加载

• 如果需要,可以在一定程度上轻松自定义控件.

状态字段（最后一行），我们希望过滤器选项显示“活动”和“非活动”，而不是 true false。有一种编码方法可以做到这一点，但我们正在使用模板创建表。我觉得这非常容易做到，只是在文档中没有看到它。

      <dxi-column dataField="TruckNumber" caption="Truck #" alignment="left"></dxi-column>
      <dxi-column dataField="PlateNumber" caption="License Plate #" alignment="left"></dxi-column>
      <dxi-column dataField="Phone" dataType="string" alignment="left"></dxi-column>
      <dxi-column dataField="Status" alignment="center"></dxi-column>

角度 4.4.6

最后一个问题是，我无法从使用 [calculateCellValue]="function" 调用的函数访问 component.ts 的上下文，如果我使用 .bind(this) 传递它，DataGrids 交互功能将不再工作。

最后一个问题：如何防止 .bind(this) 以避免 DataGrid 的功能变得不起作用，或者确保我不需要执行 [calculateCellValue]="function.bind(this)" 来传递 DataGrid 的上下文组件到函数，并以其他方式使用正常的 [calculateCellValue]="function" 方法传递上下文。

代码如下所示：

我将 DxDataGrid 与 DxiColumns 一起使用，它调用组件函数：

<dxi-column dataField="exampleField" [calculateCellValue]="getExamplevalues"></dxi-column>

Angular 组件中的 getExamplevalues 函数如下所示：

getExampleValues(dataGridContext: any) {
    return this.exampleItems.length;
}

exampleItems 在组件的 ngOnInit 函数中启动：

  public example$: Subscription;
  public exampleItems: any;

  constructor(private exampleService: ExampleService) { }

  ngOnInit(): void {
    this.example$ = this.exampleService.getAll().subscribe(items => this.exampleItems = items);
  }

但是，在 getExamplevalues 函数中， this.exampleItems 始终未定义，因为该函数仅返回 DxDataGrid 的上下文，而不返回 Angular component.ts 上下文。

解决方案是改变：

<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues"></dxi-column>

=>

<dxi-column …

我正在使用 DevExtreme 的 dxchart 迈出第一步。目前我有以下代码：

HTML：

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8" />\n        <title>DevExtreme Chart</title>\n        <!--FRAMEWOKR-->\n        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>\n        <script src="./lib/globalize.min.js"></script>\n        <script src="./lib/dx.charts.js"></script>\n        <!--JS-->\n        <script type="text/javascript" src="chart.js"></script>\n    </head>\n    <body>\n        <div id="chartContainer" style="width:100%; height: 440px"></div>\n    </body>\n</html>\n

JS：

$(document).ready(function(){\n    var dataSource = [\n        {\n            argument: \'15.06.2016\',\n            puls: 102,\n            temperatur: 37.6,\n            weight: 91\n        },\n        {\n            argument: \'16.06.2016\',\n            puls: 99,\n            temperatur: 35.1,\n            weight: 88\n        },\n        {\n            argument: \'17.06.2016\',\n            puls: 87,\n            temperatur: 38.0,\n            weight: 87\n        },\n        {\n            argument: \'18.06.2016\',\n            puls: 91,\n            temperatur: …

I've encountered the error:

JsonSerializationException: Self referencing loop detected for property 'Subject' with type 'Project.Models.Subject'. Path 'data[0].Totals'.

It occurs when I load a View with a dataGrid populated by an IEnumerable<Subject> model. The Grid is a DevExtreme DataGrid bound to the View's model like this:

@(Html.DevExtreme().DataGrid()
    .DataSource(Model)
    .Paging(paging =>
    {
        paging.Enabled(true);
        paging.PageIndex(0);
        paging.PageSize(20);
    })
    .Columns(columns =>
    {
        columns.Add().DataField("SubjectId");
        ... other fields
    })
)

Which is populated from a Controller that pulls data from a Repository with this function:

public async …