Razor - editable grid - what approach?

I am very much wondering and don't know yet what to decide to use. So I want to have grid and to edit its row's data.

I am working with MVC3 Razor, i know for these posibilities: - jqGrid Razor - knockout grid Razor - i don't know how to make it editable grid? Is it possible at a开发者_Python百科ll, or is this just for displaying data. - web grid , Razor

I don't like to use Telerik controls! Would you pls advice me what is the best approach to make editable grid and what if i don't need editable grid? Why to use one or other of the ways? And all that in Razor page.

ShieldUI's grid also supports a lot of editing modes, scenarios and sending the updates locally or to any remote endpoint.

A good example to start can be found here:

http://demos.shieldui.com/mvc/grid-editing/editing-restful-web-service

jqGrid definitely does support editing, you can see some examples at http://www.trirand.com/blog/jqgrid/jqgrid.html or read the documentation at http://www.trirand.com/jqgridwiki/doku.php?id=start

Use The Following Code For Editing and Same as Add, Delete.

For View,

@(Html.Telerik().Grid<CustomerOrderDetails>()
                       .Name("gvCustomerOrderDetails")
                       .DataKeys(keys => keys.Add(k => k.ItemID))
                       .Columns(column =>
                       {
                           column.Bound(i => i.ItemID).Hidden(true);
                           column.Bound(i => i.SalesSequenceNumber).Hidden(true);
                           column.Bound(i => i.ItemSequence).Hidden(true);
                           column.Bound(i => i.ItemName).Title("Item Name").ReadOnly();
                           column.Bound(i => i.Quantity).Title("Order Quantity").HtmlAttributes(new { @class = "gridTextAlignRight" });
                           column.Bound(i => i.ItemUnitPrice).HtmlAttributes(new { @class = "gridTextAlignRight" }).ReadOnly();
                           column.Bound(i => i.ItemUnitPrice).Hidden(true);
                           column.Bound(i => i.TotalPrice).HtmlAttributes(new { @class = "gridTextAlignRight" }).ReadOnly();
                           column.Command(command =>
                           {
                               command.Edit().ButtonType(GridButtonType.Image);
                           }).Width(80).Title("Commands");
                       })
                       .Selectable()
                       .DataBinding(dbBindings =>
                           {
                               dbBindings.Ajax().Select("__CustomerOrderDetailsGridBind", "CustomerInfo")
                                                .Update("__CustomerOrderDetailsUpdate", "CustomerInfo");
                           })
                       .ClientEvents(events =>
                        events.OnDataBinding("onDataBinding")
                              .OnError("onError")
                       )
                       .Scrollable(scroll => scroll.Height(300))

                 )

For Control Use the following Code,

    [AcceptVerbs(HttpVerbs.Post)]
    [GridAction]
    public ActionResult __CustomerOrderDetailsUpdate(CustomerOrderDetails objCustomerOrderDetails)
    {
        SalesItem objSalesItem = new SalesItem();
        objSalesItem.SalesSequenceNumber = objCustomerOrderDetails.SalesSequenceNumber;
        objSalesItem.ItemSequence = Convert.ToByte(objCustomerOrderDetails.ItemSequence);
        objSalesItem.ItemID = objCustomerOrderDetails.ItemID;
        objSalesItem.Quantity = objCustomerOrderDetails.Quantity;
        objSalesItem.ItemUnitPrice = objCustomerOrderDetails.ItemUnitPrice;
        objSalesItem.TotalPrice = objCustomerOrderDetails.ItemUnitPrice * objCustomerOrderDetails.Quantity;
        objSalesItem.SalesDate = DateTime.Now;
        objSalesItem.EntryBy = objLoginHelper.LogInID;
        objSalesItem.EntryDate = DateTime.Now;

        customerDal.UpdateSalesItem(objSalesItem);

        return View(new GridModel<CustomerOrderDetails>
        {
            Data = customerDal.CustomerOrderDetailsInfo(objCustomerOrderDetails.SalesSequenceNumber, Helper.Active)
        });
    }

you can also use your Model specific Class for Add, Edit & Delete. Here ReadOnly() is used for unedited column. If you need the column value in control then use same column without ReadOnly() and just Hidden.

I think all are enjoy using this code.