标签: kendo-asp.net-mvc

我有饼图,我想当我点击按钮它会显示条形图.有可能吗？

我正在将 Kendo UI Grid 与 MVC 4 一起使用，它运行良好，只有一个例外。

如果我在网格中添加一行，然后更新一行，它最终会添加一行而不是更新它。

我能说的是，如果我按添加，程序会在我的 MVC 控制器中输入Create方法，如果我在添加后的一行上按更新，我将再次进入Create方法。

但是，如果我在启动后直接按下网格中的更新按钮，情况似乎并非如此。我正在使用 Ajax 调用完成所有这些操作，因此它与在调用之间不更新的页面有关。如果我只执行一个命令然后刷新页面，一切都会很好。我也使用实体框架作为 ORM。

这是我的剃刀观点：

@model IEnumerable<Internal.License.Management.Web.UI.Models.PriceListViewModel>

@{
   ViewBag.Title = "Price List";
}

@(Html.Kendo().Grid<Internal.License.Management.Web.UI.Models.PriceListViewModel>()
.Name("grid")
.Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(120);
        columns.Bound(p => p.Code).Width(180);
        columns.Bound(p => p.Interval).Width(180);
        columns.Bound(p => p.PricePerUnit).Width(200);
        columns.Bound(p => p.Currency).Width(120);
        columns.Command(commands =>
            {
                commands.Edit();
                commands.Destroy();
            }).Width(172);
    })
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource =>
    dataSource.Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler")) …

我很难找出如何对使用 Template 属性设置的网格中的列进行排序，如下所示：

    @(Html.Kendo().Grid(Model.UnitDetails)
      .Name("unitGrid")
      .DataSource(ds => ds
          .Ajax()
                  .Read(read => read.Action("Units_Read", "Fleet"))
          .AutoSync(true)
          .ServerOperation(true)
      )
      .Columns(columns =>
      {
          columns.Bound(p => p.ViewUnitContract.CurrentRun.Operation.WellContract.Location).Title("Well Site").Sortable(true);
          columns.Bound(p => p.ViewUnitContract.Name).Title("Unit Name").Width(200);
          columns.Template(p => { }).ClientTemplate(" ").Title("Well");
          columns.Template(p => { }).ClientTemplate(" ").Title("Run").Width(75);
          columns.Template(p => { }).ClientTemplate(" ").Title("Task").Width(365);
          columns.Template(p => { }).ClientTemplate(" ").Title("Activity").Width(200); ;
          columns.Template(p => { }).ClientTemplate(" ").Title("Depth (m)").Width(115);
          columns.Template(p => { }).ClientTemplate(" ").Title("Speed (m/min)").Width(90);
          columns.Template(p => { }).ClientTemplate(" ").Title("Weight (kg)").Width(90);
      })
      .ClientRowTemplate(Html.Partial("_ClientRowTemplate", Model).ToHtmlString())
      .Sortable())

对前两列进行排序工作得很好，但是是否可以对与 ClientTemplates 绑定的那些进行排序？

我搜索数据然后绑定到我的网格.在网格databound事件中,我根据单元格的值更改行背景颜色.这很好用.但是当我单击网格中的"编辑"按钮然后单击"取消"按钮时,网格不再具有背景颜色集.我试图在databound事件中调用该事件Cancel,但它不起作用.如何防止取消事件更改网格颜色？

格

   @(Html.Kendo().Grid(Model) 
            .Name("mygrid")
             .Events(e=>e.DataBound("dataBound"))
            .Columns(columns =>
            {
            columns.Bound(p =>p.StudentName).Title("StudentName");
            columns.Command(command =>
             {
              command.Edit().UpdateText("Edit");
              command.Destroy().Text("Delete");
             }).Width(160);
                })
            .Editable(editable => editable.Mode(GridEditMode.PopUp)
            .TemplateName("SudentEditor")
            .Window(configurator=>configurator.Width(500)
            .Title("EditStudent")))
            .Scrollable() 
            .Events(events=>events.Cancel("onCancel"))
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Model(model =>
                    {
                    model.Id(p => p.Id);
                    })
                .Read(read => read.Action("GetStudentForGrid", "Student"))
                .Create(create=>create.Action("CreateSudent","Equipment"))        
                .Update(update => update.Action("UpdateStudent", "Student"))
                .Destroy(destory=>destory.Action("DestroyStudent","Student"))     
                .Events(events => events.Error("error_handler"))
            ))

数据绑定事件

  //change grid color
   function dataBound(e) {

        $("#mygrid tbody tr").each(function(i) {
          $(this).find("td:lt(9)").css("backgroundColor", '#000000');
        });
    }

取消活动

     //I try to call preventDefault event and …

很抱歉再次提出这个常见问题，但我真的无法理解几点。所以，我有这个使用 Telerik Kendo UI 生成的网格。这是一个非常简单的网格，我在页面上有这个组合框，它作为独立控件位于网格之外。当然，这又是一个 Telerik Kendo UI ComboBox 控件。现在，我正在尝试实现一个场景，当用户更改 Combobox 上的选择时，我想将选择值传递给操作方法并相应地刷新网格。我参考了一些关于 StackOverflow 的文章，我发现了这些有用的链接，

Kendo UI 网格刷新下拉选择

如何刷新 Kendo UI 网格

重新加载/刷新剑道网格

所有这些链接都提供了此代码行，它将在客户端刷新网格，

var grid = $("#Product").data("**kendoGrid**");
grid.dataSource.read();

现在我无法理解的是上面这个粗体字“kendoGrid”代表什么，即“数据”方法的参数应该是什么？

我已经为我的应用程序实现了以下代码段，但不幸的是，它不起作用。任何人都可以指出我缺少什么以及如何修复此代码以使其正常工作，

@(Html.Kendo()
        .DropDownList()
        .Name("ddlProject")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
         {
              source.Read(read => { read.Action("GetProjectsForCurrentUser", "Home"); });
         })
         .OptionLabel("Select a Project")
         .HtmlAttributes(new { style = "width:200px;height:20px;" })
                                  .Events(e => e.Change("selectedIndexChanged")))

@Html.Action("LoadDefects")

@(Html.Kendo()
      .Grid(Model)
      .Name("DefectGrid")
      .Columns(columns =>
      {
          columns.Bound(d => d.DefectId).Title("ID").Width("5%");
          columns.Bound(d => d.Title).Title("Title").Width("20%");
          columns.Bound(d => d.Severity).Title("Severity").Width("10%");
          columns.Bound(d => d.Status).Title("Status").Width("10%");
          columns.Bound(d => d.Description).Title("Description").Width("20%"); …

当我使用带有ASP .NET MVC的Kendo UI网格点击"编辑"按钮时,我想向另一个页面添加重定向.

这是基本代码:

@(Html.Kendo().Grid<ViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.Id);
        columns.Bound(x => x.Name);
        columns.Bound(x => x.Field1);
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Destroy();
        })
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(x => x.Id))
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Edit", "Home"))
        .Destroy(destroy => destroy.Action("Destroy", "Home"))
    )
)

我试图使用HTML属性,但它不起作用:

commands.Edit().HtmlAttributes(new { @class = "edit" });

然后,我尝试添加一个自定义编辑(通过commands.Custom(...)但不幸的是它仅用于.Server()数据绑定.

我可以用客户端模板来做,但我真的想使用Kendo UI提出的默认按钮:

columns.Template(@<text></text>)
            .ClientTemplate(
                "<a href='" + Url.Action("Edit", "Home") + "/#=Id#'>Edit</a>");

你还有其他想法吗？

提前致谢.

我正在尝试将Html.ListBoxFor()迁移到Html.Telerik().MultiSelectFor()以获得一些花哨的UI,但HTTP表单帖子与模型不兼容,并且似乎过多新模型粘合剂,以避免它.

public class Settings
{
  public int[] UserIds { get; set; }

  public IEnumerable<SelectListItem> UserSelectList { get; set; }
}

当我使用Html.ListBoxFor帮助程序时,HTTP表单post仅包含Select List Item的值(即UserIds数组),如预期的那样.

UserIds[0] = 1
UserIds[1] = 2

@Html.ListBoxFor(model => model.UserIds, Model.UserSelectList)

当我使用Kendo MultiSelect时,HTTP表单帖子包含两个属性.这不是预期的.

UserIds[0].Text = Adrian
UserIds[0].Value = 1
...

@Kendo().MultiSelectFor(model => Model.UserIds).BindTo(Model.UserSelectList)

有没有人知道如何让Kendo MultiSelect只发布id值,或者是否有现成的Model Binder？

我在局部视图中有Kendo Tabstrip控件，在该Tabstrip中有Kendo Grid。

         @(Html.Kendo().TabStrip()
                .Name("tabstrip1")
                .Items(ts =>
                        {
                        ts.Add()
                        .Text("Tab Strip 1")
                        .Content(@<text>
                            @(Html.Kendo().Grid<testproject.Class.DiscussionBoard>()
                                .Name("kendogrid1")
                                .Columns(columns =>
                                    {
                                        columns.Bound(p => p.Name).Title("Name");
                                        columns.Bound(p => p.CreatedBy).Title("Created By");
                                        columns.Bound(p => p.Subject).Title("Subject");
                                        columns.Bound(p => p.CommentsDescription).Title("Comments/Description");
                                        columns.Bound(p => p.ModifiedOn).Title("Modified On ");
                                    })
                        .NoRecords("No Recod Exists!!")
                            )
                        </text>);
                        })
        )

当我运行这个我得到这个错误

我尝试通过网络进行搜索，但没有找到太多有关此问题的信息

ASP MVC 5项目

帮助总是值得赞赏的

谢谢

我正在使用Kendo UI for ASP.NET MVC.我有网格编辑命令.编辑命令的默认外观是"按钮",我想将其更改为链接.但是命令没有Template()方法.那么如何更改编辑命令按钮以进行链接？

Telerik可以选择创建此处定义的自定义命令.但我的网格配置为使用GridEditMode.Popup内置编辑命令很好用.如果我创建自定义命令然后我想我必须连接弹出窗口和其他一切.

我只是想改变"按钮"链接？

 @(Html.Kendo().Grid<UI.Models.GridVM>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.CampaignID)                    
            columns.Bound(p => p.CampaignStatus);  
            columns.Command(command => command.Edit().Text("Edit Me")); // How do i change this to link??
        })            
        .Editable(editable => editable
            .Mode(GridEditMode.PopUp)
            .TemplateName("CampaignEdit")
            .Window(w =>
            {
                w.Width(400);
                w.Title("Edit Details");
            }))
        .Filterable()
        .Pageable()
        .Navigatable()
        .Sortable()                      
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(20)
            .Model(model => model.Id(p => p.CampaignID))
            .Read(read => read.Action("GetCampaigns", "Home"))
            .Update(update => update.Action("UpdateCampaign", "Home"))
        )            
    )

UPDATE1
@Steve Greene谢谢.您的方法确实适用于主网格.但我也有儿童细节网格,它有编辑链接.该方法不适用于细节网格.剑道引发错误.
我认为我们必须转义模板表达式,以便在子/详细信息上下文中进行评估.但我不确定语法是什么

 @(Html.Kendo().Grid<UI.Models.GridVM>()
    .Name("Grid")
    .Columns(columns => …

我正在使用很多Kendo UI窗口.有没有办法在某种程度上全局指定默认值？或者更真实的版本,我可以用预定义的值创建一些父级,然后只覆盖我需要更改的值吗？

例如,我想要所有窗口的相同错误行为和模态参数,所以我想做类似的事情:

$("#parentWindow").kendoWindow({
     modal: true,
     error: function () {
          this.close();
          new Notification().error();
     }
});

然后使用父窗口作为新窗口的基础:

$("#newWindow").kendoWindow({
     title: "This window should have the options (modal and error) of the parentWindow",     
}).??getTheRestOfTheValuesFromParent()??;

或者重写一些参数:

$("#newWindow2").kendoWindow({
     modal: false,
     title: "A window with overwritten modal parameter",     
}).??getTheRestOfTheValuesFromParent()??;

是否有可能实现这一点,是否有可能出现类似C#继承的东西？也许这是一个愚蠢的问题,但我对JS并不熟悉.