What's New?

[CLOSED] Problem with TemplateColumn

  1. #1
    Nov 29, 2010, 10:20 AM

    [CLOSED] Problem with TemplateColumn

    Goodmorning,
    I want to use my tri-state checkbox in a GridPanel, I have attached the code example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WFConfigIngressi.aspx.cs" Inherits="TestGoogleMaps.WFConfigIngressi" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/tristate-0.9.2.js" ></script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <div>
      <ext:GridPanel ID="gpIngressi" runat="server" AutoHeight="True" Title="Title">
        <Store>
          <ext:Store ID="stGpIngressi" runat="server" GroupField="dePeriferica" >
              <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="cdPeriferica" />
                        <ext:RecordField Name="dePeriferica" />
                        <ext:RecordField Name="tipoIngresso" />
                        <ext:RecordField Name="cdIngresso" />
                        <ext:RecordField Name="cdNrDato" />
                        <ext:RecordField Name="deIngresso" />
                        <ext:RecordField Name="checkValue" />
                        <ext:RecordField Name="idRow" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <SortInfo Field="dePeriferica" Direction="ASC" />
          </ext:Store>
        </Store>
        <ColumnModel ID="cmGpIngressi" runat="server">
            <Columns>
                <ext:Column DataIndex="cdPeriferica" Header="cdPeriferica" Hidden="true" />
                <ext:Column DataIndex="dePeriferica" Header="<b>Periferica</b>" Width="275px" />
                <ext:Column DataIndex="tipoIngresso" Header="tipoIngresso" Hidden="true" />
                <ext:Column DataIndex="cdIngresso" Header="cdIngresso" Hidden="true" />
                <ext:Column DataIndex="cdNrDato" Header="cdNrDato" Hidden="true" />
                <ext:Column DataIndex="deIngresso" Header="<b>Ingresso/Registro</b>" Width="275px" />
               <ext:TemplateColumn DataIndex="checked" Header="CustomCol" Fixed="true" Sortable="false" ColumnID="checkCol" MenuDisabled="true" Width="65px">
                 <Template runat="server" >
                   <Html>
                      <span id="tristateBox{idRow}" style="cursor: default;">
                     <input type="hidden" id="tristateBox{idRow}State" name="tristateBox{idRow}State" value="{checkValue}"/> 
                    </span>
                    <script type="text/javascript">
                      initTriStateCheckBox('tristateBox{idRow}', 'tristateBox{idRow}State', true);
                     </script>
                   </Html>
                 </Template>
               </ext:TemplateColumn>
            </Columns>
        </ColumnModel>
        <LoadMask ShowMask="true" />
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
        </SelectionModel>
        <View>
            <ext:GroupingView  
                ID="GroupingView1"
                HideGroupedColumn="true"
                runat="server" 
                ForceFit="true"
                StartCollapsed="true"
                GroupTextTpl='<span id="periferica_{[values.rs[0].data.cdPeriferica]}"></span>{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Ingressi" : "Ingresso"]})'
                EnableRowBody="true">
            </ext:GroupingView>
        </View>
      </ext:GridPanel>
    </div>
    </form>
</body>
</html>
    Please help me.

    Jimmy
    Last edited by Daniil; Nov 30, 2010 at 10:31 AM. Reason: [CLOSED]
  2. #2
    Nov 29, 2010, 11:25 AM
    Hi,

    Please provide 'tristate-0.9.2.js'
  3. #3
    Nov 29, 2010, 12:18 PM
    I have attached the file.
    Attached Files
  4. #4
    Nov 29, 2010, 2:58 PM
    Hi,

    The TemplateColumn is not useful in this case because a markup is not rendered yet when the initTriStateCheckBox() function is executed.

    The substitution of TemplateColumn can be a common Column with custom Renderer.

    Please try something like this:

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] {"id1", true},
                new object[] {"id2", false},
                new object[] {"id3", true}
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript" src="Scripts/tristate-0.9.2.js"></script>

    <script type="text/javascript">
        var myRenderer = function(value, record) {
            var html = [],
                idRow = record.get('idRow'); ;
            html.push('<span id="tristateBox' + idRow + '" style="cursor: default;">');
            html.push('<input type="hidden" id="tristateBox' + idRow + 'State" name="tristateBox' + idRow + 'State"');
            html.push('value="' + value + '"/>');
            html.push('</span>');

            if (!record.executed) {
                initTriStateCheckBox.defer(100, this, ['tristateBox' + idRow, 'tristateBox' + idRow + 'State', true]);
                record.executed = true;
            }

            return html.join("");
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="idRow" />
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="id" DataIndex="idRow" />
                <ext:Column Header="Test" DataIndex="test">
                    <Renderer Handler="return myRenderer(value, record);" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>
  5. #5
    Nov 30, 2010, 10:19 AM
    Hi Danil,
    I use your solution, it is perfect.
    Thank you very much.

    Jimmy

Similar Threads

  1. TemplateColumn creating issue on Grid updating.
    By swed in forum 1.x Help
    Replies: 7
    Last Post: Jun 29, 2012, 1:22 PM
  2. Adding Dropdown box to TemplateColumn of GridPanel
    By Mrityunjay in forum 2.x Help
    Replies: 0
    Last Post: Jun 19, 2012, 9:41 AM
  3. [CLOSED] TemplateColumn Click Not Registering
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 14, 2011, 12:24 PM
  4. [CLOSED] Embedding server tags in TemplateColumn
    By pj_martins in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 30, 2011, 1:39 PM
  5. [CLOSED] Renderer on a TemplateColumn: not working
    By capecod in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 11, 2010, 12:34 AM

Tags for this Thread

Posting Permissions