Kendo Grid UI Html helper grid editing

[towpse]

I've got a strongly typed razor view tied to an IEnumerable of an Object.

I'd like to add the ability to edit, in line, some, one or more, of the cells.

@using Kendo.Mvc.UI

 

@model IEnumerable<MyObject>

 

        <legend>Objects</legend>

        @(Html.Kendo().Grid(Model)

            .Name("object-grid")

            .Columns(columns =>

            {

                columns.Bound(m => m.Description).Title("Product");

                columns.Bound(m => m.Id);

                columns.Bound(m => m.Quantity)

 

                    .HtmlAttributes(new { @class = "quantity" }); 

            })

            .Scrollable()

            .Selectable()

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

            .DataSource(dataSource => dataSource

                            .Server()

                            .Model(model => model.Id(m => m.Id)))

        )

How do I add an editor for my quantity field in this example?
Am I incorrectly setting up my view with an IEnumerable of my object?

In this example, the grid seems to be bound to an order object, not an IEnumerable of order,
and the developer can then simply use Html.EditorFor.

        @Html.EditorFor(o => o.Quantity);

[Vladimir Iliev]

Hi Matt,

 
You can specify custom editor template for given field in your model using UIHint data annotation attribute over the model property - please check the example below:

[Required]
//UnitsEditor is the name of the custom editor template
[UIHint("UnitsEditor")]
public int UnitsInStock
{
    get;
    set;
}

Then you should create partial view under the Views -> Shared -> EditorTemplates folder with "UnitsEditor" name and place your custom editor inside it. Please check the example below:

@model int

@(Html.Kendo().NumericTextBoxFor(m=>m)
    .Min(0))

Also about the other question - the example that you pointed contains Ajax bound grid with no initial data provided - in this case another Grid overload is used to set the IEnumerable type.


Kind Regards,
Vladimir Iliev
the Telerik team

[towpse]

ok, so i've tried to add as you suggested, but i'm still missing a piece to the puzzle.
how do i put a grid row into edit mode? not sure if i'm going about this correctly....

i have the grid set to be editable as inline, i have the required attribute on the quantity property of the bound model using a UI hint to a QuantityEditor which I have placed into the EditorTemplates folder under Views -> Shared

do i need to add an edit command somewhere?

        [Required]
        //UnitsEditor is the name of the custom editor template
        [UIHint("QuantityEditor")]
        public int Quantity { get; set; }

        @(Html.Kendo().Grid(Model)
            .Name("object-grid")
            
            .Columns(columns =>
            {
                columns.Bound(m => m.Id)
                    .Hidden(true)
                    .HtmlAttributes(new { @class = "id" });
                columns.Bound(m => m.Description).HtmlAttributes(new { @class = "description" }); 
                columns.Bound(m => m.esn).HtmlAttributes(new { @class = "esn" });
                columns.Bound(m => m.Date).Format("{0:yyyy-MM-dd}").HtmlAttributes(new { @class = "date" });
                columns.Bound(m => m.Quantity).HtmlAttributes(new { @class = "quantity" }).FooterTemplate("Total:");
            })
            .Scrollable(s => s.Height("auto"))
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .DataSource(dataSource => dataSource
                            .Server()
                            .Aggregates(aggregates => { aggregates.Add(p => p.Quantity).Sum(); } ) 
                            .Model(model => model.Id(m => m.Id)))
           
        )

[Daniel]

Hello,

Yes, you should add an edit command in order to be able to out the row in edit mode. For example:

columns.Command(command => { command.Edit(); });

Regards,
Daniel
the Telerik team

[Eddie]

I'm having a similar problem.  I've got a grid that I can edit in, but it never fires the update events.  So, my changes never make the database.
In the view:

@(Html.Kendo().Grid(Model)
.Name("StandardRequestGrid")
.Columns(columns =>
{
columns.Bound(p => p.IntervalDateShort).Width(85).Format("{0:MM/dd/yyyy}"); ;
columns.Bound(p => p.MST).Width(60);
columns.Bound(p => p.PST).Width(60);
columns.Bound(p => p.TotalAvailable).Width(60);
columns.Bound(p => p.Percentage).Width(60);
columns.Bound(p => p.OwnerAvailable ).Width(85);
columns.Bound(p => p.GenMegawattRequested).Width(60);
columns.Bound(p => p.SpinMegawattRequested).Width(60);
columns.Bound(p => p.TotalRequested).Width(60);
columns.Bound(p => p.StatusCode).Width(100); 
columns.Bound(p => p.CommentShort).Width(200);
 (IntervalStartDateTime==null ? '':IntervalStartDateTime) #");  
})
 .Editable(editable => editable.Mode(GridEditMode.InCell))
.Scrollable()
 .Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Events(events => events.Change("onChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.MST).Editable(false);
model.Field(p => p.PST).Editable(false);
model.Field(p => p.TotalAvailable).Editable(false);
model.Field(p => p.Percentage).Editable(false);
model.Field(p => p.OwnerAvailable).Editable(false);
model.Field(p => p.GenMegawattRequested).Editable(true).DefaultValue(0);
model.Field(p => p.SpinMegawattRequested).Editable(true).DefaultValue(0);
model.Field(p => p.StatusCode).Editable(true);
model.Field(p => p.Comment).Editable(false);
 })
.Read(read => read.Action("GetStandardRequest", "OwnerStandardRequest").Data("getStandardRequestParams"))
.Update(update => update.Action("EditStandard", "OwnerStandardRequest"))
)

)

[Daniel]

Hello Eddie,

When using InCell editing mode, you should add a Save button to the toolbar that will synchronize the changes with the server:

.ToolBar(toolbar =>
      {
          toolbar.Save();
      })

Regards,
Daniel
Telerik