Make cell have multi checkboxes and save as string

2 posts, 0 answers
  1. Jalen
    Jalen avatar
    9 posts
    Member since:
    Oct 2016

    Posted 26 Jan 2017 Link to this post

    I would like to let user choose some option by checkbox.

    ClientTemplate let me put checkbox in cell, but I do not know how to keep checkbox text as cell value.

    Could anybody help me plz? thx

    @(Html.Kendo().Window().Name("HandleNotPermitted")
    .Title("化性不合格處置")
    .Visible(false)
    .Modal(true)
    .Resizable()
    .Draggable(true)
    .Width(700)
    .Content(@<text>
    @( Html.Kendo().Grid<Template.Areas.TestResult.Models.LIMS_Chemical_TestResult>()
            .Name("NotPermittedGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.TestId).Width(120);
                columns.ForeignKey(p => p.TestNo, (System.Collections.IEnumerable)ViewData["TestDesc"], "TestNo", "TestDesc").Width(80);
                columns.ForeignKey(p => p.TagNo, (System.Collections.IEnumerable)ViewData["TagDesc"], "TagNo", "TagDesc").Width(150);
                columns.ForeignKey(p => p.Plant, (System.Collections.IEnumerable)ViewData["Plant"], "ItemValue", "ItemName").Width(60);
                columns.Bound(p => p.TestEqp).Width(100);
                columns.Bound(p => p.Notification).Width(110).ClientTemplate(
                    "<div class='form-group'>" +
                        "<div class='checkbox'>" +
                            "<label>" +
                                "<input type = 'checkbox' id = 'notes'>" +
                                "Notes通知" +
                            "</label>" +
                        "</div>" +
                        "<div class='checkbox'>" +
                            "<label>" +
                                "<input type = 'checkbox'>" +
                                "簡訊通知" +
                            "</label>" +
                        "</div>" +
                        "<div class='checkbox'>" +
                            "<label>" +
                                "<input type = 'checkbox'>" +
                                "重新檢驗" +
                            "</label>" +
                        "</div>" +
                        "<div class='checkbox'>" +
                            "<label>" +
                                "<input type = 'checkbox'>" +
                                "開立異常單" +
                            "</label>" +
                        "</div>" +
                    "</div>"
                        );
            }
            )
            .ToolBar(toolbar =>
            {
                toolbar.Template("<a class='k-button k-button-icontext k-grid-save-changes' onclick='SaveResult1()'><i class='fa fa-check-circle-o''></i>   確認</a>");
                //toolbar.Excel().Text("匯出Excel");
            }
            )
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Excel(excel => excel.AllPages(true))
            .Events(events => events.Edit("edit"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Sort(sort => sort.Add("StartTime").Descending())
                .ServerOperation(false)
                .PageSize(10)
                .Batch(true)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.TestId);
                })
                .Update(Update => Update.Action("ChemicalTestResult_Update", "ChemicalTestResult"))
            //.Read(read => read.Data("filterDetails3").Action("Instrument_EditingPopup_Read_Details3", "Instrument_Manage"))
            )
    )
  2. Eyup
    Admin
    Eyup avatar
    4076 posts

    Posted 30 Jan 2017 Link to this post

    Hello Jalen,

    You can achieve this requirement using dataItem.set(...) for the corresponding grid record using a similar approach as the demonstrated implementation here:
    https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/checkboxes-batch-editing/KendoUIMVC5/Views/Home/Index.cshtml

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top