how to set boath cell text and value in QueryCellInfo event

[kalum]

Hi,

I'm using bellow code to set a calculated column value in the grid in QueryCellInfo event. But It only sets the text of the cell. But i need to set the text and as well as value of that cell at the same time. How do i do it?

@(Html.EJ().Grid<object>("Recipe_FlatGrid")
                .AllowPaging()
                    .Datasource((IEnumerable<object>)ViewBag.griddata)
                    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch).RowPosition(RowPosition.Bottom); })
                    .AllowPaging()
                    .PageSettings(Page => Page.PageSize(150))
                     .ClientSideEvents(eve => eve.CellSave("cellsave").CellEdit("celledit").BeforeBatchAdd("beforeBatchAdd").DataBound("OnDataBound").QueryCellInfo("calculate"))

                .Columns(col =>
                {
                    col.Field("LinNo").HeaderText("LinNo").Width("60").IsPrimaryKey(true).IsIdentity(true).AllowEditing(true).TextAlign(TextAlign.Left).Visible(true).Add();
                   
                    col.Field("InputItemKey").HeaderText("InputItemKey").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(false).Add();
                    col.Field("ItemCode").HeaderText("ItemCode").Width("150").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).EditTemplate(a => { a.Create("create_ItemCode").Read("read_ItemCode").Write("write_ItemCode"); }).Add();
                    col.Field("ItemName").HeaderText("ItemName").Width("300").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).EditTemplate(b => { b.Create("create_ItemName").Read("read_ItemName").Write("write_ItemName"); }).Add();
                    col.Field("InputItemQty").HeaderText("InputItemQty").Width("100").TextAlign(TextAlign.Right).AllowEditing(true).Format("{0:n4}").Visible(true).Add();
                    col.Field("UnitAbbr").HeaderText("UnitAbbr").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                   
                    col.Field("UCPrice").HeaderText("UCPrice").Width("100").TextAlign(TextAlign.Right).AllowEditing(true).Format("{0:n2}").Visible(true).Add();
                    col.Field("Value").HeaderText("Value").Width("100").TextAlign(TextAlign.Right).AllowEditing(true).Format("{0:n2}").Visible(true).Add();
                 
                    col.Field("ItTypeCode").HeaderText("ItTypeCode").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                    col.Field("CommitFlag").HeaderText("CommitFlag").Width(50).TextAlign(TextAlign.Center).AllowEditing(true).Visible(true).Add();
                }))



<script type="text/javascript">

    var Glob_ActiveRowIndex;

    function calculate(args) {
    
     
        if (args.column.field == "Value") {

            var y = args.data.InputItemQty * args.data.UCPrice;

         $(args.cell).text(y);

           }

        }
</script>

Thank you,

Kalum

[Sathyanarayanamoorthy Eswararao]

Hi Kalum, 

Thanks for contacting Syncfusion support. 

According to your query we suspect that you need to update the text for a particular cell of the column and as well as update the value for that column in the dataSource also using the queryCellInfo event. We have achieved your requirement in the below code example. 

@(Html.EJ().Grid<object>("Editing") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); }) 

 

                                 -------- 

 

         .ClientSideEvents(eve => eve.QueryCellInfo("calculate")) 

        .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); 

            col.Field("CustomerID").HeaderText("Customer ID").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add(); 

            col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.DropdownEdit).TextAlign(TextAlign.Right).Width(80).Add(); 

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80) 

.EditType(EditingType.NumericEdit).Format("{0:C}").Add(); 

             

        })) 

<script type="text/javascript"> 

 

 

    function calculate(args) { 

 

 

        if (args.column.field == "Freight") { 

 

            var y = args.data.EmployeeID * args.data.OrderID; 

 

            $(args.cell).text(y); 

 

            args.data.Freight = y;  // update the column value in the dataSource. 

 

           } 

 

        } 

</script> 

If the above solution does not meet your requirement please get back to us with more details about your requirement. 

Regards, 

Sathyanarayanamoorthy 

[kalum]

Hi Sathyanarayanamoorthy,

Your solution works fine. Thank you very mush for the support.

Thank you

Kalum

[Vignesh Natarajan]

Hi Kalum, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution. 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan