Completed
Last Updated: 20 Jan 2022 12:26 by ADMIN
CHicksUS
Created on: 22 Aug 2017 12:45
Category: Kendo UI for jQuery
Type: Feature Request
1
Custom toggle radio ASP.NET AJAX to Kendo MVC
I'm trying to move my ASP.NET AJAX to Kendo MVC, but there is one way to customize the radioButton that doesn't translate to Kendo.  A picture/video would be more descriptive, but I'll just sent the html as that's my only option.  It toggles the multiple choices for the radio button, very intuitive for the user...  It would be nice to be able to do this on the Kendo side as well.
:
                    <telerik:GridTemplateColumn HeaderText="Fld1" HeaderStyle-Width="130px" UniqueName="tmpFld1" >
                        <ItemTemplate>
                            <telerik:RadButton ID="rbFld1" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Checked="false" OnClientToggleStateChanged="toggleStateChanged" DataField="Fld1" >
                                <ToggleStates>
                                    <telerik:RadButtonToggleState Text="Not Reviewed" PrimaryIconCssClass="rbToggleCheckbox" Selected="false" Value="-1" />
                                    <telerik:RadButtonToggleState Text="No" PrimaryIconCssClass="rbToggleCheckbox" Selected="false" Value="0" />
                                    <telerik:RadButtonToggleState Text="Yes" PrimaryIconCssClass="rbToggleCheckboxChecked" CssClass="rbSkinnedButtonChecked" Value="1"/>
                                </ToggleStates>
                            </telerik:RadButton>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadButton ID="rbFld2" runat="server" ToggleType="CustomToggle" ></telerik:RadButton>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript" >
            var isToggle = false;
            function toggleStateChanged(sender, args) {
                var grid = $find("<%= RadGrid1.ClientID %>");
                var masterTableView = grid.get_masterTableView();
                var batchEditingManager = grid.get_batchEditingManager();
                var parentCell = $telerik.$(sender.get_element()).closest("td")[0];

                isToggle = true;
                // Update if initial value changed
                var isChecked = args.get_currentToggleState().get_value() === "-1";
                batchEditingManager.changeCellValue(parentCell, !isChecked);
            }

            function batchEditOpening(sender, args) {
                // this prevents opening of the cell if the user clicks outside the RadButton
                if (!isToggle && args.get_columnUniqueName() === "tmpFld1") {
                    args.set_cancel(true);
                }
                else {
                    isToggle = false;
                }
            }
        </script>
    </telerik:RadCodeBlock>
1 comment
ADMIN
Angel Petrov
Posted on: 20 Jan 2022 12:26

Hello,

We do have a radio button now and the column supports templates so the desired behavior should be achievable.

Regards,
Angel Petrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.