This is a migrated thread and some comments may be shown as answers.

Numeric Textbox in Grid

1 Answer 995 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 25 Jan 2013, 03:52 PM
I've got a grid that I'm creating using the MVC wrapper.  I have fields defined as numeric but when I edit the fields they show a large textbox (not sure why they are so large) and never a numeric box.  I have found that when I add a client template that is a numeric text box the box shows up but doesn't appear with proper styling.  When I edit and cancel the box suddenly shows proper formatting.  I've looked at the HTML document and it seems that the wrapper objects are not being added.  I'm not sure what I'm doing wrong.  

Here is my MVC view code:
@(Html.Kendo().Grid<eLuminate.Radar.Web.Provider.Model.Procedures.Price>().Name("prices").Columns(columns =>
    {
        columns.Bound(c => c.Name).Width(250);
        columns.Bound(c => c.RelatedProviderName).Title(Model.IsFacility ? "Professional" : "Facility").Width(150);
        columns.Bound(c => c.High).Format("{0:C0}").Groupable(false).Filterable(false).Width(75).Hidden();
        columns.Bound(c => c.Low).Format("{0:C0}").Groupable(false).Filterable(false).Width(75).Hidden();
        columns.Bound(c => c.Average).Format("{0:C0}").Groupable(false).Filterable(false).Width(75);
        columns.Bound(c => c.MyPrice).Format("{0:C0}").Filterable(false).Width(125)
            .ClientTemplate(Html.Kendo().NumericTextBox().Name("mp_#=ID#").Min(0).HtmlAttributes(new { value = "#=MyPrice#", style = "width: 100px;" }).ToClientTemplate().ToHtmlString());
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Resizable(r => r.Columns(true))
    .Filterable()
    .ColumnMenu()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(false)
        .Events(events => events.Error("error_handler"))
        .Model(m =>
        {
            m.Id(p => p.ID);
            m.Field(p => p.Name).Editable(false);
            m.Field(p => p.RelatedProviderName).Editable(false);
            m.Field(p => p.High).Editable(false);
            m.Field(p => p.Low).Editable(false);
            m.Field(p => p.Average).Editable(false);
        })
        .Update(update => update.Action("UpdatePrice", "Procedures", new { id = Model.ID }))
        .Read(read => read.Action("ReadPrice", "Procedures", new { id = Model.ID }))
        .Destroy(destroy => destroy.Action("DeletePrice", "Procedures", new { id = Model.ID }))
        .Create(create => create.Action("AddPrice", "Procedures", new { id = Model.ID }))
    )
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Selectable()
    .ClientDetailTemplateId("analytics")
    .Groupable()
    .HtmlAttributes(new { style = "width: 800px;" }))

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 29 Jan 2013, 10:47 AM
Hello Jason,

Did you define an editor template for the property? If not, please check this documentation topic for information on how to specify the editor when using Kendo MVC. 
As for the numerictextbox in the template - by default the Grid uses innerHTML to set the table content and the scripts will not be executed. You could use the dataBound event to append the scripts to the body so that the widgets are initialized e.g.

function dataBound(e) {
    this.table.find("script").appendTo(document.body);
}
Kind 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!
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or