How to auto fill Price when change ProductName.

[chinh]

Dear support teams.

I have a problem that I would like your help with.
using Telerik for AspNet.Core, with Grid control.
In the database, there is a list of goods, including goods code, name of goods, and unit price.
For example there are 3 goods
G01 - Goods 01 - 10$
G02 - Goods 02 - 20$
G03 - Goods 03 - 30$
On the grid I also created 3 corresponding fields,
When in add new row mode, enter the commodity code I want to display the name of the goods and the unit price as soon as I have entered "G01"


Do you have any solution to do it?

Thanks for your support.

Regards.

 

[Patrick | Technical Support Engineer, Senior]

Hello Chinh,

We have a dedicated Kendo UI Knowledge Base article which demonstrates one way you can update other fields based on the input on one field.  In the case the item is a newly created row, determine if the ID of the row is set to the defaultValue.

Grid

@(Html.Kendo().Grid<GridExample.Models.Product>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler").Change("onChange"))
        .Model(model => model.Id(p => p.ProductID))
        .Create(update => update.Action("Grid_Create", "Grid"))
        .Read(read => read.Action("Grid_Read", "Grid"))
        .Update(update => update.Action("Grid_Update", "Grid"))
        .Destroy(update => update.Action("Grid_Destroy", "Grid"))
    )
)

JavaScript

    function onChange(e) {

        //If the itemchange action has occurred
        //and it was from the ProductID column
        if (e.action == "itemchange" && e.field == "ProductID") {

            //if a new row
            if (e.items[0].ID == 0) {

                //reference Grid
                var grid = $("#grid").data("kendoGrid");

                //get ID of item
                var editItemModelId = e.items[0].id;

                //get dataItem from the dataSource
                var dataItem = grid.dataSource.get(editItemModelId);

                //based on text, populate the row
                if (e.items[0].ProductID == "G01") {
                  
                    dataItem.set("ProductName", "Product1");
                    dataItem.set("UnitPrice", 10);
                }
                else if (e.items[0].ProductID == "G02") {
                    dataItem.set("ProductName", "Product2");
                    dataItem.set("UnitPrice", 20);
                }
                else if (e.items[0].ProductID == "G03") {

                    dataItem.set("ProductName", "Product3");
                    dataItem.set("UnitPrice", 30);
                } 
            }

        }
    }

Please let me know if you have any questions regarding the approach.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik