Conditional Formatting of Kendo Grid Column in MVC based on secondary column

Question

I have a kendo grid I'm working with in MVC. We have a BenefitMethod column and a Rate column. I want to format the Rate column depending on the value inside the BenefitMethod Column. I'd like to add decimals and a dollar sign or decimals and a percent sign depending on value.

This is my MVC Grid Code

@(Html.Kendo().Grid<xxx.Models.OBEEBenefits>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.BenefitCode).Title(FieldTranslation.GetLabel("BenefitCode", GlobalVariables.LanguageID)).HeaderHtmlAttributes(new { title = FieldTranslation.GetLabel("BenefitCode", GlobalVariables.LanguageID) });
            columns.Bound(p => p.Description).Title(FieldTranslation.GetLabel("Description", GlobalVariables.LanguageID)).HeaderHtmlAttributes(new { title = FieldTranslation.GetLabel("Description", GlobalVariables.LanguageID) });
            columns.Bound(p => p.BenefitMethod).Title(FieldTranslation.GetLabel("BenefitMethod", GlobalVariables.LanguageID)).HeaderHtmlAttributes(new { title = FieldTranslation.GetLabel("BenefitMethod", GlobalVariables.LanguageID) });
            columns.Bound(p => p.Rate).Title(FieldTranslation.GetLabel("Rate", GlobalVariables.LanguageID)).HeaderHtmlAttributes(new { title = FieldTranslation.GetLabel("Rate", GlobalVariables.LanguageID) });
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}").Title(FieldTranslation.GetLabel("StartDate", GlobalVariables.LanguageID)).HeaderHtmlAttributes(new { title = FieldTranslation.GetLabel("StartDate", GlobalVariables.LanguageID) });
            columns.Template(@<text>

            </text>)
                  .ClientTemplate(
                      "<center><div class='tw-button'>" +
                      "<a href='" + Url.Action("ProcessForm", "OBProcess", new { id = "#= RecordID#", tid = @ViewBag.TaskID, a = "Dynamic" }) + "' title='Edit' class=''><i class='icon-edit fa fa-pencil fa-fw fa-lg'></i></a>" +
                      "<a href='\\#' title='Delete' class='' data-desc='#= BenefitCode#' id='delete' data-id='#= RecordID#'><i class='icon-red fa fa-times fa-fw fa-lg'></i></a>" +
                      "</center>").Width(85);
        })
            .ToolBar(toolbar =>
                    {
                        //toolbar.Create();
                        toolbar.Save();
                    })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Sortable()
            .Filterable()
            .Groupable()
        //.Navigatable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(15)
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    //The unique identifier (primary key) of the model is the ProductID property
                    model.Id(p => p.RecordID);
                    // Declare a model field and optionally specify its default value (used when a new model instance is created)
                    model.Field(p => p.BenefitCode).Editable(false);
                    model.Field(p => p.Description).Editable(false);
                    model.Field(p => p.PayPeriod).Editable(false);
                    model.Field(p => p.BenefitMethod).Editable(false);
                    model.Field(p => p.StartDate).Editable(true);
                })
                .Create(update => update.Action("EditingInline_Create", "Grid"))
                .Read(read => read.Action("BenefitIndex_Read", "OBProcess"))
                .Update(update => update.Action("BenefitIndex_Update", "OBProcess"))
                .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
            )
        )

I've tried using a Template and a ClientTemplate to no avail as far as doing the conditionals.

The values of the BenefitMethod column can be

• Fixed Amount
• Percent of Net Wages

I basically want to do if benefit method is fixed amount show the dollar sign and decimals else show the percent sign and decimals

Answer 1

This didnt work?

columns.Bound(p => p.Rate)
            .Title(FieldTranslation.GetLabel("Rate", GlobalVariables.LanguageID))
            .HeaderHtmlAttributes(new { title = FieldTranslation.GetLabel("Rate", GlobalVariables.LanguageID) })
            .ClientTemplate("<span>#: BenefitMethod == 'Fixed Amount'? kendo.format('{0:c2}', Rate) : kendo.format('{0:p2}', Rate) #</span>");