[Solved] Error on client selection Grid while insert

[saroj]

Hi Support,

I am working on below code, and added insert option in Orders. But can't get the CustomerID while inserting. 
It works for the selection, 

Can anyone help me how can i pass customerId while inserting.



<h3>Customers</h3>

@(Html.Telerik().Grid((IEnumerable<Customer>)ViewData["Customers"])
        .Name("Customers")
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerID).Width(130);
            columns.Bound(c => c.CompanyName).Width(250);
            columns.Bound(c => c.ContactName);
            columns.Bound(c => c.Country).Width(200);
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectionClientSide_Customers", "Grid"))
        .Pageable()
        .Sortable()
        .Selectable()
        .ClientEvents(events => events.OnRowSelect("onRowSelected"))
        .RowAction(row => 
        {
            row.Selected = row.DataItem.CustomerID.Equals(ViewData["id"]);
        })
        
)
<h3>Orders (<span id="customerID">@ViewData["id"] </span>)</h3>

@(Html.Telerik().Grid((IEnumerable<Order>)ViewData["Orders"])
        .Name("Orders")
	.ToolBar(commands =>
    	{
        commands.Insert().ButtonType(GridButtonType.Text).HtmlAttributes(new { @style = "color: black;" });
    	})
        .Columns(columns=>
        {
            columns.Bound(c => c.OrderID).Width(100);
            columns.Bound(c => c.OrderDate).Width(200).Format("{0:dd/MM/yyyy}");
            columns.Bound(c => c.ShipAddress);
            columns.Bound(c => c.ShipCity).Width(200);
        })
        .DataBinding(dataBinding => dataBinding.Ajax()
		.Select("_SelectionClientSide_Orders", "Grid", new {customerID = "ALFKI" })
		.Insert("_InsertionClientSideOrders", "Grid", new{customerID = "ALFKI"}))

        .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
        .Pageable()
        .Sortable()
        
)
<script type="text/javascript">
    var customerID;
    function onRowSelected(e) {
        var ordersGrid = $('#Orders').data('tGrid');
        customerID = e.row.cells[0].innerHTML; 
        
        // update ui text
        $('#customerID').text(customerID);
        // rebind the related grid
        ordersGrid.rebind();
    }
    function onDataBinding(e) {
        e.data = $.extend(e.data, { customerID: customerID });
    }
</script> 

[Daniel]

Hello Saroj,

You can use the OnSave client-side event to pass the CustomerID when inserting a record in the Orders Grid.

Greetings,
Daniel
the Telerik team

[saroj]

Hi Daniel,

I have tried using OnSave event but still can't pass the customerID, Do you have any sample example related to this?

Thanks !

[Daniel]

Hello again Saroj,

There is an example on passing additional data with the OnSave event in the documentation. Basically, you should assign the additonal data to the event argument's values property. For example:

function Grid_onSave(e) {
    e.values.CustomerID = customerID;
}

If the problem persists, please provide a sample project or a code snippet with the code you are currently using so I can check the exact setup.

All the best,
Daniel
the Telerik team