GridTemplateColumn change value on client

[Igor]

     Hello.
How to change the value of GridTemplateColumn.
I have this complicated situation. I have Grid in BatchEdit mode, using load-on-demand, using client and server validation, containing GridTemplateColumns with RadComboBoxes which are cascade-depended on each other also in load-on-demand mode. I am aware, I am using multiple features, which perhaps are not working well together by default, but that was never a problem for me. 
Almost everything is well. When an edited row is not validated on the server, this row is recreated on the client after postback. If the existing row was changed, this row is edited, if it was a new row, this row is created and populated. 
I have a problem set GridTemplateColumn value properly because there are 2 values: display value and id value. I cannot use the standard function "batchEditingManager.changeCellValue" because I either use display value and I have wrong information on the server or I use id value and the user cannot see proper values. If I combine the second solution and change the innerText of the column, the grid will start to have weird errors. If I use some other solution, I don't have values on the server during the BatchEdit command (GridBatchEditingCommand.NewValues). 

In short:
I need to change value of GridTemplateColumn on the client, show display value to the user in the row and have id value on postback in GridBatchEditingCommand.NewValues.
I need to do this on the client, I think I cannot use server row binding.

Grid collumn:

<telerik:GridTemplateColumn HeaderText="Projekt" UniqueName="PROJECT_ID" DataField="PROJECT_ID" SortExpression="PROJECT_ID" HeaderStyle-Width="15%" ItemStyle-Width="15%">
          <ItemStyle Wrap="false" CssClass="addTooltyp TypeRadComboBox"   />
          <ItemTemplate>
            <label id='GridComboBoxValue' tag='<%#SafeEval( Container.DataItem, "PROJECT_ID")%>'><%#SafeEval( Container.DataItem, "PROJECT_NAME")%></label>
          </ItemTemplate>
          <EditItemTemplate>
            <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="GCB_Project" ShowMoreResultsBox="true" EnableVirtualScrolling="true"
              EnableLoadOnDemand="true" Width="100%" Height="300" ItemsPerRequest="10" DropDownAutoWidth="Enabled" ItemRequestTimeout="800"
              DataTextField="PROJECT_FULL_NAME" DataValueField="PROJECT_ID"
               AllowCustomText="false" MarkFirstMatch="true"
              OnItemsRequested="Combobox_ItemsRequested"
              OnClientItemsRequesting="ComboBoxOnClientItemsRequesting"
              OnClientFocus="CBOnClientFocus" OnClientBlur="OnClientBlurHandler"
              >
            </telerik:RadComboBox>
             <asp:CustomValidator ID="ProjectValidator" runat="server"  EnableClientScript="true" ClientValidationFunction="DropdownValidatorFun"
                ControlToValidate="GCB_Project"  >
             </asp:CustomValidator>
          </EditItemTemplate>
        </telerik:GridTemplateColumn>

 

Thank you. 

[Attila Antal]

Hi Igor,

BatchEdit is a client-side (JavaScript) editing functionality of the Grid. Having that in mind, any PostBack would interrupt its progress and changes will be lost, see Batch Editing - Documentation and the RadGrid Batch Editing Templates and Specifics. The article mentions that: "Once a postback to the server has been initiated, the user input cannot be restored in the browser. This can result in loss of data. To minimize this, use client-side validation and cancel the OnUserAction or OnCommand event in case of the batch editing manager hasChanges() on the client."

To manipulate the Grid with batch editing, use the client-side APIs described in the Batch Editing Client-side API article. More specifically, the method you are looking for is "changeCellValue(cell, newValue)".

Here is an example

One textbox for user input and button that will call a JavaScript function to change the Grid cell value.

<telerik:RadTextBox ID="RadTextBox2" runat="server"></telerik:RadTextBox>
<telerik:RadButton runat="server" ID="RadButton1" Text="Change Cell Value" AutoPostBack="false" OnClientClicked="OnClientClicked" />

 

JavaScript - function to change the cell value

function OnClientClicked(sender, args) {
    var textbox = $find('<%= RadTextBox2.ClientID %>');
    var textboxValue = textbox.get_textBoxValue();

    var grid = $find('<%= RadGrid1.ClientID %>');
    var batMan = grid.get_batchEditingManager();
    var dataItem = grid.get_masterTableView().get_dataItems()[0];
    var cell = dataItem.get_cell("ShipCountry");
    batMan.changeCellValue(cell, textboxValue);
}

 

RadGrid markup

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource"
    OnBatchEditCommand="RadGrid1_BatchEditCommand">
    <MasterTableView AutoGenerateColumns="False" EditMode="Batch" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridTemplateColumn DataField="ShipCountry" HeaderText="ShipCountry" UniqueName="ShipCountry">
                <ItemTemplate>
                    <%# Eval("ShipCountry") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

Server-Side code for binding data and setting a Label's Text. In the BatchEditCommand extract the new values, see Batch Editing Server-side API

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = Enumerable.Range(1, 1).Select(x => new { ShipCountry = "Country " + x });
}

protected void RadGrid1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
{
    foreach (var command in e.Commands)
    {
        Hashtable newValues = command.NewValues;

        if (newValues["ShipCountry"] != null && !string.IsNullOrEmpty(newValues["ShipCountry"].ToString()))
        {
            Label1.Text = string.Format("Value presented in the BatchEditCommand was: <b>{0}</b>", newValues["ShipCountry"].ToString());
        }
    }
}

 

Finally, place the label anywhere on the page

<asp:Label ID="Label1" runat="server"></asp:Label>

 

Kind regards,
Attila Antal
Progress Telerik