lundi 16 octobre 2017

How can i create an object from selected checkbox and pass it to the controller?

I have a Kendo grid with "Select All" checkbox which select all rows. The user can select row/s and click download button to download the files. However, the user still have an option to select row/s of his choice and click download button which calls Javascript function. I am using ajax to pass the selected rows to my controller function and then i will deserialise my json string.

The problem is when i Select All checkbox, it says my object is undefined for all the rows selected and this applies when i select 1 or 2 rows. If i select 1 or 2 rows, my object get filled with the data returned on the grid instead of just giving me the selected one's. Refers to my object return for this

How can i create an object from selected checkbox and pass it do the controller ?

Returned Error Object

[{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined },{ ordernumber: undefined }]

Kendo Grid

<div class="form-group">
            @(Html.Kendo().Grid<TTAF.Portal.Parts.Web.Models.ConsolidatedPossModel.GridConsolidatedPossModel>()
            .Name("Grid")
            .ToolBar(toolbar =>
            {
            toolbar.Template(@<text>
                <div class="toolbar">
                    <button class="btn btn-primary" id="btnSearch" onclick="goToControllerDownloadAll()" name="submit" type="submit">Download Selected Orders</button>
                </div>
            </text>);
            })
            .Columns(columns =>
            {
            columns.Bound(x => x.ordernumber).Title("Order Number");
            columns.Bound(x => x.ordernumber).Template(@<text></text>).ClientTemplate("<input id='chkId' name'chkbox' type='checkbox' class='checkbox' onClick='' />").Title("Enos")
                                                                .Filterable(false).Sortable(false);


            })

                  .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                  .Scrollable()
                  .Filterable()
                  .Sortable()
                  .Resizable(resize => resize.Columns(true))
                  .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .ServerOperation(false) //No post back
                  .Read(read => read.Action("Action", "Controller"))))
        </div>

Controller

function goToControllerDownloadAll() {

    var JsonObj = null;
    JsonObj = "["
    debugger
    var dataSource = $("#Grid").data("kendoGrid").dataSource;
    var filters = dataSource.filter();
    var allData = dataSource.data();
    var query = new kendo.data.Query(allData);
    var filteredData = query.filter(filters).data;

    $.each(filteredData, function (item) {
        JsonObj = JsonObj + "{ ordernumber: " + item.ordernumber + " },";
    });

    if (JsonObj.charAt(JsonObj.length - 1) == ',') {
        JsonObj = JsonObj.substr(0, JsonObj.length - 1);
    }
    JsonObj = JsonObj + "]"
    JsonObj = JSON.stringify(JsonObj);
    JsonObj = JSON.parse(JsonObj);

    JsonObj = JSON.stringify({ 'JsonObj': JsonObj });
    $.ajax({

        url: '@Url.Action("Action", "Controller")',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: JsonObj,
        traditional: true,
        async: false,
        cache: false,
        complete: function (data) {
        },
        error: function () {
        }
    })
}

Javascript for selection

$("#Grid").data("kendoGrid");

//Select All
var grid = $("#Grid").data("kendoGrid");
grid.thead.find("th:last")
.append($('<input  class="checkbox" type="checkbox"/>'))
.delegate(".checkbox", "click", function () {
    var checkbox = $(this);
    grid.table.find("tr")
        .find("td:last input")
        .prop("checked", checkbox.is(":checked"))
        .trigger("change");
});


var checkedIds = {};
$('#Grid').on("click", ".checkbox", selectRow);
$("#showSelection").bind("click", function () {
    var checked = [];
    for (var i in checkedIds) {
        debugger
        if (checkedIds[i]) {
            checked.push(i);
        }
    }
});

function selectRow() {
    var checked = this.checked,
    row = $(this).closest("tr"),
    grid = $("#Grid").data("kendoGrid"),
    dataItem = grid.dataItem(row);


    alert(dataItem.ordernumber);

    checkedIds[dataItem.ordernumber] = checked;
    if (checked) {
        row.addClass("k-state-selected");
    } else {
        row.removeClass("k-state-selected");
    }
}




Aucun commentaire:

Enregistrer un commentaire