Variable decimal places based on another field

[AP]

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

[Marin Bratanov]

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:

• grid edit event: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit.
• setOptions method: http://docs.telerik.com/kendo-ui/api/javascript/ui/widget#methods-setOptions.
• numeric textbox API: http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-decimals.

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