[CLOSED] Enabling the text field inside the gridpanel on check box selection

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Enabling the text field inside the gridpanel on check box selection

    Hi,

    I have a grid panel with checkbox selection model. On page load I will have few of the check box selected with the rows enabled respectively.
    I have a text field inside the grid panel which will be disabled for the unchecked check boxes.
    My requirement is to enable the text field on the checking the unchecked check box.

    Click image for larger version. 

Name:	checkBoxSelectionModel.PNG 
Views:	13 
Size:	26.5 KB 
ID:	23933
    Last edited by Daniil; May 05, 2015 at 3:30 PM. Reason: [CLOSED]
  2. #2
    Hi @arjunrvasisht,

    For initial state, I would try to use a ComponentColumn's BeforeBind handler. Here is a pseudo-code. You should replace "selected" with a real check if `e.record` is selected or not.
    Handler="if (!selected) { e.config[0].disabled = true; }"
    As for changing a disability state on the fly, I would recommend to listen to a selection model's Deselect event handler and
    componentColumn.getComponent(deselectedRecord).disable();
    And opposite in a Select event handler.
  3. #3
    Hi Daniil,

    For disabling the text field I have used listeners render property. Below is the runnable test case. Using render I will be disabling each and every column.
    I could not use Component columns Beforebind event. And also deselect event for enabling the the text field. Can you update my existing code with those properties. I want the 'Company' and 'Change' columns also to be enabled and disabled as per the check box selection.

    <%@ Page Language="C#" AutoEventWireup="true"  %>
    
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new List<Company> 
                { 
                    new Company(0, "3m Co", 71.72, 0.02, 0.03),
                    new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
                    new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
                    new Company(3, "American Express Company", 52.55, 0.01, 0.02),
                    new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
                    new Company(5, "AT&T Inc.", 31.61, -0.48, -1.54),
                    new Company(6, "Boeing Co.", 75.43, 0.53, 0.71),
                    new Company(7, "Caterpillar Inc.", 67.27, 0.92, 1.39),
                    new Company(8, "Citigroup, Inc.", 49.37, 0.02, 0.04),
                    new Company(9, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                    new Company(10, "Exxon Mobil Corp", 68.1, -0.43, -0.64),
                    new Company(11, "General Electric Company", 34.14, -0.08, -0.23),
                    new Company(12, "General Motors Corporation", 30.27, 1.09, 3.74),
                    new Company(13, "Hewlett-Packard Co.", 36.53, -0.03, -0.08)
                };
    
                if (!this.IsPostBack)
                {
                    RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
    
                    sm.SelectedRows.Add(new SelectedRow(1));
                    sm.SelectedRows.Add(new SelectedRow(3));
                    sm.SelectedRows.Add(new SelectedRow(5));
                    sm.SelectedRows.Add(new SelectedRow(7));
                    sm.SelectedRows.Add(new SelectedRow(9));
                    sm.SelectedRows.Add(new SelectedRow(11));
                    sm.SelectedRows.Add(new SelectedRow(13));
                }
            }
        }
    
    
    
        public class Company
        {
            public Company(int id, string name, double price, double change, double pctChange)
            {
                this.ID = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with Checkbox Selection Model - Ext.NET Examples</title>
    
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            function disablePrice(field, columnValueCSS) {
                
                var abc = this;
                if ((field.record.data.ID % 2) == 0) {
                    abc.disable();
                }
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <h1>GridPanel with Checkbox Selection Model</h1>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Company List"
                Collapsible="true"
                Width="600">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Price" />
                                    <ext:ModelField Name="Change" />
                                    <ext:ModelField Name="PctChange" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1"
                            runat="server"
                            Text="Company"
                            Width="160"
                            DataIndex="Name"
                            Resizable="false"
                            MenuDisabled="true"
                            Flex="1" />
    
                        <%--  <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>--%>
    
                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="Change">
                            <Renderer Fn="change" />
                        </ext:Column>
                       
                        <ext:ComponentColumn ID="ComponentColumn2" runat="server" Editor="true" DataIndex="Price" Width="295" Text="Price">
    
                            <Component>
                                <ext:TextField ID="TextField2" runat="server">
                                    <Listeners>
                                        <Render Fn="disablePrice"></Render>
                                    </Listeners>
                                </ext:TextField>
    
                            </Component>
    
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
                </SelectionModel>
            </ext:GridPanel>
    
            <div style="width: 590px; border: 1px solid gray; padding: 5px;">
                <ext:Label ID="Label1" runat="server" />
            </div>
        </form>
    </body>
    </html>
  4. #4
    From the performance point of view it is better to configure a component before rendering, if possible. In your scenario it is possible with a BeforeBind event:
    <ext:ComponentColumn ...>
        <Component>
            <ext:TextField runat="server" />
        </Component>
        <Listeners>
            <BeforeBind Fn="disablePrice" />
        </Listeners>
    </ext:ComponentColumn>
    var disablePrice = function (column, e) {
        if ((e.record.data.ID % 2) == 0) {
            e.config[0].disabled = true;
        }
    }
    And also deselect event for enabling the the text field.
    Please demonstrate how you have attempted.
  5. #5
    Hi Daniil,

    I used the code u have given for disabling during the page load. But for enabling back the text field when the check box is selected, i am finding it difficult to use this piece of code componentColumn.getComponent(deselectedRecord).disable();.

    <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" >
                        <Listeners>
                            <Select Fn="enablePrice"></Select>
                        </Listeners>
                    </ext:CheckboxSelectionModel>
                    
                </SelectionModel>
    Checkbox selection model, inside that i have listener with Select handler and a function. How do i use the above piece of code inside this function.
    Last edited by Daniil; Apr 28, 2015 at 12:48 PM.
  6. #6
    Based on your requirement and to make things a lot simpler here is another option that I think suits your needs:

    http://forums.ext.net/showthread.php...l=1#post271745

    In your case, return true from the BeforeEdit handler if the checkbox is selected.

    Hope it helps.
  7. #7
    HI Dimitris,

    As per the example u have provided, once the checkbox is checked it becomes locked and the user cannot uncheck it. But thats not my requirement.
    I have a text field inside the grid, that has to be enabled and disabled based on the checkbox's check and uncheck.
  8. #8
    Sorry, I don't understand this:
    <Select Fn="enablePrice"></Select>

    You should define a new JavaScript function or use a Select's Handler. I would recommend to read the Listeners section here:
    http://ext.net/introduction-to-ext-net-events
  9. #9
    That is the javascript function am calling on Checkbox selection. Once the checkbox is selected I want the Textfield to be enabled.
    In the previous replies you have given one line of code for enabling/disabling on select/deselect event : componentColumn.getComponent(deselectedRecord).dis able();

    var enablePrice = function (column, e) {
                componentColumn.getComponent(deselectedRecord).disable();
            }
    I have blindly put that piece of code inside a function. It is throwing error saying componentColumn is undefined. Can u please tell me how do I use that component column property.
  10. #10
    As per the example u have provided, once the checkbox is checked it becomes locked and the user cannot uncheck it. But thats not my requirement.
    Yes, what I suggested was to use the BeforeEdit event only. You should ignore use of BeforeDeselect.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Enabling button on item selection - combobox
    By wisdomchuck in forum 1.x Premium Help
    Replies: 4
    Last Post: Jun 26, 2012, 1:23 PM
  2. Replies: 0
    Last Post: Dec 28, 2011, 9:30 AM
  3. Replies: 2
    Last Post: Mar 21, 2010, 1:18 PM
  4. [CLOSED] GridPanel Cell click and check box selection
    By speedstepmem2 in forum 1.x Premium Help
    Replies: 7
    Last Post: Jul 24, 2009, 7:55 AM
  5. Check box selection in Gridpanel using version 0.8
    By speedstepmem3 in forum 1.x Help
    Replies: 0
    Last Post: Jun 04, 2009, 1:02 AM

Tags for this Thread

Posting Permissions