Kendo Grid UI Html helper grid editing

6 posts, 0 answers
  1. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 22 Jan 2013 Link to this post

    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);
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 25 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 31 Jan 2013 Link to this post

    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)))
               
            )
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Eddie
    Eddie avatar
    2 posts
    Member since:
    Sep 2013

    Posted 10 Sep 2013 Link to this post

    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"))
    )

    )
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 12 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready