Variable decimal places based on another field

2 posts, 0 answers
  1. AP
    AP avatar
    261 posts
    Member since:
    Apr 2010

    Posted 13 Dec 2016 Link to this post

    I've inherited an application with a detail template which allows in-line editing of financial and other numerical data.

    Currently the grid is set up to use an editor template that shows a numeric textbox which allows 2 decimal places. The users have requested that only records of a certain type (where the finance type name contains WTE) should allow 2 decimal places, every other line should only allow whole numbers.

    Is this possible whilst still showing all the rows in the same grid?

    The detail template is:-

    <script id="detailsTemplate" type="text/kendo-tmpl">
     
            <div style="font-size:x-small;">
     
     
                @(Html.Kendo().Grid<CIPAndRecovery.Models.vFinancialDetail>()
                            .Name("Data_#=Id#")
                            .HtmlAttributes(new { style = "font-weight:normal" })
                            //.TableHtmlAttributes(new { style = "padding:0px;margin:0px;", @class="TemplateGrid" })
                            .Events(e => e.DataBound("GetGroupName"))
                            .Events(e => e.DataBound("onFinDetailColour_Databound"))
                            .Events(e=>e.DataBound("onFinDetail_Databound"))
                            .Columns(c =>
                            {
                                c.Bound(o => o.Id).Title("Id").Hidden(true);
                                c.Bound(o => o.AccountDetail_Id).Title("AccountDetail Id").Hidden(true);
                                c.Bound(o => o.FinanceGroup).Title("FinanceGroup").Hidden(true);
                                c.Bound(o => o.FinanceGroupNo).Title("Finance Group No")
                                    .ClientGroupHeaderTemplate("\\#=GetGroupName( value )\\# ").Hidden(true);
                                c.Bound(o => o.FinanceType).Title("Type").Width(60);
                                c.Bound(o => o.M1).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M1)\\#");
                                c.Bound(o => o.M2).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M2)\\#");
                                c.Bound(o => o.M3).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M3)\\#");
                                c.Bound(o => o.M4).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M4)\\#");
                                c.Bound(o => o.M5).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M5)\\#");
                                c.Bound(o => o.M6).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M6)\\#");
                                c.Bound(o => o.M7).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M7)\\#");
                                c.Bound(o => o.M8).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M8)\\#");
                                c.Bound(o => o.M9).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M9)\\#");
                                c.Bound(o => o.M10).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M10)\\#");
                                c.Bound(o => o.M11).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M11)\\#");
                                c.Bound(o => o.M12).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(M12)\\#");
                                c.Bound(o => o.Total).Title("Total").ClientTemplate("\\#=onFinDetailColour_Databound(Total)\\#");
                                c.Bound(o => o.FYE).EditorTemplateName("DecimalMinus").ClientTemplate("\\#=onFinDetailColour_Databound(FYE)\\#");
                                //c.ForeignKey(o => o.RoleId, (System.Collections.IEnumerable)ViewData["roles"], "Id", "RoleName").Title("Role")
                                //    .EditorTemplateName("GridForeignKey");
                                c.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); }).Title("Edit").Width(90);
                                //c.Group(e => e.HeaderTemplate("<span> #=GetGroupName(FinanceGroupNo)# </span>"));
                            })
                            //.ToolBar(toolbar =>
                            //{
                            //    toolbar.Create();
                            //    //toolbar.Save().SaveText(" ").Text(" ").CancelText(" ");
                            //})
                            .Editable(editable => editable.Mode(GridEditMode.InLine))
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .Events(e => e.RequestEnd("onFinDetailChange"))
                            //.Batch(true)
                            .PageSize(16)
                            .Group(group =>  group.Add(p => p.FinanceGroupNo))
                            //.Sort(s=>s.Add(p=>p.SortOrder))
                            .Model(m =>
                            {
                                m.Id(p => p.Id);
                                m.Field(e => e.FinanceType).Editable(false);
                                m.Field(e => e.Total).Editable(false);
                                //m.Field(e => e.SpecificSystemsApprover).DefaultValue(new List<SystemsFormsMVC.Models.GenericLookup>());
                            })
                                .Read(read => read.Action("GetFinancials", "PlanActions", new { AccDetailId = "#= Id #" }))
                                .Create(create => create.Action("InsertFinancial", "PlanActions", new { AccDetailId = "#= Id #" }).Type(HttpVerbs.Post))
                                .Update(update => update.Action("UpdateFinancial", "PlanActions").Type(HttpVerbs.Post))
                                .Destroy(delete => delete.Action("DeleteFinancial", "PlanActions"))
     
                            )
                            //.Pageable()
                            //.Groupable()
                            .ToClientTemplate()
                )
            </div>
        </script>

    The editor template is:-

    @model decimal?
     
    @(Html.Kendo().NumericTextBoxFor(m => m)
          .HtmlAttributes(new { style = "width:100%" })
          .Spinners(false)
          .Decimals(2)
     
    )
     
     
    <script>
        $(function () {
            $("input[type=text]").bind("focus", function () {
                var input = $(this);
                clearTimeout(input.data("selectTimeId"));
                var selectTimeId = setTimeout(function () {
                    input.select();
                });
                input.data("selectTimeId", selectTimeId);
            }).blur(function (e) {
                clearTimeout($(this).data("selectTimeId"));
            });
        })
    </script>

    Thanks

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5906 posts

    Posted 15 Dec 2016 Link to this post

    Hello,

    You can use the edit event of the grid to determine the data that comes in and reference the numeric textbox and use the setOptions() method to alter its decimal places on the client.

    Reference materials:

    Here is a basic example:

    <script>
        function changeTextbox(evt) {
            var desiredDigits = 0;
            if (evt.model.Type.indexOf("WTE") > -1) { //Type is the model field you need to check
                desiredDigits = 2;
            }
            var numeric = evt.container.find("input[name=Id]").data("kendoNumericTextBox");//tweak the selector to match your editor template, e.g., add a CSS class
            numeric.setOptions({ decimals: desiredDigits });
        }
    </script>

    @(Html.Kendo().Grid<CIPAndRecovery.Models.vFinancialDetail>()
        .Events(ev => ev.Edit("changeTextbox"))
     

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top