Update GridBoundColumn Client

[SDI]

Hello Telerik,

I have a non-editable RadGrid (say Grid1) with some columns. I have another grid (say Grid2) on the page which should update a hidden field (GridBoundColumn) in Grid1 when the item template asp:checkbox is clicked. The whole Grid1 should persist back to the server on another button for saving the changes, not a row at time, or after every check of Grid2. How can this be achieved in Javascript? I cant seem to find the correct syntax for the datagrid items to write to it on Grid1. The innerHTML doesnt persist back, so I cant use that. This seems like a simple thing, but the documentation doesnt show enough help for the grid items properites. Maybe I can attach and attribute to each row of Grid1 and update the attribute value. But I dont see any syntax again in the documentation. Can you please point me in the right direction? And if this is missing from the documentation please update it.

Here is the code:

Grid1:

    <telerik:RadGrid runat="server" ID="RadGridBoardPositionLink" AllowMultiRowSelection="false">
        <MasterTableView DataKeyNames="BoardPositionId" ClientDataKeyNames="BoardPositionId, ProgramLink, GroupLink" AutoGenerateColumns="false" TableLayout="Fixed" NoMasterRecordsText="You do not have any board positions created" CommandItemDisplay="Top">
        <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" />
        <CommandItemTemplate>
            <asp:Panel runat="server" CssClass="CommandItemPanel">
                <telerik:RadButton runat="server" ID="RadButtonSaveBoardPositionLink" Text="Save"/>
            </asp:Panel>
        </CommandItemTemplate>
        <Columns>
                <telerik:GridBoundColumn DataField="BoardPositionID" DataType="System.Int64" UniqueName="BoardPositionID" Display="false" />
                <telerik:GridBoundColumn DataField="ApplicationId" DataType="System.Int64" UniqueName="ApplicationId" Display="false" />
                <telerik:GridBoundColumn DataField="ProgramLink" DataType="System.String" UniqueName="ProgramId" Display="false" />
                <telerik:GridBoundColumn DataField="GroupLink" DataType="System.String" UniqueName="GroupLink" Display="false" />
                <telerik:GridBoundColumn DataField="ProgramId" DataType="System.Int64" UniqueName="ProgramId" Display="false" />
                <telerik:GridBoundColumn DataField="Name" DataType="System.String" HeaderText="Position Name" UniqueName="Name" ItemStyle-Width="25%" HeaderStyle-Width="25%" />
            </Columns>
        </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowSelected="RowSelectedRadGridBoardPositionLink"/>
    </ClientSettings>
</telerik:RadGrid>

Grid2:

<telerik:RadGrid runat="server" ID="RadGridProgramsLink" AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false" AllowMultiRowSelection="true">
    <MasterTableView DataKeyNames="ProgramId" ClientDataKeyNames="ProgramId" CommandItemDisplay="None" AutoGenerateColumns="false" TableLayout="Fixed">
        <Columns>
            <telerik:GridTemplateColumn HeaderStyle-Width="20px" ItemStyle-Width="20px">
                <ItemTemplate>
                    <asp:CheckBox runat="server" ID="CheckboxProgramCheck" AutoPostBack="false" Onclick="OnCheckedCheckBoxProgram(this);" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="ProgramId" DataType="System.Int64" UniqueName="ProgramId" Display="false" />
            <telerik:GridBoundColumn DataField="Name" DataType="System.String" UniqueName="Name" HeaderText="Program Name" HeaderStyle-Width="150px" ItemStyle-Width="150px" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

OnClick event for Grid2

function OnCheckedCheckBoxProgram( sender )
{
if ( myRowSelectedBoardPositionLink == 0 )
{
radalert( "You need to select a position to assign program(s)", 400, 100, "Assign Program", null );
return false;
 }

// assign it to the attribute of the selected position record
AssignProgramId();
}

This string is created and needs to be written to Grid1, at the end of the function it writes it out, but how?

function AssignProgramId()
{
    // selected row of the Board Position to edit the ProgramId attribute
    var myCheckbox;
    var myString = "";
    var myMasterTable = $find( "<%= RadGridProgramsLink.ClientID %>" ).get_masterTableView();

    // build the array and store back in the SelectedRow - BoardPosition table
    for ( var i = 0; i < myMasterTable.get_dataItems().length; i++ )
    {
        myCheckbox = myMasterTable.get_dataItems()[i].findElement( "CheckboxProgramCheck" );
        if ( myCheckbox.checked )
        {
            myString = myString + myMasterTable.get_dataItems()[i].getDataKeyValue( 'ProgramId' ) + "|";
        }
    }

    myMasterTable = $find( "<%= RadGridBoardPositionLink.ClientID %>" ).get_masterTableView();

// ***** CODE HERE FOR WRITTING TO THE SELECTED ROW ProgramLink COLUMN ******

}

Thanks a ton!
SDI

[Radoslav]

Hello Brian,

Please check out the following online example, which demonstrates how to edit the RadGrid client side with batch server update:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx
In your case you could show editors into the second grid’s cells only when the checkbox from the corresponding first grid’s row is checked.

I hope this helps.

Kind regards,
Radoslav
the Telerik team

[SDI]

Radoslav,

Thanks for the information. The batch update process will be useful once it is sent to the server. However I think its a little backwards. Both of the Grids and the TreeView can not be edited. Grid2 and the TreeView are checkable which should update a hidden cell in Grid1. Grid1 is only select-able, so we know which row to write to when any of the checks are unchecked/checked from Grid2 and the TreeView.

I have code to check/uncheck each column in Grid2 and the appropriate TreeView node when a row is selected (not checked or edited) in Grid1. However I do not know the JavaScript code to write back to the selected row cell in Grid1, when rows/nodes are being checked/unchecked from the Grid2 and the TreeView. Grid1 would then be posted back to the server on the Save button click and the hidden cell values would be written to our datasource. 

Does this help you understand our dilemma better?

Thanks for the wonderful support, Telerik!
SDI

[Radoslav]

Hi Brian,

You could try using the RadGrid and MasterTableView client side APIs in order to achieve the desired functionality. You could get all selected items from the RadGrid1 by using the get_selectedItems() function. Also you could iterate over these items and find the hidden fields into them by using the findElement or findControl function. Then you could update them and after postback to the server to get updated values.

Please give it try and let me know if you experience any problems.

Regards,
Radoslav
the Telerik team