setting NumericTextBox value in client template

4 posts, 0 answers
  1. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 29 Aug 2012 Link to this post

    How do you set the value of a numerictextbox client template. I've tried the following:
    .Value("\\#=pollorder#")
    .Value("\#=pollorder#")
    .Value("#=pollorder#")
    .Value(Convert.ToInt32("\#=pollorder#"))
    All produce errors.

    .Columns(columns => {
    columns.Bound(s => s.ID).Visible(false);
    columns.Bound(s => s.Order)
    .ClientTemplate((Html.Kendo().NumericTextBox<int>()
    .Name("order_#=ID#")
    .Value("#=order#")
    .Format("{0:n0}")
    .Min(0)
    .Max(100)
    .Step(1)
    .Decimals(0)
    .Events(ev => ev.Change("numericBoxChanged"))
    .ToClientTemplate()).ToHtmlString());
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 Aug 2012 Link to this post

    Hello Devon,

    Currently the NumericTextBox Value method only accepts int which means that the compiler will not allow you to put the client expression in it (because it is string).
    To set the value you could use the following approach:
    columns.Bound(o => o.OrderID).ClientTemplate(Html.Kendo().NumericTextBox<int>()
                        .Name("order_#=OrderID#")
                //.Value("#=order#")
                        .HtmlAttributes(new { value = "#=OrderID #" })
                        .Format("{0:n0}")
                        .Min(0)
                        .Max(100000)
                        .Step(1)
                        .Decimals(0)
                        .Events(ev => ev.Change("numericBoxChanged"))
                        .ToClientTemplate().ToHtmlString());


    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Evan
    Evan avatar
    3 posts
    Member since:
    Oct 2012

    Posted 16 May 2013 Link to this post

    I tried this exact example and it did not make the control a Numeric. It leaves it a textbox because the ready function that renders it as a Numeric does not fire on the grid databind.

    If you want to see this behavior, just get the most recent Kendo MVC example project, go to razor/Views/Web/grid/ajaxbinding.cshtml and replace the OrderID column with your example.

    Thanks
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 May 2013 Link to this post

    Hello Devon,

    Basically you have to fix two potential issues:
    1. Remove or declare the Change event of the NumericTextBox
    2. Execute the initialization script manually when the dataBound event of the Grid occurs

    For example the following demo for remote binding is working as expected in my project:

    @model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
     
    @(Html.Kendo().Grid(Model)   
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.ProductID).Visible(true).ClientTemplate(Html.Kendo().NumericTextBox<int>()
                        .Name("order_#=ProductID#")
                 
                        .HtmlAttributes(new { value = "#=ProductID #" })
                        .Format("{0:n0}")
                        .Min(0)
                        .Max(100000)
                        .Step(1)
                        .Decimals(0)
                        .ToClientTemplate().ToHtmlString());
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice);
            columns.Bound(p => p.UnitsInStock);
        })
        .Groupable()
        .Events(ev=>ev.DataBound("db"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Products_Read", "Grid"))
        )
    )
     
    <script type="text/javascript">
        function db() {
            this.tbody.find('script').each(function () {
                eval($(this).text());
            })
        }
    </script>


    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top