EnableClientSelectedItem on Client Side

5 posts, 0 answers
  1. Rodney
    Rodney avatar
    54 posts
    Member since:
    Mar 2015

    Posted 03 Mar 2017 Link to this post

    I have a grid with a ClientSelectedItem column and an item template column with a dropdown list in it. When the page loads the ClientSelectedItem is disabled. I want to enable it client side when a value is selected in the dropdown, or change it back to disabled if they change the selection in the dropdown back to nothing. Here's the column section of the grid.

    <Columns>
        <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="47px" />
        <telerik:GridBoundColumn DataField="CaseId" UniqueName="CASEID" Visible="false" />
        <telerik:GridTemplateColumn UniqueName="FIRSTLASTNAMES" ShowFilterIcon="false" DataField="FIRSTLASTNAMES"
            SortExpression="FIRSTLASTNAMES" HeaderText="Soldier" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"
            HeaderStyle-Width="150px">
            <ItemTemplate>
                <asp:LinkButton ID="lnkBtnName" runat="server" Text='<%# Eval("FIRSTLASTNAMES") %>' CommandArgument='<%# Eval("CASEID") %>'
                    CommandName="Popup" />
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn UniqueName="SSN" HeaderText="SSN" DataField="SSN" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" HeaderStyle-Width="50px" />
        <telerik:GridBoundColumn UniqueName="COMPANYNAME" HeaderText="CO" DataField="CompanyName" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" HeaderStyle-Width="30px" />
        <telerik:GridBoundColumn UniqueName="PLATOON" HeaderText="PLT" DataField="PLATOON" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" HeaderStyle-Width="30px" />
        <telerik:GridBoundColumn UniqueName="SQUADRON" HeaderText="SQD" DataField="SQUADRON" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" HeaderStyle-Width="30px" />
        <telerik:GridBoundColumn UniqueName="CDR" HeaderText="CDR" DataField="CDR" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
        <telerik:GridBoundColumn UniqueName="SW" HeaderText="SW" DataField="SW" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
        <telerik:GridBoundColumn UniqueName="OT" HeaderText="OT" DataField="OT" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
        <telerik:GridBoundColumn UniqueName="NCM" HeaderText="NCM" DataField="NCM" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
        <telerik:GridBoundColumn UniqueName="PSG" HeaderText="PSG" DataField="PSG" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
        <telerik:GridBoundColumn UniqueName="SL" HeaderText="SL" DataField="SL" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
        <telerik:GridTemplateColumn UniqueName="SLSelection" ShowFilterIcon="false" DataField="SL"
            SortExpression="SL" HeaderText="Select SL" Visible="true">
            <ItemTemplate>
                <telerik:RadDropDownList ID="ddlSelectedSqdLdr" runat="server" Width="100" OnClientItemSelected="modifySelection" DefaultMessage="Select...">
                </telerik:RadDropDownList>
                <asp:HiddenField ID="tranferCaseId" runat="server" Value='<%# Eval("CASEID") %>' />
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn UniqueName="TC" HeaderText="TC" DataField="TC" ShowFilterIcon="false"
            DataType="System.String" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
    </Columns>

     

    Thanks

    Rodney

  2. Eyup
    Admin
    Eyup avatar
    4030 posts

    Posted 08 Mar 2017 Link to this post

    Hi,

    You can achieve this requirement using the following approach:
    <telerik:GridTemplateColumn UniqueName="SLSelection" ShowFilterIcon="false" DataField="SL"
        SortExpression="SL" HeaderText="Select SL" Visible="true">
        <ItemTemplate>
            <telerik:RadDropDownList ID="ddlSelectedSqdLdr" runat="server" Width="100"
                OnClientItemSelected='<%# "function(s,a){modifySelection(s,a,"+Container.ItemIndex+");}" %>'
                DefaultMessage="Select...">
                <Items>
                    <telerik:DropDownListItem Text="1" Value="1" />
                    <telerik:DropDownListItem Text="2" Value="SomeValue" />
                </Items>
            </telerik:RadDropDownList>
            <asp:HiddenField ID="tranferCaseId" runat="server" Value='<%# Eval("OrderID") %>' />
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    JavaScript:
    function modifySelection(sender, args, index) {
        if (args.get_item().get_value() == "SomeValue") {
            var tableView = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
            var item = tableView.get_dataItems()[index];
            item._selectable = true;
            var checkBox = item.findElement("SelectColumnNameSelectCheckBox");
            checkBox.disabled = false;
        }
    }

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rodney
    Rodney avatar
    54 posts
    Member since:
    Mar 2015

    Posted 11 May 2017 in reply to Eyup Link to this post

    This worked, but they have changed the requirement and I am unclear on how to proceed. Based on the original HTML above, when the page loads they want the ClientSelected column unchecked and the ItemTemplateColumn with the DropDownList disabled. When they click on the ItemSelected check box they want me to enable the DropDownList and of corse disable it when if the column is unchecked.

    I would appreciate any help you can provide.

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5623 posts

    Posted 16 May 2017 Link to this post

    Hi Rodney,

    You can use the grid events related to row selection / deselection in order to get which is the item, traverse the DOM to get the dropdown and enable/disable it.

    Here is a basic example:

    <telerik:RadGrid runat="server" ID="rg1" OnNeedDataSource="rg1_NeedDataSource" AutoGenerateColumns="false" RenderMode="Lightweight">
        <MasterTableView>
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn"></telerik:GridClientSelectColumn>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <telerik:RadDropDownList runat="server" ID="rddl1" Enabled="false" CssClass="myDropDown">
                            <Items>
                                <telerik:DropDownListItem Text="first" />
                                <telerik:DropDownListItem Text="second" />
                            </Items>
                        </telerik:RadDropDownList>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true" />
            <ClientEvents OnRowDeselected="toggleDdl" OnRowSelected="toggleDdl" />
        </ClientSettings>
    </telerik:RadGrid>
    <script>
        function toggleDdl(sender, args) {
            var dataItem = args.get_gridDataItem();
            var shouldEnable = dataItem.get_selected();
            //traverse the DOM to get the client-side object of the dropdown and use its API
            $telerik.$(dataItem.get_element()).find(".myDropDown").each(function (index, elem) {
                if (elem && elem.control && elem.control.set_enabled) {
                    elem.control.set_enabled(shouldEnable);
                }
            });
        }
    </script>
    protected void rg1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        (sender as RadGrid).DataSource = "abcd";//a bad data source, but will suffice for the example
    }
     

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Rodney
    Rodney avatar
    54 posts
    Member since:
    Mar 2015

    Posted 16 May 2017 in reply to Marin Bratanov Link to this post

    Thank you. This works perfectly.

    Rodney

Back to Top