EnableClientSelectedItem on Client Side

[Rodney]

I have a grid with a ClientSelectedItem column and an item template column with a 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

[Eyup]

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

[Rodney]

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.

[Marin Bratanov]

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

[Rodney]

Thank you. This works perfectly.

Rodney