Radiobuttonlist in GridTemplateColumn

4 posts, 0 answers
  1. Ed
    Ed avatar
    2 posts
    Member since:
    Apr 2010

    Posted 12 Jun 2015 Link to this post

    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​

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 17 Jun 2015 Link to this post

    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":
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Ed
    Ed avatar
    2 posts
    Member since:
    Apr 2010

    Posted 23 Jun 2015 Link to this post

    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
            }
        }
    }

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 26 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top