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()
SIGN IN To post a reply.
10 Replies
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:
Sample : https://www.syncfusion.com/downloads/support/forum/161909/ze/gridmvclocalization1183512499.zip
Regards
Vignesh Sivagnanam
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
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.
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
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:
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.
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
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,
Sample : https://www.syncfusion.com/downloads/support/forum/161909/ze/gridmvclocalization1907438384.zip
Screenshot :
If you are still facing the issue, kindly share the following details that will be helpful for us to provide better solution.
- If possible please share the issue reproduced sample or replicate the issue in the attached sample.
- Syncfusion Package Version.
Regards
Vignesh Sivagnanam
SIGN IN To post a reply.
