What's New?

[CLOSED] gridpanel question

  1. #1
    Jun 09, 2011, 3:17 PM

    [CLOSED] gridpanel question

    I am using a gridpanel and a triggerfield to perform a dynamic search facility, ie as you type in the triggerfield the contents of the grid update accordingly.
    My question is this. I would like to highlight rows from the results in the gridpanel in response to UP/DOWN presses of the arrow keys in the triggerfield. then if the users hits enter select the highlighted row. But also retain the row select event in the gridpanel if the user clicks on a row using the mouse.

    Is there a way of highlighting a row without the row select firing?
    Or is there a way of using the existing 'select row' methods but without the select row event firing?
    Remember I still want to retain the select event on mouse click.

    On my page I have this grid panel:

    <ext:GridPanel  HideHeaders="true" trackmouseover="true"
                                            ID="grdQuickSearch"
                                            runat="server" Width="190" Height="275" 
                                            AutoExpandColumn="colSearchItem">
                                <store>
                                    <ext:Store runat="server" ID="strQuickSearch" AutoLoad="true" RemoteGroup="true" RemoteSort="true" RemotePaging="true" OnRefreshData="strQuickSearch_Refresh">
                                        <AutoLoadParams>
                                   <ext:Parameter Name="start" Value="0" Mode="Raw"></ext:Parameter>
                                   <ext:Parameter Name="limit" Value="9" Mode="Raw"></ext:Parameter>
                                  </AutoLoadParams>
                                  <Proxy>
                                   <ext:PageProxy />
                                  </Proxy>
                                        <Reader>
                                            <ext:JsonReader IDProperty="DataIndex">
                                                <Fields>
                                                    <ext:RecordField Name="DataIndex" Type="Int"></ext:RecordField>
                                                    <ext:RecordField Name="DataID" Type="Int"></ext:RecordField>
                                                    <ext:RecordField Name="DataTypeID" Type="Int"></ext:RecordField>
                                                    <ext:RecordField Name="DataName" Type="String"></ext:RecordField>
                                                    <ext:RecordField Name="DataTypeIcon" Type="String"></ext:RecordField>
                                                    <ext:RecordField Name="DataTitle" Type="String"></ext:RecordField>
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
                                        <Listeners>
                                            <Load fn="defaultQuickSearchStoreLoaded" />
                                        </Listeners>
                                    </ext:Store>
                                </store>
                                <ColumnModel>
                                    <Columns>
                                        <ext:TemplateColumn ColumnID="colSearchItem" DataIndex="DataName" Header="">
                                            <template runat="server" id="template4">
                                                <Html>
                                                    <tpl for=".">
                                                        <table cellspacing="1" cellpadding="0">
                                                            <tr valign="middle">
                                                                <td width="16px"><image src="{DataTypeIcon}" height="16px" width="16px" /></td>
                                                                <td style="padding-left: 2px;">{DataName}</td>
                                                            </tr>
                                                        </table>
                                                    </tpl>
                                                </Html>
                                            </template>
                                        </ext:TemplateColumn>
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" >
                                        <listeners>
                                            <RowSelect Fn="defaultQuickSearchItemSelected" />
                                        </listeners>
                                    </ext:RowSelectionModel>
                                </SelectionModel>
                                <View>
                                    <ext:GridView runat="server" EmptyText="Enter search criteria below"></ext:GridView>
                                </View>
                                <LoadMask ShowMask="true" />
                                <BottomBar>
                                    <ext:PagingToolbar displaymsg="" AfterPageText="" beforepagetext="Page" emptymsg="" ID="pgrIndexGrid" runat="server" hiderefresh="true" PageSize="9" SkinID="none"></ext:PagingToolbar>
                                </BottomBar>
                            </ext:GridPanel>
    and this trigger:

    <ext:TriggerField ID="trgQuickSearchFilter" enablekeyevents="true" runat="server" Width="190" EmptyText="Search MIS">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Search" HideTrigger="true" Qtip="Search" />
                                    <ext:FieldTrigger Icon="Clear" HideTrigger="true" Qtip="Clear Search Results" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Handler="if (index === 1) { trigger.hide(); this.setValue(''); grdQuickSearch.store.reload({ params: { start: 0, limit: 9} }); } else { defaultQuickSearchTrigerClick(); }" />
                                    <KeyUp Fn="defaultQuickSearchFilterKeyPress" />
                                    <keydown Fn="defaultQuickSearchFilterStopBeep" />
                                    <keypress Fn="defaultQuickSearchFilterStopBeep" />
                                </Listeners>
                            </ext:TriggerField>
    Thanks.
    Sean
    Last edited by Daniil; Jun 13, 2011 at 4:04 PM. Reason: [CLOSED]
  2. #2
    Jun 11, 2011, 8:33 PM
    Hi Sean,

    Please always post new threads on the Premium Help forum till you are a premium member.

    We can miss your thread on other forums. So, I just accidentally found this thread.
  3. #3
    Jun 11, 2011, 9:09 PM
    I can demonstrate you the following example to investigate.

    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[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
            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">
        var selectRow = function (grid, row) {
            grid.store.getAt(row).set("mySelected", "my-row-selected");
            grid.view.refresh();
        }
        
        var unselectRow = function (grid, row) {
            grid.store.getAt(row).set("mySelected", null);  
        }
        
        var getRowClass = function (record) {
            return record.data.mySelected ? record.data.mySelected : "";
        }
    </script>

    <style type="text/css">
        .my-row-selected  {
            background-color: yellow !important;
        }
    </style>
</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="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                                <ext:RecordField Name="mySelected" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Select 0">
            <Listeners>
                <Click Handler="selectRow(GridPanel1, 0)" />
            </Listeners>
        </ext:Button>
         <ext:Butt  on runat="server" Text="Unselect 0">
            <Listeners>
                <Click Handler="unselectRow(GridPanel1, 0)" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Select 1">
            <Listeners>
                <Click Handler="selectRow(GridPanel1, 1)" />
            </Listeners>
        </ext:Button>
         <ext:Button runat="server" Text="Unselect 1">
            <Listeners>
                <Click Handler="unselectRow(GridPanel1, 1)" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Question - GridPanel Render And IE9
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 25
    Last Post: May 01, 2012, 4:25 PM
  2. [CLOSED] [1.0] Gridpanel and checkbox question
    By jpadgett in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 07, 2010, 10:36 PM
  3. [Question] How to delete row from gridpanel??
    By kuzaabarbor in forum 1.x Help
    Replies: 0
    Last Post: Sep 08, 2010, 4:31 AM
  4. Create GridPanel's question
    By sindevil0010 in forum 1.x Help
    Replies: 1
    Last Post: Aug 24, 2010, 8:05 AM
  5. [CLOSED] GridPanel Grouping Question
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 17, 2008, 6:57 AM

Posting Permissions