mardi 26 juillet 2016

Checkbox in Kendo Grid - MVC 4

I want to add checkbox in my kendo grid. But when i use this code, it messed up my grid. My CRUD function didn't work at all and the checkbox is failed to be display too. This checkbox will be used to inserted the checked data into another table. In this code, i just want to make the checkbox appear without messing up my another function first. Please help me to solve this problem first. Thank you.

View

<div class="tables">
    <div class="table-responsive bs-example widget-shadow">
        <h4>Data Kuisioner:</h4>
            @(Html.Kendo().Grid<admission.Models.KuisionerPreviewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.id_pertanyaan).ClientTemplate("<input type='checkbox' #= IsChecked ? checked='checked':'' # class='chkbx' onclick='checkMe(#= id_pertanyaan#, this)' />")
            .Width(64).HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)' />");

        columns.Bound(p => p.pertanyaan).Title("Pertanyaan");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Selectable(builder => builder.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
    .Filterable()
    .HtmlAttributes(new { style = "height:570px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Events(events => events.Error("error_handler").Sync("sync_handler"))
        .Model(model => model.Id(p => p.id_pertanyaan))
        .Create(update => update.Action("kuisioner_Create", "Kuisioner"))
        .Update(update => update.Action("kuisioner_Update", "Kuisioner"))
        .Read(read => read.Action("kuisioner_read", "Kuisioner"))
        .Destroy(update => update.Action("kuisioner_Delete", "Kuisioner"))
    )
)
    </div>
</div>

<script type="text/javascript">
    function error_handler(e) {    
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });        
            alert(message);
        }
    }

    function sync_handler(e) {
        this.read();
    }

    function checkMe(e, d) {
        var state = $(d).is(':checked');
        var grid = $('#grid').data().kendoGrid;
        $.each(grid.dataSource.view(), function () {
            if (this['parentId'] == e || this['Id'] == e) {
                if (this['IsChecked'] != state)
                    this.dirty = true;
                this['IsChecked'] = state;
            }
        });
        grid.refresh();
    }

    function checkAll(ele) {
        var state = $(ele).is(':checked');
        var grid = $('#grid').data().kendoGrid;
        $.each(grid.dataSource.view(), function () {
            if (this['IsChecked'] != state)
                this.dirty = true;
            this['IsChecked'] = state;
        });
        grid.refresh();
    }
</script>




Aucun commentaire:

Enregistrer un commentaire