[CLOSED] Delay loading of data

[cwolcott]

I would like to delay the loading of data until the ListFilter is selected by the user. Is it possible?

The ListFilter is associated with a Store, which is associated with a LinqDataSource.

<script type="text/javascript">
         var myCreateMenu = function (config) {

             var menuCfg = config.menuItems ? {items : config.menuItems} : {},
                 menu;

             Ext.copyTo(menuCfg, config, "labelField,loadingText,loadOnShow,single,store,options");
             Ext.apply(menuCfg, {
                 height : 297 ///!!! to get scrolling
             });

             menu = Ext.create('Ext.ux.grid.menu.ListMenu', menuCfg);
             menu.self.xtype = "menu"; //!!! workaround for ExtJS bug
             menu.on('checkchange', this.onCheckChange, this);
             return menu;
         };
</script> 
...
<ext:GridPanel runat="server" Region="Center" >
   <Bin>
      <ext:Store ID="CmdLvl_Store" runat="server" DataSourceId="CmdLvl_LDS">
         <Model>
            <ext:Model runat="server" IDProperty="FullDescr">
               <Fields>
                  <ext:ModelField Name="CmdLvl" Mapping="CmdLvl" />
                  <ext:ModelField Name="id" Mapping="FullDescr" />
               </Fields>
            </ext:Model>
         </Model>
      </ext:Store>
      <ext:Container runat="server">
         <Content>
            <asp:LinqDataSource ID="CmdLvl_LDS" runat="server" ContextTypeName="CFV.CFVDataContext"
                  OnSelecting="CmdLvlLDS_Selecting" />
         </Content>
      </ext:Container>
   </Bin>
   ...
   <ColumnModel runat="server">
      <ext:Column runat="server" Text="CmdLvl"   DataIndex="CmdLvl" Align="Center" Hideable="false" width="60" />
   </ColumnModel>
   ...
   <Features>
      <ext:GridFilters ID="Filters" runat="server">
         <ext:ListFilter DataIndex="CmdLvl" StoreId="CmdLvl_Store" LabelField="id" >
            <CustomConfig>
               <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
            </CustomConfig>
         </ext:ListFilter>
      </ext:GridFilters>
   </Features
...
</ext:GridPanel>
...

[Daniil]

Hi Chris,

I think it should be possible.

I would try the following.

1. Do not set up DataSourceID initially.

2. Set up

AutoLoad="false"

for the Store.

3. Override the ListFilter createMenu.

Markup

<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
    <CustomConfig>
        <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
    </CustomConfig>
</ext:ListFilter>

JavaScript

var myCreateMenu = function (config) {
    var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
    menu.on('checkchange', this.onCheckChange, this);
    menu.on('beforeshow', function () { /*call a DirectMethod to bind the Store */ });
    return menu;
};

4. Within the DirectMethod call.

StoreOptions.DataSourceID = SomeDataSourceID;
StoreOptions.DataBind();

Theoretically it should work well. If you will face any problems, please feel free to report.

[cwolcott]

I was out yesterday so I am just getting to this today. I have 5 ListFilters so I was hoping to be a little more dynamic. Can I pass the name of the DirectMethod into the createmenu javascript code?

Markup

<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
     <CustomConfig>
         <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
         <%-- Pass the name of the direct method like 'test1_BindDataSource' --%>
     </CustomConfig>
 </ext:ListFilter>

Javascript

var myCreateMenu = function (config) {
     var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
     var variableHoldingDirectMethod = ??

     menu.on('checkchange', this.onCheckChange, this);
     menu.on('beforeshow', function () {
         Ext.net.DirectMethod.request(variableHoldingDirectMethod); 
      });
     return menu; };

Server Code

[DirectMethod (ClientProxy = ClientProxy.Ignore)]
public void test1_BindDataSource()
{
   StoreOptions.DataSourceId = "Test1_LDS";
   StoreOptions.DataBind();
}

[Daniil]

As an additional ConfigItem.

<ext:ConfigItem Name="directMethodName" Value="someName" Mode="Value" />

Then you can access it within the createMenu function:

this.directMethodName

[cwolcott]

As an additional ConfigItem.

<ext:ConfigItem Name="directMethodName" Value="someName" Mode="Value" />

Then you can access it within the createMenu function:

this.directMethodName

I received the following error 'The ajax instance method 'Click' is absent!' when I tried the

Ext.net.DirectMethod.request(this.directMethodName);

But when I assigned it

var aa = this.directMethodName;

and called

Ext.net.DirectMethod.request(aa);

it worked.

Markup

<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
      <CustomConfig>
          <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
          <ext:ConfigItem Name="directMethodName" Value="text_BindDataSource" Mode="Value" />
      </CustomConfig>
</ext:ListFilter>

Javascript

var myCreateMenu = function (config) {
      var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
      var aa = this.directMethodName;

      menu.on('checkchange', this.onCheckChange, this);
      menu.on('beforeshow', function () {
          Ext.net.DirectMethod.request(aa);
        });
      return menu; };

[Daniil]

Before I will check it, please ensure there is no inconsistency here:

<ext:ConfigItem Name="directMethodName" Value="text_BindDataSource" Mode="Value" />

and

[DirectMethod (ClientProxy = ClientProxy.Ignore)]
public void test1_BindDataSource()

I see the different names: "text_BindDataSource" and "test1_BindDataSource".

[cwolcott]

Sorry for the poor typing.

Everything is consistant within my source code but incorrect in the previous post.
Here it is all fixed up.

Markup

<ext:ListFilter DataIndex="test1" StoreID="StoreOptions" LabelField="test">
       <CustomConfig>
           <ext:ConfigItem Name="createMenu" Value="myCreateMenu" Mode="Raw" />
           <ext:ConfigItem Name="directMethodName" Value="test1_BindDataSource" Mode="Value" />
       </CustomConfig>
</ext:ListFilter>

Server Code

[DirectMethod (ClientProxy = ClientProxy.Ignore)]
 public void test1_BindDataSource() {
    StoreOptions.DataSourceId = "Test1_LDS";
    StoreOptions.DataBind();
 }

Javascript (Works)

var myCreateMenu = function (config) {
       var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
       var aa = this.directMethodName;
         menu.on('checkchange', this.onCheckChange, this);
       menu.on('beforeshow', function () {
           Ext.net.DirectMethod.request(aa);
         });
       return menu;
 };

Javascript (Fails)
I received the following error 'The ajax instance method 'Click' is absent!' when I tried the this.

var myCreateMenu = function (config) {
       var menu = Ext.create('Ext.ux.grid.menu.ListMenu', config);
       
       menu.on('checkchange', this.onCheckChange, this);
       menu.on('beforeshow', function () {
           Ext.net.DirectMethod.request(this.directMethodName);
         });
       return menu;
 };

[Daniil]

I have just understood the problem. It's a scope issue.

The scope of the "beforeshow" listener is the menu by default, not the ListFilter.

So, this

this.directMethodName

is just not defined, I think.

You can set up a custom scope passing it as the third argument of the "on" method.

So, the following should work.

menu.on(
    'beforeshow', 
    function () {
        Ext.net.DirectMethod.request(aa);
    },
    this);

[Daniil]

Hi Chris,

I have just committed the fix (to the 2.1 branch) related to the topic.

With that fix the solution can be much simplified/improved.

The following should work.

1. Keep

AutoLoad="false"

for the Store.

2. Set up a PageProxy and an OnReadData handler for the Store.

3. Just call

store.DataBind();

within the OnReadData handler.

4. The benefits: no need to have CustomConfig for the List Filters and, respectively, any JavaScript.