Radiobuttonlist in GridTemplateColumn

[Ed]

Hello,

I have a RadioButtonList in a  GridTemplateColumn EditItemTemplate and a normal label in the ItemTemplate. All works fine when the grid EditMode is set to  InPlace. When I set the EditMode to Batch and click on a cell, the RadioButtonList is not set to the db value. If I click on a selection, and move to another cell, it doesn't see that the cell has changes at all. Also, after selecting an option on the first one, all other RadioButtonLists are set to that selection when editing every other row.

Is there something that need to be done in the ItemDataBound event or somewhere else? I've been searching the forums, but didn't see anything about batch updating and RadioButtonLists.

 

Thank you​

 

[Konstantin Dikov]

Hi,

RadioButtonList is not supported with Batch Editing out-of-the-box, due to the control's specifics and the only possible way for integrating that control with Batch Editing is to handle the four Batch events for settings and getting the values to and from the cells. Detailed information and example for such customization could be found in the following help article, section "Handling Complex Templates":

• RadGrid - Batch Editing

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Ed]

Thanks for the info. I seems to be half way there. I can set the radiobutton list to the value of the field upon enter/edit the cell, but when I select a different value, it doesn't take it and sets it back to the original value and doesn't see any change to that cell. Javascript is not my strong suit. I tried putting a Textbox in the template column along with the radiobuttonlist and am able to set this to the selected value. I'm not sure how all of these functions work in relation to all of this, so I'm sure I'm missing some code. 

Here is the javascript code that I;ve modified so far:

 function GetCellValue(sender, args) {
    if (args.get_columnUniqueName() === "session")
    {
        args.set_cancel(true);
        var container = args.get_container();
        var sessionvalue = $telerik.findElement(container, "sessionLabel").innerHTML;
        args.set_value(sessionvalue);
    }
}

function SetCellValue(sender, args) {
    if (args.get_columnUniqueName() === "session") 
    {
        args.set_cancel(true);
        var container = args.get_container(),
        value = args.get_value(),
    }
}

function GetEditorValue(sender, args) {
    if (args.get_columnUniqueName() === "session")
    {
        args.set_cancel(true);
    }
}

function SetEditorValue(sender, args) {
    if (args.get_columnUniqueName() === "session") 
    {
        args.set_cancel(true);
        var session = args.get_value()
        var container = args.get_container();
        var sessionTxtbx = $telerik.findElement(container, "sessionTxtbx");
        sessionTxtbx.value = args.get_value()

        var sessionrbl = $telerik.findElement(container, "sessionRBL");
        var radioButtons = sessionrbl.getElementsByTagName('input');

        if (radioButtons[0].value == session) 
        {
            radioButtons[0].checked = true
        }
        else if (radioButtons[1].value == session) 
        {
            radioButtons[1].checked = true
        }
        else if (radioButtons[2].value == session) 
        {
            radioButtons[2].checked = true
        }
        else 
        {
            radioButtons[0].checked = false
            radioButtons[1].checked = false
            radioButtons[2].checked = false
        }
    }
}

 

[Konstantin Dikov]

Hello,

Without having the markup of your GridTemplateColumn it would be difficult to determine all the issues with your current implementation. However, below is a simple example demonstrating how to handle the RadioButtonList in the EditItemTemplate:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function setEditorValue(sender, args) {
            args.set_cancel(true);
            var value = args.get_value();
            var buttonList = $telerik.findElement(args.get_cell(), "RadioButtonList1");
            var items = $(buttonList).find("input");
            for (var i = 0; i < items.length; i++) {
                if (items[i].value == value) {
                    items[i].checked = true;
                }
                else {
                    items[i].checked = false;
                }
            }
        }

        function getEditorvalue(sender, args) {
            args.set_cancel(true);
            var buttonList = $telerik.findElement(args.get_cell(), "RadioButtonList1");
            var items = $(buttonList).find("input");
            for (var i = 0; i < items.length; i++) {
                if (items[i].checked) {
                    args.set_value(items[i].value);
                    break;
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView EditMode="Batch" AutoGenerateColumns="false">
        <Columns>
            <telerik:GridTemplateColumn UniqueName="session">
                <ItemTemplate>
                    <%# Eval("session") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:RadioButtonList runat="server" ID="RadioButtonList1">
                        <asp:ListItem Text="item1"></asp:ListItem>
                        <asp:ListItem Text="item2"></asp:ListItem>
                        <asp:ListItem Text="item3"></asp:ListItem>
                    </asp:RadioButtonList>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnBatchEditSetEditorValue="setEditorValue" OnBatchEditGetEditorValue="getEditorvalue" />
    </ClientSettings>
</telerik:RadGrid>

And the dummy data:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("session", typeof(string));

    table.Rows.Add(1, "item1");
    table.Rows.Add(2, "item2");
    table.Rows.Add(3, "item3");

    (sender as RadGrid).DataSource = table;
}

As you can notice, if the ItemTemplate contains only the value, you can override only the Get/Set EditorValue methods.

Hope this helps.


Regards,
Konstantin Dikov
Telerik