1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Display Yes/No instead of True/False

Display Yes/No instead of True/False

I have a field named IsActive. I was able to display yes/no in the grid in place of true/false using the value accessor method. I am wondering how I can display yes/no instead of true/false in the filter and in the selections on the edit/add dialogs? 

I would like this to say Yes/No instead of true/false.

This is from the edit dialog. I also want it to display Yes/No instead of true/false.

I do need the underlying values to remain as true /false but I want the display to be yes/no.

Here is my code:

@{
    var filterColumns = new List<object>
{
        new {field = "IsActive", matchCase = false, @operator = "equal", predicate = "and", value = "true"}
    };

    var sortColumns = new List<object> { new { field = "InventoryID", direction = "Ascending" } };
    var booleanAccessor = "booleanAccessorFn";
}

<div class="inventoryGrid">
    @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).InsertUrl("/Home/AddInventoryItem").UpdateUrl("/Home/UpdateInventoryItem").Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).Columns(col =>
{
    col.Field("InventoryID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Width("40").Add();
    col.Field("IsBudgetCharge").HeaderText("Budget Charge").EditType("dropdownedit").Visible(false).DefaultValue(false).Add();
    col.Field("IsActive").HeaderText("Active").ValueAccessor(booleanAccessor).EditType("dropdownedit").DefaultValue(true).Width("45").Add();
}).AllowPaging(true).ActionBegin("actionBegin").ActionComplete("actionComplete").FilterSettings(filter => { filter.Columns(filterColumns).Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).SortSettings(sort => sort.Columns(sortColumns)).PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit" }).Render()

</div>



<script>
    function booleanAccessorFn(field, data, column) {
        var value = data[field];
        if (value == true) {
            value = "Yes";
        } else {
            value = "No";
        }

        return value;
    }

    function actionBegin(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "HECNumber" || this.columns[i].field == "CeeUsNumber" || this.columns[i].field == "IsBudgetCharge") {
                    this.columns[i].visible = true;
                }
            }
        }
    }


    function actionComplete(args) {
        if (args.requestType === 'save') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "CustomerID") {
                    this.columns[i].visible = false;
                }

            }
        }

        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            var dialog = args.dialog;
            // change the header of the dialog
            dialog.header = args.requestType === 'beginEdit' ? 'Edit Inventory Item' : 'Add Inventory Item';
        }
    }

</script>

@Html.EJS().ScriptManager()


10 Replies 1 reply marked as answer
VS Vignesh Sivagnanam Syncfusion Team January 27, 2021 01:47 PM UTC

Hi Danyelle 

Greetings from Syncfusion support 

Query 1: Change value in the filter dialog: 

Based on your query you need to change the value of true and false to Yes and no in the Boolean column. To achieve your requirement we suggest you to use itemTemplate feature of  EJ2 Grid. 

Please refer the below Code Example for your reference 

Code Example : 
@Html.EJS().Grid("Grid").DataSource(dataManager => 
{ dataManager.Json(ViewBag.dataSource).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); 
}).EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Columns(col => 
{ 
  ……………………… 
  col.Field("Verified").HeaderText("Active").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).ValueAccessor(valueAccessor).Filter(new { type = "CheckBox", itemTemplate = "${ trustTemp(data) }" }).EditType("dropdownedit").DefaultValue("true").Width("45").Add(); 
}).AllowPaging().AllowFiltering(true).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Render() 
<Script> 
function trustTemp(e) { 
    if (e.Verified == true) { 
      return "Yes" 
    } 
    if (e.Verified == false) { 
      return "No" 
    } 
  } 
</Script> 

Query 2 : Change the value of dropdown in the Boolean column : 

Based on your query you want to display the yes or no instead of true or false in the dropdown of the dialog Editing. To achieve your requirement we suggest to use the cellEdit Template in the column to render the dropdown list component and you can modify the value in the dropdown using the dropdown’s item Template and Value Template.  

Please refer the below Code Example and Sample for your reference 

Code Example : 
col.Field("Verified").HeaderText("Active").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }). DefaultValue("true").Width("45").Add(); 
…………. 
<Script> 
var elem; 
  var dObj; 
  var data = @Html.Raw(Json.Encode(ViewBag.dataSource)); 
  var VerifiedData = ej.data.DataUtil.distinct(data, 'Verified', true); 
  function create(args) { 
    elem = document.createElement('input'); 
    return elem; 
  } 
  function write(args) { 
    dObj = new ej.dropdowns.DropDownList({ 
      showClearButton: true, 
      dataSource: VerifiedData, 
      value: args.rowData.Verified, 
      fields: { value: 'Verified', text: 'Verified' }, 
      itemTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
      valueTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>" 
    }); 
    dObj.appendTo(elem); 
  } 

  function destroy() { 
    dObj.destroy(); 
  } 
  function read(args) { 
    return dObj.value; 
  } 
</Script> 

Screenshot:  
 


Regards 
Vignesh Sivagnanam 


Marked as answer
DA Danyelle January 27, 2021 08:01 PM UTC

This worked great. For both Query 1 and 2 how do I order it so it displays Yes first instead of No?
Put Yes first


For Query 2 it is not showing the header text. The dropdown pictured is for the IsActive field but it shows no header after using the template to show yes/no instead of true/false


VS Vignesh Sivagnanam Syncfusion Team January 28, 2021 11:17 AM UTC

Hi Danyelle 

Thanks for the update 

Query 1 : Change the order of the items in the filter dialog 

Based on your query you want to alternate the order of the items in the filter popup. By default in EJ2 Grid the items will be displayed only in Ascending order. So, based on your requirement we have customized order by overriding CheckBoxFilterBase.getDistinct method in created event.  

Please refer the below code Example for your reference, 

Code Example: 
function created(args) { 
    ej.grids.CheckBoxFilterBase.getDistinct = function ( 
      json, 
      field, 
      column, 
      foreignKeyData 
    ) { 
      var len = json.length; 
      var result = []; 
      var value; 
      var ejValue = "ejValue"; 
      var lookup = {}; 
      var isForeignKey = 
        column && column.isForeignColumn ? column.isForeignColumn() : false; 
      while (len--) { 
        value = json[len]; 
        value = ej.grids.getObject(field, value); 
        if (!(value in lookup)) { 
          var obj = {}; 
          obj[ejValue] = value; 
          lookup[value] = true; 
          if (isForeignKey) { 
            var foreignDataObj = ej.grids.getForeignData( 
              column, 
              {}, 
              value, 
              foreignKeyData 
            )[0]; 
            ej.base.setValue("foreignKeyData", foreignDataObj, json[len]); 
            value = ej.base.getValue(column.foreignKeyValue, foreignDataObj); 
          } 
          ej.base.setValue( 
            field, 
            ej.base.isNullOrUndefined(value) ? null : value, 
            obj 
          ); 
          ej.base.setValue("dataObj", json[len], obj); 
          result.push(obj); 
        } 
      } 
      var direction = ej.data.DataUtil.fnDescending; 
      return ej.data.DataUtil.group( 
        ej.data.DataUtil.sort(result, field, direction), 
        "ejValue" 
      ); 
    } 
  } 

Query 2 : Header Text for the cell edit template  

To show the header text in the edit dialog for the cell edit template, we need to append the div element for the header text. In the sample we append the element along with the dropdown in the create function. Please refer the below Code Example for your reference, 

Code Example :  
function create(args) { 
    div = document.createElement('div'); 
    header = document.createElement('div'); 
    elem = document.createElement('input'); 
    div.append(header); 
    div.append(elem) 
    return div; 
  } 
function write(args) { 
    header.innerText = args.column.field; 
    dObj = new ej.dropdowns.DropDownList({ 
      showClearButton: true, 
      dataSource: VerifiedData, 
      value: args.rowData.Verified, 
      fields: { value: 'Verified', text: 'Verified' }, 
      itemTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
      valueTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
    }); 
    dObj.appendTo(elem); 
  } 


Regards 
Vignesh Sivagnanam 


DA Danyelle January 28, 2021 05:41 PM UTC


This worked great. I have a couple more questions: In the add/edit dialog how do I make the order be Yes then No and how do I default the field to yes? Since making the changes to the order I have lost the default.

Active should show Yes the way budget charge is defaulted to false when the dialog opens and when you click the dropdown it should say Yes/No first.



VS Vignesh Sivagnanam Syncfusion Team January 29, 2021 11:32 AM UTC

Hi Danyelle 

Thanks for the update  

Based on your query you want to set the default value for the dropdown in grid dialog while adding or editing the row. You can set the default value to the dropdown in the cell edit template by Providing the value to the value property in the dropdownlist component. Please refer the below Code Example for your reference, 

Code Example : 
function write(args) { 
    header.innerText = args.column.field; 
    dObj = new ej.dropdowns.DropDownList({ 
      showClearButton: true, 
      dataSource: VerifiedData, 
      value: true, 
      fields: { value: 'Verified', text: 'Verified' }, 
      itemTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
      valueTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
    }); 
    dObj.appendTo(elem); 
  } 

Screenshot :  
 

Regards 
Vignesh Sivagnanam 


DA Danyelle replied to Vignesh Sivagnanam February 1, 2021 04:18 PM UTC


How do I make the Active header behave like the other headers? When other fields are selected the header color changes. When the is active field is selected the header stays black.

I want Active to show blue like Emp Price does when selected:


DA Danyelle February 1, 2021 07:38 PM UTC

When I save the record it is not updating the change to the IsActive field. So when I save it as No the value saved to my model should be false but it is still set to true.

Conrtoller
public ActionResult UpdateInventoryItem(CRUDModel<Inventory> inventoryDM)
        {
            var inventoryRecord = GetInventoryRecord(inventoryDM.Value); // there is a field in here called IsActive it should be set to false when I select No in the IsActive field on the add/edit screen.
            _repository.UpdateInventoryItem(inventoryRecord);


            return Json(inventoryRecord);
        }
How do I change the field value when it is updated? As stated previously I only wanted to change the display of the value to yes/no I still need to save the value as true/false because it is a boolean value.

VS Vignesh Sivagnanam Syncfusion Team February 2, 2021 03:22 PM UTC

Hi Danyelle 

Thanks for the update 

Query 1 : Behave like other headers: 

Based on your query you want to make the cellEdit template label to behave like the other header. So, we suggest you to use the below code for providing the header to the input element instead of creating the header element. 

Please refer the below Code Example for your reference 

Code Example : 
function create(args) { 
    elem = document.createElement('input'); 
    return elem; 
  } 
  function write(args) { 
    dObj = new ej.dropdowns.DropDownList({ 
      showClearButton: true, 
      dataSource: VerifiedData, 
      placeholder: "Verified", 
      floatLabelType:"Always", 
      value: args.rowData.Verified, 
      fields: { value: 'Verified', text: 'Verified' }, 
      itemTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
      valueTemplate: "<div>${ if(Verified) }<span >Yes</span> ${ else}<span >No</span> ${/if}</div>", 
    }); 
    dObj.appendTo(elem); 
  } 
  function destroy() { 
    dObj.destroy(); 
  } 
  function read(args) { 
    debugger 
    return dObj.value; 
  } 

Query 2 : Return the Boolean value : 

Based on your query, you need to modify the value from Yes/No to True/False before the value is to be updated. There is no need to change the value of the field before updating. By default, the dropdown Yes/No values are only for the display. While updating the value it returns the Boolean value.  

Please refer the below Screenshot for your reference 

 

 

Regards 
Vignesh Sivagnanam 


DA Danyelle February 2, 2021 03:56 PM UTC

Query 1 worked thanks.
Query 2 was not working properly. When updating the value it was not updating the boolean value. So If the boolean was true and I changed the selection from Yes to No it was still returning true and not updating to false. 
I don't think this is the best way to handle this since you have to know which array position you need but I fixed it like this in the actionBegin method: If there is a better way let me know.

*Note IsBudget is defaulted to false and IsActive is defaulted to true
if (args.requestType === 'save') {
            if (args.form[14].innerText === 'true') {
                args.data.IsBudgetCharge = true;
            }

            if (args.form[16].innerText === 'false') {
                args.data.IsActive = false;
            }

        }

VS Vignesh Sivagnanam Syncfusion Team February 3, 2021 12:44 PM UTC

Hi Danyelle, 

Query 1: “Behave like other headers” 

We are happy to hear that the provided solution works at your end. 

Query 2: “Boolean value” 

In your update you have mentioned that you have fixed the mentioned issue in actionBegin event. It is the better way to fix the mentioned issue,  but when we use editTemplate feature the value of the field to the server side is based on the read method returned value in the editTemplate. Please ensure that the value returned in the read method is properly returned or not. 

Please refer the below Sample and Screenshot for your reference, 


Screenshot : 
 
 

If you are still facing the issue, kindly share the following details that will be helpful for us to provide better solution. 

  1. If possible please share the issue reproduced sample or replicate the issue in the attached sample. 

  1. Syncfusion Package Version.

Regards 
Vignesh Sivagnanam 


Loader.
Up arrow icon