Get value from dropdownlist in popup grid

[Machriza]

Dear All,

Can you help me :)

I want to get value from dropdownlist in popup in grid.I have dropdownlist TransactionId,i want get automactically value in field outstanding Amount whatever in transaction id is primary key from outsatnding amount. 

 

My view:

<div>
    @(Html.Kendo().Grid<DevRedsMk3.Models.NpvCalculation>()
        .Name("NpvCalculation")
        .Columns(columns =>
        {
            columns.Bound(p => p.NpvCalculationId).Hidden();
            columns.ForeignKey(p => p.TransactionId, (System.Collections.IEnumerable)ViewData["custTrans"], "TransactionId", "TransactionId").Title("TransactionId ID");
            columns.Bound(p => p.LastPayment).Title("Last Payment");
            columns.Bound(p => p.OutstandingAmount).Title("Outstanding Amount");
            columns.Bound(p => p.Installment).Title("Installment");
            columns.Bound(p => p.Interest).Title("Interest");//Title("Interest").Editable(false)

            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
            columns.Command(c => c.Custom("OK").Text("OK").Click("OK"));
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
        })
        .Events(e => {  e.DataBound("onchangeevent"); })
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Scrollable(s => s.Height(570))
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(datasource => datasource
             .Ajax()
             .ServerOperation(false)
             .Model(model =>
             {
                 model.Id(p => p.NpvCalculationId);
                 model.Field(p => p.Interest).Editable(false);

             })

             .Read(read => read.Action("List", "NpvCalculations"))
             .Update(update => update.Action("Update", "NpvCalculations"))
             .Create(create => create.Action("Create", "NpvCalculations"))
             .Destroy(destroy => destroy.Action("Destroy", "NpvCalculations"))

        )
    )

    <script type="text/javascript">
        function OK(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            
            $.ajax({
                url: "/NpvCalculations/GenerateNpvBaru",
                //data: dataItem.id,
                //data: { 'TransactionId': dataItem.TransactionId },
                data: { TransactionId: dataItem.TransactionId },
                success: function (response) {
                    //$('#viewDetails').html(response);
                    //alert('Approve done...');
                }
            });
        }
    </script>

    <script>
        function onchangeevent() {
            $('#OutstandingAmount').val('10000');
        }

    </script>

</div>

 

 

Thanks for your help,

 

Regards,

 

Madeck

[Stefan]

Hello, Machriza,

Thank you for the provided details.

This could be achieved with a custom popup editor. It will require setting a change event to the DropDown editor used for the ForeignKey field. Then in that event the retrieve the value of the DropDown and to programmatically set it to the TextBox which holds the OutstandingAmount value:

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-change

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

I can suggest checking the following example demonstrating how to use a custom popup editor:

https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/custom-popup-editor

If additional assistance is needed, please provide a fully runnable example and I will gladly assist.

Regards,
Stefan
Progress Telerik