Grid rows not showing

[myron]

Hi,

Before I even begin to explain, I have a similar issue to the following post: http://forums.ext.net/showthread.php?832.

On my page I have a search form that is used to filter the data that should appear in the grid. Additionally, when the page is initially loaded a selected set of data is set to the DataSource of my store.

What happens is that each time I load the data in the store there are no rows in my grid even though my PagingToolBar tells me that the correct amount of rows have been returned. Another thing I noticed using firebug is that my response has 0 for the totalCount yet the data property of the Data object (which is an array) has the correct amount of records that is being displayed in the PagingToolbar.

The only difference in my scenario is that I do not use an asp ObjectDataSource. I simply add each Object to an array list then set it to the store.DataSource and call the store.DataBind() method.

Here are some quick samples of my code:

ASPX

<ext:Store ID="storeGeneralSearch" runat="server" 
  OnRefreshData="storeGeneralSearch_RefreshData">
  <Reader>
      <ext:JsonReader>
          <Fields>
              <ext:RecordField Name="CallId" />
              <ext:RecordField Name="Extension" />
              <ext:RecordField Name="CodeOwner" />
              <ext:RecordField Name="CallDate" />
              <ext:RecordField Name="CallTime" />
              <ext:RecordField Name="NumberCalled" />
              <ext:RecordField Name="CallDirection" />
              <ext:RecordField Name="CallDuration" />
              <ext:RecordField Name="CallCost" />
              <ext:RecordField Name="CallDescription" />
          </Fields>
      </ext:JsonReader>
  </Reader>
</ext:Store>
<ext:GridPanel ID="grdGeneralSearch" runat="server" Frame="false" StoreID="storeGeneralSearch" >
   <ColumnModel runat="server">
      <Columns>
          <ext:Column DataIndex="CallId" Hidden="true" />
          <ext:Column Header="Extension" DataIndex="Extention" MenuDisabled="true" />
          <ext:Column Header="Code Used/Owner" DataIndex="CodeOwner" MenuDisabled="true" />
          <ext:Column Header="Date of Call" DataIndex="CallDate" MenuDisabled="true" />
          <ext:Column Header="Time of Call" DataIndex="CallTime" MenuDisabled="true" />
          <ext:Column Header="Dialed Number" DataIndex="NumberCalled" MenuDisabled="true" />
          <ext:Column Header="Call Direction" DataIndex="CallDirection" MenuDisabled="true" />
          <ext:Column Header="Duration" DataIndex="CallDuration" MenuDisabled="true" />
          <ext:Column Header="Cost" DataIndex="CallCost" MenuDisabled="true" />
          <ext:Column Header="Comments" DataIndex="CallDescription" MenuDisabled="true" Align="Left" />
      </Columns>
      </ColumnModel>
      <BottomBar>
      <ext:PagingToolBar ID="pagingToolbar" runat="server" PageSize="20" StoreID="storeGeneralSearch"
           DisplayInfo="true" DisplayMsg="Displaying: {0} - {1} of {2} Calls" EmptyMsg="No call data to display" />
   </BottomBar>
   <LoadMask ShowMask="true" />
</ext:GridPanel>

Code Behind

public void BindData(bool isRefreshing)
{
   CallDataModelCollection collection;

   if (dfStartDate.SelectedDate > DateTime.MinValue && !isRefreshing)
       collection = CallDataDataClients.RetrieveGeneralSearchData(dfStartDate.SelectedDate);
   else
       collection = CallDataDataClients.RetrieveGeneralSearchData(DateTime.MinValue.Date);
   if (collection != null)
   {
       storeGeneralSearch.DataSource = collection;
       storeGeneralSearch.DataBind();
   }
}

My response looks like this:

{serviceResponse:{Data:{data:[{"CallId":10592,"CallDate":"2007-09-06T00:00:00","CallTime":"2007-09-06T16
:55:13","CodeOwner":"0","Extension":"26","NumberCalled":"14434771","CallDirection":"2","CallCost":175
,"CallDuration":null,"CallDescription":"Personal"},{"CallId":11625,"CallDate":"2007-09-18T00:00:00","CallTime"
:"2007-09-18T08:25:45","CodeOwner":"0","Extension":"30","NumberCalled":"17928724","CallDirection":"2"
,"CallCost":14,"CallDuration":null,"CallDescription":"Personal call"},{"CallId":21945,"CallDate":"2008-01-23T00
:00:00","CallTime":"1899-12-30T09:41:08","CodeOwner":null,"Extension":"29","NumberCalled":"14210662"
,"CallDirection":"2","CallCost":14,"CallDuration":null,"CallDescription":"Call to Mr. Jones"},{"CallId"
:27562,"CallDate":"2008-03-31T00:00:00","CallTime":"1899-12-30T14:32:16","CodeOwner":null,"Extension"
:"29","NumberCalled":"18621010","CallDirection":"2","CallCost":7,"CallDuration":null,"CallDescription"
:"Personal"},{"CallId":29675,"CallDate":"2008-04-21T00:00:00","CallTime":"1899-12-30T10:13:56","CodeOwner"
:null,"Extension":"21","NumberCalled":"13795758","CallDirection":"2","CallCost":7,"CallDuration":null
,"CallDescription":"PC- RH"},{"CallId":29685,"CallDate":"2008-04-21T00:00:00","CallTime":"1899-12-30T10
:26:34","CodeOwner":null,"Extension":"21","NumberCalled":"18518676","CallDirection":"2","CallCost":63
,"CallDuration":null,"CallDescription":"Personal- RH"},{"CallId":32241,"CallDate":"2008-06-06T00:00:00"
,"CallTime":"1899-12-30T07:55:47","CodeOwner":null,"Extension":"21","NumberCalled":"13978482","CallDirection"
:"2","CallCost":7,"CallDuration":null,"CallDescription":"PC-Jashua T"},{"CallId":32242,"CallDate":"2008-06-06T00
:00:00","CallTime":"1899-12-30T07:57:04","CodeOwner":null,"Extension":"21","NumberCalled":"13604280"
,"CallDirection":"2","CallCost":14,"CallDuration":null,"CallDescription":"PC-Jashua T"}], totalCount
: 0},Success:true},script:"RegularPage_grdGeneralSearch.reload();"}

I've also attached an image showing what it looks like after the grid is bound.

I'd appreciate any help I can get on this. Maybe its due to the fact that I don't use an object data source. Who knows...

Thanks
Myron

[Vladimir]

Hi,

May be set fixed Height for GridPanel or AutoHeight="true"*

[myron]

Strangely that actually worked. I intentionally didn't try it because of none of the examples had it.

My problems aren't totally solved however. My grid isn't bound when the page loads initially. Also, my search button does a post back, so after the post back is complete my grid is empty once again as it is when the page loads.

I'm guessing that I can fix these with AjaxEvents but is that the only solution? Especially the page load initialization should work.

[Vladimir]

Hi,

Please ensure that you set DataSource and call DataBind at initial page load.


P.S. "I intentionally didn't try it because of none of the examples had it" - if grid inside layout (FitLayout, BorderLayout) then layout set grid height is yourself. In other cases you need to set height.

[myron]

vladimir (3/27/2009)Hi,

Please ensure that you set DataSource and call DataBind at initial page load.

The same thing that happens when I click the refresh button on the grid is the same thing that happens in my page load. You can refer to my samples.

What happens is that everything is returned from the database if no criteria is set. Also, I'd expect the pager empty message to show with the text I entered.

I've also attached how my grid looks in IE. My headers don't show even yet it does in FireFox.

[Vladimir]

Hi,

Your sample is not full. I need full sample to investigate it
*

[myron]

I'm hoping this is enough. its the entire code behind:

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {
        BindData(true);
    }

}

#region Data Methods
public void BindData(bool isRefreshing)
{
    CallDataModelCollection collection;

    if (dfStartDate.SelectedDate > DateTime.MinValue && !isRefreshing)
        collection = CallDataDataClients.RetrieveGeneralSearchData(dfStartDate.SelectedDate);
    else
        collection = CallDataDataClients.RetrieveGeneralSearchData(DateTime.MinValue.Date);

    if (collection != null)
    {
        storeGeneralSearch.DataSource = collection;
        storeGeneralSearch.DataBind();
    }
}

public CallDataModelCollection BindObjectData()
{
    CallDataModelCollection collection;
    collection = null;

    if (dfStartDate.SelectedDate > DateTime.MinValue)
        collection = CallDataDataClients.RetrieveGeneralSearchData(dfStartDate.SelectedDate);
    else
        collection = CallDataDataClients.RetrieveGeneralSearchData(DateTime.MinValue.Date);

    return collection;
} 
#endregion

#region Events
protected void btnSearch_Click(object sender, EventArgs e)
{
    BindData(false);
}

protected void storeGeneralSearch_RefreshData(object sender, Coolite.Ext.Web.StoreRefreshDataEventArgs e)
{
    BindData(true);
} 
#endregion

The additional event is from the search button. It is an ext:Button and additional ext:DateField is on the form.

[Vladimir]

Hi,

I need full example. Can you prepare example with any test data and attach example?

[myron]

I'm afraid I'm not able to provide a full sample of the application. Its much too large and will be counterproductive to try to replicate it.

Though, I'm curious as to why you want a sample with test data. I seriously doubt that data is the issue as you saw the JSON representation of the objects that I had bound to Store.

If you cannot help without me providing the sample then at least give me some ideas of what you think might be wrong so that I can investigate it.

[Vladimir]

Hi,

If example is impossible then lets try to investigate step by step. Can you post rendering of your page (i mean open page in browser, then View Source and post this source)?