Using Knockout Bindings with ejGrid

[Roger Miller]

Greetings,

I'm struggling to get the bindings to work with your ejGrid.  I've looked at your examples, but it is not clear to me why the standard KO bindings don't work.

I have the following view model I want to work with.

function viewModel() {
        var $root = this;  //viewModal root
        var baseItem;
        $root.items = ko.observableArray([]);
        $root.editableItem = ko.observable();
 
        $root.showEdit = function (source) {
            $root.editableItem(new Item(ko.toJS(source)));
            $("#frmEdit").modal();
        }
 
        $root.showNew = function () {
            $root.editableItem(new Item());
            $("#frmEdit").modal();
        }
 
        $root.cancelEdit = function () {
            $("#frmEdit").modal("hide");
        }
 
        $root.saveEdit = function () {
            sendAjax("/api/item/", $root.editableItem().ItemID == 0 ? "POST" : "PUT", function (errors) {
                if (errors.length > 0) {
                    alert(errors);
                }
                else {
                    $root.cancelEdit();
                    $root.loadItems();
                }
            }, ko.toJSON($root.editableItem()));
        } // end saveEdit
 
        $root.deleteItem = function (model, event) {
            var prompt = "You are about to make '" + model.ItemName() + "' ";
            prompt += model.Enabled() == true ? "NO LONGER AVAILABLE" : "AVAILABLE"
            prompt += " for purchase.  Press Ok to continue, or Cancel to abort.";
            if (confirm(prompt)) {
                sendAjax("/api/item/" + model.ItemID(), "DELETE", function (rowsAffected) {
                    if (rowsAffected == 0) {
                        alert("DELETE Failed!");
                    }
                    else {
                        model.Enabled(!model.Enabled());
                    }
                });
            }
        } // end deleteItem
 
        $root.loadItems = function () {
            sendAjax("/api/item", "GET", function (response, error) {
                if (error == undefined)
                    $root.items($.map(response, function (source) { return new Item(source) }));
                else
                    alert(response);
            });
        }
 
        $root.loadItems();
 
    } //end viewModel

I initialize the viewModel as follows:

$(document).ready(function () {
 
    ko.applyBindings(new viewModel());
 
});

The following table body works perfectly with the bindings to the viewModel.item data resource.

<tbody data-bind="foreach: items">
    <tr data-bind="style: {color: Enabled() == false ? 'red' : 'black'}">
        <td data-bind="text: ItemID"></td>
        <td data-bind="text: ItemName"></td>
        <td data-bind="text: ItemDescription"></td>
        <td data-bind="text: Gender"></td>
        <td data-bind="text: Category().CategoryName"></td>
        <td>
            <button data-bind="click: $root.showEdit, enable: Enabled">PUT</button>
            <button data-bind="click: $root.deleteItem">DEL</button>
        </td>
    </tr>
</tbody>

Could you please explain to me why this simple binding does not work with your ejGrid?  What would have to be done to get the same display as the KO version above using the viewModel.items context, and button click events?  

<div id="Grid1" data-bind="ejGrid: { dataSource: items }"></div>

[Alan Sangeeth S]

Hi Roger,

Thanks for using Syncfusion Products.

We have created a sample based on your requirement and the same can be downloaded from below link.

Sample:

In the above sample we have used “DataManager” with a custom adaptor to get records from Web Api. Please refer the following code snippets.

<div id="Grid" data-bind="ejGrid: {allowPaging:true, allowEditing:true, allowDeleting:true, columns: colmn, dataSource: data}"></div>

 

data: ej.DataManager({ url: "api/values", adaptor: new adaptor }),

var adaptor = new ej.ODataAdaptor().extend({

    ...

    processResponse: function (data, ds, query, xhr, request, changes) {

        if (request.type != "POST")

            return { result: data.Items, count: data.Count }

    }

});

 

Then using Unbound Column of Grid we have added the buttons Edit, Delete and Add to the Grid Column. In button click event we have displayed the bootstrap modal window for Editing. Please refer the following code snippets.

<div id="Grid" data-bind="ejGrid: {allowPaging:true, allowEditing:true, allowDeleting:true, columns: colmn, dataSource: data}"></div>

 

colmn: [{ "field": "OrderID", "headerText": "Order ID", "textAlign": "right", "width": 90 },"commands": [

                                       {

                                           "type": "Edit",

                                           "buttonOptions": {

                                               "text": "Edit",

                                               "click": function () {

                                                   var obj =$("#Grid").ejGrid("instance")

                                                   var rec = obj.model.currentViewData[this.element.closest("tr").index()];

                                                   var obj2 = new employeeView.modal();

                                                   obj2.showEdit(rec)

                                               }

                                           }

                                       },

                                  "isUnbound": true,

                                   "textAlign": ej.TextAlign.Center,

                                   "width": 150

                                        ....

                               }

 

this.showEdit = function (editableItem) {

                $("#myForm").find("input[name='OrderID']").attr("disabled", "disabled");

                employeeView.ID(editableItem.OrderID);

                employeeView.city(editableItem.ShipCity); employeeView.customer(editableItem.CustomerID);

                $("#myModal").modal();

 

            },

 

Inside the modal window, on save button click event we have triggered the “saveEdit” method to send ajax request to controller.

We have given the above sample as workaround based on the code snippets that you have shared and we would like to let you know that we have Dialog Template Mode Editing Feature in Grid. Please refer the following online sample:

http://js.syncfusion.com/demos/web/#!/azure/grid/Editing/Dialogonlocaldata

If you need the sample based on the above link, please get back to us and we will you provide you the sample with Dialog Template Mode Editing in Grid.

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Andrey Kukharenko]

Good question and problem.

Grid control look col but don't working.

I do not find a real solution to the problem that would load the data into the table and display them from the observed field.

Thanks.

[Alan Sangeeth S]

Hi Andrey,

We are sorry for the inconvenience caused.

Due to some network issues sample link is not posted. We have now modified the sample with latest version 12.4.0.24 and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/directtrac/117200/EJGrid-1876116479.zip

In the above sample we have use “WebApiAdaptor” of Grid DataManager to support WebApi service. Please refer the following code snippets.

<div id="Grid" data-bind="ejGrid: {dataSource: data,allowPaging:true} div>

window.employeeView = {

            test: ko.observable(false),

            data: ej.DataManager({ url: "/api/Orders", adaptor: "WebApiAdaptor" }),

...

}

public class OrdersController : ApiController

    {

        private NORTHWNDEntities db = new NORTHWNDEntities();

        // GET: api/Orders

        public PageResult<Order> Get(ODataQueryOptions opts)

        {

            var results = opts.ApplyTo(db.Orders.AsQueryable());

            var data = db.Orders.AsQueryable();

            return new PageResult<Order>((IEnumerable<Order>)results, Request.GetNextPageLink(), data.Count());

        }

...

}

Also we would like to let you know that while using paging feature in Grid we need to return data with its count and so we have used PageResult to return data.

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S