Annotating editable, causing grid to fail

[Paul]

What I am trying to do.. is create this grid of CartLines, display them, and allow editing of ONLY the quantity field.
This grid below displays, and is editable (presumably, I haven't implemented the update action but the UI appears to work).

The moment I added .Editable(false) to any of the model.Fields, I get an error that the object is not referring an object ..

  >> Object reference not set to an instance of an object.

and that happens before it even tries to call the read action.  And I am quite surprised about the behavior on the first column, the picture column.  That field is editable also which surprised me. I mean.. I guess i didn't tell it not to.. But it is clearly associating it with the modeId and I would think the modelid is sacred and shouldn't be changed.

Anyway... what's the best way to accomplish this?
  Quantity should be editable
  Nothing else should be editable.
  (though I may add a delete the entire row option)

@(Html.Kendo().Grid<EveShop.Domain.Entities.CartLine>()

   .Name("cartGrid")

   .DataSource(

    dataSource => dataSource

      .Ajax()

      .Read(read => read.Action("GetCartList", "Cart").Data("additionalCartListData"))

      .Model(model =>

      {
        model.Id(p => p.Product.ProductID);


        model.Field(p => p.Product.Name);

        model.Field(p => p.Quantity);

        model.Field(p => p.Product.Price)/*.Editable(false)*/;

      })

    )

    .Columns(columns =>

    {

        // this first column is really just a picture column, may be a better way to do this
        // than binding it to Product.ProductID?  to an empty field?  didn't see how to do that.
      columns.Bound(line => line.Product.ProductID).ClientTemplate("<img src='" + Url.Content("~/Images/Types/") + "#:Product.ProductID#_64.png' alt='#: Product.ProductID #' />").Title("Picture");

      columns.Bound(line => line.Product.Name);

      columns.Bound(line => line.Quantity);

      columns.Bound(line => line.Product.Price);

    })

    .Editable(editable => editable.Mode(GridEditMode.InCell))             

)

[Paul]

So I worked through this again today and this time I wrote a new ViewModel, one that does not try to re-use the existing Product model. So all its fields of the new ViewModel are entirely flat and not sub-fields of other models.  It works.. I don't understand why it should work and the original doesn't... but it works.

To finish this up, I still needed to make the picture column non-editable.
I got all hung-up on this problem previously thinking that somehow I needed to manipulate the model.Id(...) line to indicate it was not editable. but .editable() is not valid for .Id().
Just a bit ago, it occured to me that I might be able to have both a .Id(... productID) and a .Field(.. productID). Aha!  that works.
I hope this is the generally accepted method..

.Model( model =>
{
  model.Id(p => p.productID);
  model.Field(p => p.productID).Editable(false);
})

.Columns(columns =>
{
  // this first column is really just a picture column, may be a better way to do this
  // than binding it to Product.ProductID?  to an empty field?  didn't see how to do that.
  columns.Bound(line => line.productID).ClientTemplate("<img src='" + Url.Content("~/Images/Types/") + "#:productID#_64.png' alt='#: productID #' />").Title("Picture");

And another inquiry related to this same grid.
Notice it has a cost field (or total cost field).
It annoys me that I have to make a property in my model to hold this data in order to put it into the grid.
Since it really is just a multiplication of price*quantity.. it seems like I should be able to create a column for this fictitious field that is not actually in my model.. does that make sense?  It just doesn't make sense to me that I should have to pass that data round between controller and view.

So let me just summarize that question.. can you add a column to your grid that is extraneous to any specific field in the model?
And I need to control its editability... i.e. I need to make sure it is not editable.

[Alexander Popov]

Hi Paul,

Yes, setting the model like that does exactly what you are aiming for. Alternatively, you could use template columns instead of bound columns where not editing is expected. For example: 

columns.Template(line => {}).ClientTemplate("<img src='" + Url.Content("~/Images/Types/") + "#:productID#_64.png' alt='#: productID #' />").Title("Picture");

The same approach could be used to display a calculated, non-editable column: 

columns.Template(p => {}).ClientTemplate(":=UnitPrice * UnitsInStock#");

Regarding the error you previously got - I am not exactly when and where it occurs, however you might consider adding default values to the nested objects. For example: 

.Model(model => {
    model.Id(p => p.ProductID);
    model.Field(p => p.Category).DefaultValue(new Kendo.Mvc.Examples.Models.CategoryViewModel() { CategoryID=0, CategoryName="" });

Regards,
Alexander Popov
Telerik