RadGrid Inplace edit mode Control access

[Mahendra]

Hi,

I am using RadGrid to capture the details with EditMode="InPlace".

In my RadGrid there are 4 columns:
1. Qty
2. UnitPrice
3. TotalAmount
4. ProductAge

Now, Qty, UnitPrice, TotalAmount columns are GridNumericColumn.& ProductAge is GridDropDownColumn.

For Editmde i am using GridNumericColumnEditor & GridDropDownListColumnEditor.

When i double click on row i get the Row in Editable mode but the issue is:
> OnBlur, at client-side, of Qty/UnitPrice, i want to calculate the values and update the TotalAmount field in the grid itself.

I have searched most of the pages regarding the RadGrid in Edit Mode with Inplace for my scenario but i did not get any solution.

Please help me as soon as possible because i spent almost a day on it.

Thanks in advance.

Regards,
Mahendra

[Princy]

Hello Mahendra,

Try the following code snippet to attach 'onblur' event to GridNumericColumn.

ASPX:

<MasterTableView CommandItemDisplay="Top" EditMode="InPlace">
    <Columns>
         <telerik:GridNumericColumn UniqueName="Qty" DataField="total" >
        </telerik:GridNumericColumn>
         .   .    .   .   .    .
    </Columns>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
     if (e.Item is GridEditableItem && e.Item.IsInEditMode)
       {
           GridEditableItem editItem = (GridEditableItem)e.Item;
           RadNumericTextBox txtboxqty = (RadNumericTextBox)editItem["Qty"].Controls[0];
           txtboxqty.Attributes.Add("onblur", "qtyonblur();");
       }
    }

Java Script:

<script type="text/javascript">

    function qtyonblur() {

       


    }

</script>

Thanks,
Princy.

[Mahendra]

 

 
GRID:

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager >

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat ="server">

 

 

 

<script type ="text/javascript">

 

 

 

var hasChanges, inputs, dropdowns, editedRow;

 

 

 

 

function RowClick(sender, eventArgs) {
if (editedRow && hasChanges)
{ hasChanges = false ;

 

 

 

 

if (confirm("Update changes?"

)) {

 

 $find(

 

"<%= RadGrid1.MasterTableView.ClientID %>").updateItem(editedRow);

 

 

 }

 

}

 

}

 

 

 

function

RowDblClick(sender, eventArgs) {

 

 editedRow = eventArgs.get_itemIndexHierarchical();

 

$find(

 

 

"<%= RadGrid1.MasterTableView.ClientID %>"

).editItem(editedRow);

 

  }

 

 

 

 

function

GridCommand(sender, args) {

 

if (args.get_commandName() != "Edit"

) {

 

editedRow = 

 

null ;

 

 

 }

 }

 

 

function

GridCreated(sender, eventArgs) {

 

 

 

var gridElement = sender.get_element();

 

 

 

 

var elementsToUse = [];

 

 

 inputs = gridElement.getElementsByTagName(

 

"input" );

 

 

 

 

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

 

 

 

 

var lowerType = inputs[i].type.toLowerCase();

 

 

if (lowerType == "hidden" || lowerType == "button"

) {

 

continue ; }

 

 

Array.add(elementsToUse, inputs[i]);

 

 

 

inputs[i].onchange = TrackChanges;

 

 

 

}

 

 

 

dropdowns = gridElement.getElementsByTagName(

 

"select");

 

 

 

 

for (var

i = 0; i < dropdowns.length; i++) {

 

dropdowns[i].onchange = TrackChanges;

 

}

setTimeout(

 

 

function () { if

(elementsToUse[0]) elementsToUse[0].focus(); }, 100);

 

 

}

 

 

 

function

TrackChanges(e) {

 

hasChanges =

 

true ; }

 

 

 

 

 

 

 

function

CalculateAmount(ogrdtxtbxCEQty, ogrdtxtbxCEUnitPrice, ogrdtxtbxCEVendor1Amt){

 alert(ogrdtxtbxCEQty);

alert(ogrdtxtbxCEUnitPrice);

alert(ogrdtxtbxCEVendor1Amt);

alert(

 

'hi');

 

 

 

 

//Here i want to calculate the values and update the responctive control.

 

 

// return false;

 

 

}

 

 

 

 

 

</script >

 

 

 

 

 

</telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid1" Width="100%" GridLines="None" runat="server" AllowAutomaticUpdates="True" AutoGenerateColumns ="False">

<MasterTableView TableLayout="Fixed" DataKeyNames="ItemCode" EditMode ="InPlace">

<Columns >

<telerik:GridBoundColumn UniqueName="ItemCode" DataField="ItemCode" HeaderText="#" ReadOnly ="True"/>

<telerik:GridBoundColumn UniqueName="ItemName" DataField="ItemName" HeaderText="Line Item" ColumnEditorID="grdtxtbxCELineItem" />

<telerik:GridBoundColumn UniqueName="Type" DataField="Type" HeaderText="Type" ColumnEditorID="grdtxtbxCEType" />

<telerik:GridNumericColumn UniqueName="Qty" DataField="Qty" HeaderText="Qty" ColumnEditorID="grdtxtbxCEQty" />

<telerik:GridNumericColumn UniqueName="UnitPrice" DataField="UnitPrice" HeaderText="Unit Price" ColumnEditorID="grdtxtbxCEUnitPrice" />

<telerik:GridNumericColumn UniqueName="Vendor1Amt" DataField="Vendor1Amt" HeaderText="Vendor1Amt" ColumnEditorID="grdtxtbxCEVendor1Amt" />

<telerik:GridNumericColumn UniqueName="Vendor2Amt" DataField="Vendor2Amt" HeaderText="Vendor2Amt" ColumnEditorID="grdtxtbxCEVendor2Amt" />

<telerik:GridNumericColumn UniqueName="Vendor3Amt" DataField="Vendor3Amt" HeaderText="Vendor3Amt" ColumnEditorID="grdtxtbxCEVendor3Amt" />

<telerik:GridDropDownColumn UniqueName="AccountCode" DataField="AccountCode" HeaderText="AccountCode" ColumnEditorID="grdtxtbxCEAccountCode" ListTextField="" ListValueField=""/>

<telerik:GridDropDownColumn UniqueName="Age" DataField="Age" HeaderText="Age" ColumnEditorID="grdtxtbxCEAge" ListTextField="FormID" ListValueField="FormID" />

</Columns >

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />

</ClientSettings >

</telerik:RadGrid >

<telerik:GridTextBoxColumnEditor ID="grdtxtbxCELineItem" runat="server" />

<telerik:GridTextBoxColumnEditor ID="grdtxtbxCEType" runat="server" /> <telerik:GridNumericColumnEditor ID="grdtxtbxCEQty" runat="server" />

<telerik:GridNumericColumnEditor ID="grdtxtbxCEUnitPrice" runat="server" />

<telerik:GridNumericColumnEditor ID="grdtxtbxCEVendor1Amt" runat="server" NumericTextBox-ReadOnly="False"

/>

 

<telerik:GridNumericColumnEditor ID="grdtxtbxCEVendor2Amt" runat="server" />

<telerik:GridNumericColumnEditor ID="grdtxtbxCEVendor3Amt" runat="server" />

<telerik:GridDropDownListColumnEditor ID="grdtxtbxCEAccountCode" runat="server" DataTextField="FullDescription" DataValueField="KeyCVal" />

<telerik:GridDropDownListColumnEditor ID="grdtxtbxCEAge" runat="server" DataTextField="FormID" DataValueField="FormID" />

 

 

 

ITEMDATABOUND EVENT:
Private

 

 

Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound

 

 

 

If e.Item.IsInEditMode Then

 

 

Dim oeditModeRow As GridEditableItem

oeditModeRow = 

 

CType(e.Item, GridEditableItem)

 

 

 

 

Dim oeditManager As GridEditManager

 

 

oeditManager = oeditModeRow.EditManager

 

 

 

 

Dim grdtxtbxCEAccountCode As GridDropDownColumnEditor = CType(oeditManager.GetColumnEditor("AccountCode"), GridDropDownColumnEditor)

 

 

Dim oDTAssetAge As DataTable = GetAssetForEditTemplate()

 

grdtxtbxCEAccountCode.DataSource = oDTAssetAge

grdtxtbxCEAccountCode.DataBind()

 

 

Dim grdtxtbxCEAge As GridDropDownColumnEditor = CType(oeditManager.GetColumnEditor("Age"), GridDropDownColumnEditor)

 

grdtxtbxCEAge.DataSource = GetAgeForEditTemplate()

grdtxtbxCEAge.DataBind()

Dim grdtxtbxCEQty As GridNumericColumnEditor = CType(oeditManager.GetColumnEditor("Qty"), GridNumericColumnEditor)

Dim grdtxtbxCEUnitPrice As GridNumericColumnEditor = CType(oeditManager.GetColumnEditor("UnitPrice"), GridNumericColumnEditor)

Dim grdtxtbxCEVendor1Amt As GridNumericColumnEditor = CType(oeditManager.GetColumnEditor("Vendor1Amt"), GridNumericColumnEditor)

grdtxtbxCEQty.NumericTextBox.ClientEvents.OnBlur = 

 

"CalculateAmount('" & grdtxtbxCEQty.ClientID & "', '" & grdtxtbxCEUnitPrice.ClientID & "', '" & grdtxtbxCEVendor1Amt.ClientID & "')"

 

 

 

 

 

'AcountCode

 

'Age

End If

 

 

 

End Sub



Javascript function "CalculateAmount" i want the controls of edit controls.

Hope this help for your analysis.

Thanks in advance.

 

 

[Princy]

Hello Mahendra,

One option you can do is save the ClientID of NumericTextbox in HiddenField and access it from client side. Sample code is given below.

VB.NET:

Protected Sub RadGrid1_ItemCreated(sender As Object, e As GridItemEventArgs)
    If e.Item.IsInEditMode AndAlso TypeOf e.Item Is GridEditableItem Then
        Dim oeditModeRow As GridEditableItem = Nothing
        oeditModeRow = DirectCast(e.Item, GridEditableItem)
        Dim grdtxtbxCEQty As RadNumericTextBox = DirectCast(oeditModeRow("Qty").Controls(0), RadNumericTextBox)
        Dim grdtxtbxCEUnitPrice As RadNumericTextBox = DirectCast(oeditModeRow("UnitPrice").Controls(0), RadNumericTextBox)
        HiddenField1.Value = grdtxtbxCEQty.ClientID
        grdtxtbxCEQty.Attributes.Add("onblur", "CalculateAmount();")
    End If
End Sub

Java Script:

<script type="text/javascript">
     function CalculateAmount() {
         var ogrdtxtbxCEQty = $find(document.getElementById('HiddenField1').value);
         alert(ogrdtxtbxCEQty.get_value());
      }
</script>

Also refer the following code library  which provides an example of how to retrieve editor values on client:
Retrieving grid editor value client side

Thanks,
Princy.