KendoUI网格和编辑器

时间:2014-08-05 12:07:27

标签: kendo-ui kendo-grid

我正在试用Kendo编辑器。 我的目标是能够在编辑器中编辑网格行单元格的内容,一旦完成,就可以使用编辑器更新单元格的内容。到目前为止没有成功。 我对这些东西不太满意。我是一个后端人,但是得到了这个任务。 任何想法??

这是我的网格

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(product => product.Naam).Width(100);
        columns.Bound(product => product.Waarde).Width(100);
        columns.Bound(product => product.Opmerking).Width(250);
        columns.Template(@<text></text>).ClientTemplate("<a class=\"delete iconBtn\" onclick=\"onClickDeleteResourceItem(#: ID #, '#: Naam #')\"></a>").Title("").Width(50);

    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Groupable()
    .Navigatable()
    .ColumnMenu()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .Model(model =>
            {
                model.Id(product => product.ID);
                model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
                model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
                model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
            })
        .Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
        .Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }))
        .Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
        .Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
    )
)

这是我的编辑

@(
    Html.Kendo().Editor()
                .Name("kEditor")
                    .Events(events => events
                        .Change("change")
                    )
                .Tools(tools => tools
                    .SubScript()
                    .SuperScript()
                )
                .HtmlAttributes(new {style="width:740px;height:240px"})

 )

@Html.WebCore().Popup.Remove("confirmResourceItemPopup", "Verwijderen resource item", "")

这是我的剧本

@section Scripts
{
    @Scripts.Render(Links.Bundles.Scripts.BeheerTeksten.Teksten)
    <script type="text/javascript">

        function change(e) {
            var editor = $("#kEditor").data("kendoEditor")

            var entityGrid = $("#Grid").data("kendoGrid");
            entityGrid.dataItem(entityGrid.select()) = editor.value();
        }

        $('#Grid').click(function () {
            var entityGrid = $("#Grid").data("kendoGrid");
            var selectedItem = entityGrid.dataItem(entityGrid.select());

            var editor = $("#kEditor").data("kendoEditor")
            editor.value(selectedItem);
        });

    </script>
}

0 个答案:

没有答案