How was the Unit Price custom editor accomplished on the grid/editing-custom demo?

8 posts, 1 answers
  1. Kevin
    Kevin avatar
    12 posts
    Member since:
    Jan 2015

    Posted 13 Mar 2015 Link to this post

    I may be missing something obvious here, but how was the Unit Price NumericTextBox with a minimum of 1 accomplished on the demo at http://demos.telerik.com/aspnet-mvc/grid/editing-custom ?  I only see one mention of UnitPrice in the example code
    columns.Bound(p => p.UnitPrice).Width(120);
    but surely that's not all there was to it.  When I view the demo page's source I also see a kendo.data.DataSource being created with:
    UnitPrice: { type: "number", validation: { required: true, min: 1} }
    but it still seems like there would be something else going on in the @(Html.Kendo().Grid definition to make the editor use a NumericTextBox over just a plain textbox.

    Is there anything else going on, and if so, where can I find the details?  I'm not seeing any more information in the local demo project either, but I might just be looking in the wrong place.  Or is there a better demo example I can look at that shows how to do just the NumericTextBox in a grid?
  2.
  3. Kevin
    Kevin avatar
    12 posts
    Member since:
    Jan 2015

    Posted 16 Mar 2015 in reply to Kevin Link to this post

    ...and it's very possible that this is all there is to it.  The first Kendo grid that I'm working on happens to be on a view that can have N number of the grids, which I realize now is a whole nother problem, and would be a separate question if I end up asking about the specific problem I'm having with it.  So if the demo code really is all there is to getting the NumericTextBox to appear for Unit Price (I need to try it out on a simpler view..), then no reply is necessary.
  5. Kevin
    Kevin avatar
    12 posts
    Member since:
    Jan 2015

    Posted 16 Mar 2015 in reply to Kevin Link to this post

    Sorry, I should have done some more investigation before my two posts in this thread.  So I've now tested a simple grid with a view model that has two properties:

    public Guid? Id { get; set; }
    public decimal Quantity { get; set; }

    And the grid code is:

    @(Html.Kendo().Grid<EditQuoteYearProductViewModel>()
              .Name("Products")
              .BindTo(Model.TestProducts)
              .Editable(editable => editable.Mode(GridEditMode.InCell)
                                  .CreateAt(GridInsertRowPosition.Bottom))
              .ToolBar(toolBar => { toolBar.Create().Text("Add Product"); })
              .Columns(cols =>
              {
                  cols.Bound(c => c.Id)
                     .Hidden();
                  cols.Bound(c => c.Quantity);
              })
              .DataSource(ds => ds
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Model(m =>
                    {
                        m.Id(p => p.Id);
                        m.Field(p => p.Id).Editable(false);
                        m.Field(p => p.Quantity).Editable(true);
                    })
              )
    )

    But when I click in a Quantity cell, I just get a regular textbox.  What am I missing to get the Kendo grid to use a NumericTextBox as the editor instead, like in the demo?
  7. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 16 Mar 2015 in reply to Kevin Link to this post

    I have the same question.  I'm using Kendo MVC 2014.3.1516 and I have the "EditorTemplates" folder in Views\Shared, which has a number editor that uses: Html.Kendo().NumericTextBoxFor

    This is what I've found:
    when using a type of short on the model property, kendo generates an input textbox with no spinner, but when using a property type of int, it generates a HTML5 input type="number" (which has spinners if your browser supports HTML5 inputs).

    But in either case, I'm not getting the "original" kendo UI number-picker widget.  The only thing I can think is the demos is using an older MVC .dll...or maybe it's broken in the newer versions ??

    Telerik, please tell us how the grid determines what HTML to render, and how it determines whether or not to use the original kendo numeric-picker widget.
  8.
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Mar 2015 Link to this post

    Hello Kevin,

    EditorTemplates that the Grid uses are rendered thanks to the MVC EditorTemplates engine, the same is explained in details here:

    http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editor-templates

    If something is generated differently compared to a case when Html.EditorForField is used, please let us know by demonstrating it in a small demo.

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 17 Mar 2015 in reply to Petur Subev Link to this post

    That was a terrible response.  Did you read what we've asked you?  We would like to know how the Grid determines whether or not to render <input type="number"> or the kendo UI widget "numberpicker" when the MVC model property is of type int or type short.

    The previous poster and myself are not able to determine how the MVC demo is able to render a kendo UI number-picker widget, because it is not happening with version 2014.3.1516.  There's nothing wrong with rendering HTML5 input type number, I just want to know how the kendo MVC .dll chooses what to render.
  13. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Mar 2015 Link to this post

    Hello Curt,

    As I tried to explain the Grid uses Html.EditorFor( x=>x.theField) under the hood to get the corresponding template. So the question is more about how the MVC framework template engine finds which EditorTemplate to render. The only case in which you can override this MVC logic is to specify the name through the EditorTemplate function of the column configurator.

    columns.Bound(c => c.PropOfTypeShort).EditorTemplateName("Integer")

    For Short type it does not render Kendo NumericTextBox because under the Shared/EditorTemplates folder there is no predefined view for the Short type.

    Let me know if I misunderstood something.

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14.
  15. Kevin
    Kevin avatar
    12 posts
    Member since:
    Jan 2015

    Posted 19 Mar 2015 in reply to Petur Subev Link to this post

    Thank you, Petur, your replies addressed my questions.  Since my application has several different number requirements I plan to create specific EditorTemplates for each number type, such as DecimalFourPlacesMinZero, and add those to the columns with .EditorTemplateName("DecimalFourPlacesMinZero") as suggested.
Back to Top