1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to default a column to the value of another column if it is null

How to default a column to the value of another column if it is null

I have a column employee price when editing I want to default the value to the value of the price column if the employee price is null. If the employee price is not null I want to show the employee price.

CODE
 @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).UpdateUrl("/Home/UpdateInventory").Adaptor("RemoteSaveAdaptor"); }).Columns(col =>
    {
    col.Field("InventoryID").HeaderText("Id").IsPrimaryKey(true).AllowEditing(false).Width("50").Add();
    col.Field("Price").HeaderText("Price").EditType("numericedit").Format("C2").Edit(new { @params = new { decimals = 2 } }).Width("40").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

    col.Field("EmployeePrice").HeaderText("Emp Price").Width("50").Edit(new { @params = new { decimals = 2 , value = IF EmployeePrice is null then Price else EmployeePrice }}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   
    }).AllowPaging(true).AllowSorting(true).AllowFiltering(true).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", "Delete" }).Render()

5 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team January 20, 2021 01:42 PM UTC

Hi Danyelle, 

Thanks for the contacting Syncfusion support.

Based on your query, we suspect that you want to set the value of another column(Price column) to a column(Employee Price) based on its value. You can achieve your requirement by binding change event to the textbox(using column edit params property) and actionBegin event of Grid as demonstrated in the below code snippet,  
Index.cshtml 
@{ 
    var numericetextbox = new Syncfusion.EJ2.Inputs.TextBox() 
    { 
         
        Change = "ValChange" 
    }; 
} 
 
@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Json(ViewBag.data).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update") 
.Adaptor("RemoteSaveAdaptor"); }).ActionBegin("actionComplete").Columns(col => 
{ 

. . .
col.Field("Freight").HeaderText("Employee Price").Width("90").Edit(new { @params = numericetextbox }).Add();
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog);  }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
<script> 
    var val; 
    function ValChange(args) { 
       
        var form = document.getElementById("GridEditForm").ej2_instances[0]; 
 
        if (args.value == "") { 
            val = parseInt(form.getInputElement("EmployeeID").value) 
            
        } 
        else { 
            val = args.value; 
        } 
    } 
    function actionComplete(args) { 
        if (args.requestType == "save") { 
            
            if (args.data['Freight'] == null) { 
                args.data['Freight'] = val; 
            }    
        } 
    } 
 
</script> 
 
Please refer the below sample for reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid-2127774147.zip

Please get back to us, if you need further assistance. 
Regards, 
Shalini M. 


DA Danyelle January 25, 2021 06:33 PM UTC

I'm still having trouble with this. The scrip never seems to hit the function in order to get the value. Maybe it is due to me already using action begin for something else? Also, my value is a decimal, not an int. 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 empPriceTxtBox = new Syncfusion.EJ2.Inputs.TextBox
    {
        Value = "ValueChange"
    };
}



<div class="inventoryGrid">
    @Html.EJS().Grid("InventoryGrid").DataSource(@Model.Inventory).AllowFiltering(true).AllowSorting(true).Columns(col =>
    {
    col.Field("Price").HeaderText("Price").EditType("numericedit").Format("C2").Edit(new { @params = new { decimals = 2 } }).Add();
    col.Field("EmployeePrice").HeaderText("Emp Price").Width("50").Edit(new { @params = new {empPriceTxtBox} }).Add();
    }).AllowPaging(true).ActionBegin("actionBegin").ActionComplete("actionComplete").FilterSettings(filter => filter.Columns(filterColumns)).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>

    var value;
    function ValueChange(args) { 
       
        var form = document.getElementById("InventoryGridEditForm").ej2_instances[0]; 
 
        if (args.value == "" || args.value == null) {
            value = form.getInputElement("Price").value;

        } 
        else { 
            value = args.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; 
                }
            } 
        } 

        if (args.requestType == "save") { 
            
            if (args.data['EmployeePrice'] == null) { 
                args.data['EmployeePrice'] = value; 
            }    
        } 
    } 


    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; 
                } 

            } 

        } 
    }

</script> 

SK Sujith Kumar Rajkumar Syncfusion Team January 26, 2021 06:53 AM UTC

Hi Danyelle, 
 
Sorry for the inconvenience. The reported problem was occurring as the edit params were not defined properly. So please define the edit params as demonstrated in the below code snippet to resolve the problem, 
 
@{ 
    var numerictextbox = new Syncfusion.EJ2.Inputs.TextBox() 
    { 
 
        Change = "ValChange" 
    }; 
} 
 
@Html.EJS().Grid("Grid").Columns(col => 
{ 
    col.Field("Freight").Edit(new { @params = numerictextbox }).Add(); 
}).Render() 
 
Please find the below updated sample for your reference, 
 
 
Note: In the code snippet you shared, instead of the ‘Change’ event, you had mentioned like – “Value = ‘ValueChange’”. So please modify this as – “Change = ‘ValueChange’” in order to trigger the event properly. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


DA Danyelle January 26, 2021 02:19 PM UTC

The Value change function is only triggered when the value of the employee price changes. I need to determine the default value that should be displayed when someone clicks edit. So when Edit is clicked then the employee price should be set to employee price unless it is null. If it is null then it should be defaulted to the Price value.

Example: When I click Edit the employee price is null for this record so I want to default it to the Price. So Price should be 28.95 and Employee Price should also be showing 28.95



SM Shalini Maragathavel Syncfusion Team January 27, 2021 02:11 PM UTC

Hi Danyelle, 

Sorry for the inconvenience caused.

Based on your query, we suspect that you want to set the value of another column(Price column) to a column(Employee Price) based on its value while editing a row. You can achieve your requirement by using actionComplete event of Grid as demonstrated in the below code snippet,  
Index.cshtml 
 
@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Json(ViewBag.data).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete"). 
UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); }).ActionComplete("actionComplete").Columns(col => 
{ 
    col.Field("Freight").HeaderText("Employee Price").Width("90").Type ("number").EditType("numericedit").Add(); 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog);  }). Render() 
<script>  
    function actionComplete(args) { 
      
        var form = args.form.ej2_instances[0]; 
        if (form.getInputElement('Freight').value == "") { 
            var numerictxt = document.getElementsByClassName('e-numerictextbox')[0].ej2_instances[0]; 
            numerictxt.value = parseInt(form.getInputElement('EmployeeID').value); 
        } 
    } 
 
</script> 
 
Please refer the below sample for reference,

Sample: https://www.syncfusion.com/downloads/support/forum/161644/ze/Grid-666091553.zip

Please get back to us, if you need further assistance. 
Regards, 
Shalini M. 


Marked as answer
Loader.
Up arrow icon