Updating a textbox cell after drop down selection

[Terrell]

Hello,
I have cascading dropdowns in my hierarchical grid (child rows) working fine. What I need is when the last dropdown value is selected that it would call my function (which it is doing fine), pass the id, look up the suggested price for the Price column and update the grid.

Here is what I have so far:

My child grid template:
<script id="orderdetailtemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Trecero.Models.OrderDetail>()
            .Name("grid_#=OrderId#")
                    .HtmlAttributes(new {@class="MyDetails" })
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderDetailId).Width(100).Title("Id");
                columns.Bound(o => o.DateOrder).Width(75).Title("Date").Width(130).Format("{0:MM/dd/yyyy}");
                columns.ForeignKey(p => p.CompanyId, (System.Collections.IEnumerable)ViewData["companies"], "CompanyId", "CompanyName").Title("Company").Width(100).HeaderHtmlAttributes(new { @title = "Company" }).Width(200).EditorTemplateName("CompanyId");
                columns.ForeignKey(p => p.OrderItemId, (System.Collections.IEnumerable)ViewData["orderitems"], "OrderItemId", "ItemCode").Title("Item").Width(300).HeaderHtmlAttributes(new { @title = "Item" }).Width(300).EditorTemplateName("OrderItem");
                columns.Bound(o => o.Price).Width(110);
                columns.Bound(o => o.OrderItem).ClientTemplate("#=OrderItem.Price#").Width(100);
                columns.Bound(o => o.Qty).Width(80);
                columns.ForeignKey(p => p.OrderStatusId, (System.Collections.IEnumerable)ViewData["orderstatus"], "OrderStatusId", "Description").Title("Status").Width(150);

                columns.Command(command => { command.Edit(); }).Width(150);
            })
                                  .ToolBar(toolbar => toolbar.Create().Text("Add Line").HtmlAttributes(new { @title = "Add Line" }))
                                .Editable(editable => editable.Mode(GridEditMode.InLine))
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(10)
                                            .Model(model =>
                                            {
                                                model.Id(p => p.OrderDetailId);
                                                model.Field(p => p.EnteredByUserId).DefaultValue(ViewBag.CurrentUserId);
                                                model.Field(p => p.IsPosted).DefaultValue(false);
                                                model.Field(p => p.OrderId).Editable(false);
                                                model.Field(p => p.OrderDetailId).Editable(false);
                                                model.Field(p => p.DateOrder).DefaultValue(DateTime.Today).Editable(false);
                                                model.Field(p => p.Qty).DefaultValue(1);
                                                model.Field(p => p.OrderStatusId).DefaultValue(1);
                                                model.Field(p => p.Description).Editable(false);
                                            })
                                    .Read(read => read.Action("OrderDetail_Read", "Orders", new { id = "#=OrderId#" }))
                                    .Create(update => update.Action("OrderDetail_Create", "Orders"))
                                    .Update(update => update.Action("OrderDetail_Update", "Orders"))
                                    .Destroy(update => update.Action("OrderDetail_Destroy", "Orders"))
                                )
                                .Pageable()
                                .Sortable()
                                .ToClientTemplate()
    )
</script>

My editor template drop down that is doing the triggering:
@model int

@(Html.Kendo().DropDownListFor(m => m)
                  .AutoBind(false)
                  .OptionLabel("Select Item...")
                  .DataTextField("TextValue")
                  .DataValueField("Id")
                  .Events(e => e.Change("orderitemchanged"))
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetOrderItemListbyCompanyId", "Orders").Data("filterCompanies"))
                                .ServerFiltering(true);
                  })

                  
                  .CascadeFrom("CompanyId")
                  
)
@Html.ValidationMessageFor(m => m)

and finally the event where I need this magic to happen:

function orderitemchanged(e) {
        var tr = $(e.target).closest(".k-detail-row").closest('div.k-grid').data("kendoGrid");
        
        alert(tr);

        //alert(data);

        //var grid = $("#grid").data("kendoGrid"),
        //model = grid.dataItem(this.element.closest("tr"));

       
        //alert(model);

        //var x = e.dataItem['Price'].text;
        //alert(x);

        //var t = $("#OrderItemId").data("kendoDropDownList").value();

        //var items = this.dataSource.data();

        //for (var i = 0; i < items.length; i++) {

        //    alert('hit');

        //    //alert(items[i].value);

        //    items[i].set("Price", 100);
        //}

        //var x = $("#Price").data("kendoTextbox").text();

        //alert(x);

        //var tr = $(e.target).closest("tr"); //get the row

        //var data = this.dataItem(tr); //get the row data so it can be referred later

        //alert(data);
        //data.set("UnitPrice", data.UnitPrice * 10);
       
    }

As you can see, I've tried everything.

[Rosen]

Hi Terrell,

I'm not sure I completely  understood your scenario, is the price retrieved from the selected in the DropDownList item? If so you can use similar to the following code:

function orderitemchanged(e) {
    //get the closest grid
    var grid = this.element.closest('[data-role=grid]').data("kendoGrid");
    var tr = this.element.closest("tr");// get the row element which contains the DropDownList widget
    var dataItem = grid.dataItem(tr); // get the associated Model

    //should we get the price from the DropDownList selected item ??
    var price = this.dataItem().Price;
    dataItem.set("Price", price); // update the Model with the new Price
}

Regards,
Rosen
Telerik

 

 

[ajith]

Hi Rosen.

  i have same issue. i am try to update grid  with another popup grid selected row

my code is,

@(Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetLocationViewModel>()
            .Name("AssetlocationGrid")
           .Columns(columns =>
    {
        //columns.Bound(p => p.UserId).Width(125);
        columns.Bound(p => p.CampanyCode).Width(125);
        columns.Bound(p => p.location1code).Width(165).Filterable(false);
        columns.Bound(p => p.location2code).Width(150).Filterable(false);
        columns.Bound(p => p.locationCode).Width(125);
        columns.Bound(p => p.Name).Width(150);
        columns.Bound(p => p.ShortName).Width(150);
        columns.Bound(p => p.CreatedBy).Width(150);
        columns.Bound(p => p.ModifyBy).Width(150);


        //columns.Bound(p => p.Designation).Width(150);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)

        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.locationCode))
        .Create(update => update.Action("AssetLocEditingPopup_Create", "Location"))
            .Read(read => read.Action("AssetLocationEditingPopup_Read", "Location"))
            .Update(update => update.Action("AssetLocEditingPopup_Update", "Location"))

            .Destroy(update => update.Action("AssetLocEditingPopup_Destroy", "Location"))
    )




)
@Html.HiddenFor(model=>model.location1code,new{id="loc1Id"})


<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
    //function OnlocationChange(e) {
    //    $('#AssetlocationGrid').data().kendoGrid.dataItem($(this.element)
    //        .closest('tr'))
    //    .set('loc_l1code', this.value());
    //$("#grid").on("dblclick", " tbody > tr > td", function () {
    //....
   // });
    //}
    $("#AssetlocationGrid").on("dblclick", " tbody > tr > td", function () {

        $("#window").load("@Url.Action("PopupWindow", "Location")");
        //$(this).load("/Shared/_assetLocationPopup");
    });


    function onRowSelected() {

        var gridO = $("#AssetlocationGrid").element.closest('[data-role=grid]').data("kendoGrid");
        var tr = $("#AssetlocationGrid").element.closest("tr");
        var dataItem = gridO.dataItem(tr);
        var grid = $("#popupGrid").data("kendoGrid");
        var selectedItem = grid.dataItem(grid.select());

        var loc = selectedItem.Name
        dataItem.set("location1code", loc);
        alert(loc)
    }

</script>

@{Html.Kendo().Window()
.Name("locapopupWindow")
.Title("Select Location")
.Draggable()
.Width(500)
.Height(300)
.Actions(actions => actions
    .Custom("custom")
    .Minimize()
    .Maximize()
    .Close()

    )
    .Content(@<text>

   @{Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetLocationViewModel>()
    .Name("popupGrid")

           .Columns(columns =>
           {
               columns.Bound(p => p.CampanyCode).Width(125).Visible(false);
               columns.Bound(p => p.location1code).Width(165).Visible(false);
               columns.Bound(p => p.location2code).Width(150).Visible(false);
               columns.Bound(p => p.Name).Width(150);
               columns.Bound(p => p.ShortName).Width(150);
               columns.Bound(p => p.CreatedBy).Width(150).Visible(false);
               columns.Bound(p => p.ModifyBy).Width(150).Visible(false);

           })
    .Pageable()
    .Sortable()
    .Scrollable()

    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))

    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:250px;" })

    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)

        //.Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.location1code))

        .Create(update => update.Action("Level2LocEditingPopup_Create", "Asset"))
            .Read(read => read.Action("Level2LocationEditingPopup_Read", "Location"))


    )

    .Render();

    }
<script>

    $("#popupGrid").data("kendoGrid").bind("change", onRowSelected);
</script>
 </text>
    )

       .Render();


       }

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    //function onChange(e) {
    //    $('#locationGrid').data().kendoGrid.dataItem($(this.element)
    //        .closest('tr'))
    //    .set('loc_l1code', this.value());
    //}

</script>

[Rosen]

Hello ajith,

Unfortunately, I'm not sure what is the exact issue you are facing nor how it is related to the original topic of this thread. Therefore, please open a separate support request in which provide more detailed information about what is the exact issue you experiencing and what is the desired result. 

Regards,
Rosen
Telerik