Bind grid with the use of button <DirectEvents> event

[kavit@bdtpark.com]

Hello Sir,

I want to use this example https://examples2.ext.net/#/GridPane.../DirectMethod/.

I want little modification that, I want to bind this grid panel with button click event. So please help me how to do that?

[Daniil]

Hi,

Hope this example helps.
https://examples2.ext.net/#/GridPane...d/Remote_Load/

[kavit@bdtpark.com]

Hi,

Hope this example helps.
https://examples2.ext.net/#/GridPane...d/Remote_Load/

Thank you for your reply. But this example with not help me. I want to do paging with remote data. Means the data which user is watching only downloaded and other data will download base on page change of grid panel.

[Daniil]

Ok, let's return to this:

I want little modification that, I want to bind this grid panel with button click event. So please help me how to do that?

You can set up AutoLoad="false" for the Store and call

store.load();

in a Button's Click Listener.

[kavit@bdtpark.com]

Ok, let's return to this:


You can set up AutoLoad="false" for the Store and call

store.load();

in a Button's Click Listener.

Again thank you very much for reply
I used your instruction but it is still not work. I want to fill grid with button click as well as I want to do server side paging (Means the data we see at a time that only downloaded and other with download when we change page. Same as this example (https://examples2.ext.net/#/GridPane.../DirectMethod/))
Below is my code of aspx page grid panel and button

 <ext:Button Width="70" Height="30" ID="Button13" runat="server" Text="Search">
        <Listeners>
             <Click Handler="StoreDiamond.load();">
             </Click>
        </Listeners>
</ext:Button>
<ext:GridPanel ID="GPDiamond" runat="server">
                        <Store>
                            <ext:Store ID="StoreDiamond" RemotePaging="true" AutoLoad="false" PageSize="10" runat="server">
                                <Proxy>
                                    <ext:PageProxy DirectFn="App.direct.BindData" />
                                </Proxy>
                                <Model>
                                    <ext:Model ID="Model2" runat="server" IDProperty="ID">
                                        <Fields>
                                            <ext:ModelField Name="ID" Type="Int" />
                                            <ext:ModelField Name="SKU" />
                                            <ext:ModelField Name="StoneType" />
                                            <ext:ModelField Name="StoneShape" />
                                            <ext:ModelField Name="StoneCarat" />
                                            <ext:ModelField Name="StoneColor" />
                                            <ext:ModelField Name="StoneCertiNo" />
                                            <ext:ModelField Name="StoneMatchedPairWith" />
                                            <ext:ModelField Name="StonePrice" />
                                            <ext:ModelField Name="TotalPrice" />
                                            <ext:ModelField Name="StoneColorImage" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="Column1"
                                    runat="server"
                                    Text="Stock No"
                                    Flex="35"
                                    DataIndex="SKU" />
                                <ext:TemplateColumn ID="TemplateColumn4" runat="server" Text="Image" Flex="50" DataIndex="StoneColorImage" Icons="NoteEdit"
                                    TemplateString='<img id="imgColorDiamond" style="width:60px;height:45px;" alt="No Image" src="DiamondImages/diamond4.png" />' />
                                <ext:Column ID="Column11" runat="server" Text="Stone Type" Flex="35" DataIndex="StoneType" />
                                <ext:Column ID="Column2" runat="server" Text="StoneShape" Flex="35" DataIndex="StoneShape" />
                                <ext:Column ID="Column3" runat="server" Text="Weight" Flex="35" DataIndex="StoneCarat" />
                                <ext:Column ID="Column4" runat="server" Text="Color" Flex="35" DataIndex="StoneColor" />
                                <ext:Column ID="Column7" runat="server" Text="Certificate" Flex="35" DataIndex="StoneCertiNo" />
                                <ext:Column ID="Column8" runat="server" Text="Match" Flex="35"
                                    DataIndex="StoneMatchedPairWith" />
                                <ext:Column ID="Column9" runat="server" Text="Price" Flex="35" DataIndex="StonePrice" />
                                <ext:Column ID="Column10" runat="server" Text="Total Price" Flex="35" DataIndex="TotalPrice" />
                                <ext:TemplateColumn ID="TemplateColumn6" runat="server" Text="Details" Flex="30" DataIndex="ID"
                                    TemplateString='<a href=Certificate.aspx?ID={ID}" target=_blank >Details</a>' />
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GridView ID="GridView2"
                                runat="server"
                                EmptyText="No color stones to Display" />
                        </View>

                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1"
                                runat="server"
                                DisplayInfo="true"
                                DisplayMsg="Displaying color stones {0} - {1} of {2}"
                                EmptyMsg="No color stone to display"
                                StoreID="Store1">
                                <Items>
                                    <ext:Label ID="Label1" runat="server" Text="Page size:" />
                                    <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                    <ext:ComboBox ID="ComboBox7" Editable="false" Style="border: 1px solid #B5B8C8; background: #fff;" runat="server" Width="80">
                                        <Items>
                                            <ext:ListItem Text="10" />
                                            <ext:ListItem Text="20" />
                                            <ext:ListItem Text="50" />
                                            <ext:ListItem Text="100" />
                                        </Items>
                                        <SelectedItems>
                                            <ext:ListItem Value="10" />
                                        </SelectedItems>
                                        <Listeners>
                                            <Select Handler="#{GPDiamond}.store.pageSize = parseInt(this.getValue(), 10); #{GPDiamond}.store.reload();" />
                                        </Listeners>
                                    </ext:ComboBox>
                                </Items>

                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>

In my aspx.cs file I have written following code.

   [DirectMethod]
    // public object BindData(string action, Dictionary<string, object> extraParams)
    public object BindData()
    {
        string action;
        Dictionary<string, object> extraParams = new Dictionary<string, object>();
        string StoneType = string.Empty;
        string Shape = string.Empty;
        StoreRequestParameters prms = new StoreRequestParameters(extraParams);
        ColorStoneInventoryBAL Obj = new ColorStoneInventoryBAL();



        int total;



        Obj.Command = "A";
        Obj.StoneInventoryId = 0;
        Obj.StartRowIndex = prms.Start;
        Obj.MaximumRows = Convert.ToInt32(ComboBox7.SelectedItem.Value);

        Obj.SKU = Convert.ToString(txtSKU.Text.Trim());
        Obj.MinWeight = Convert.ToDecimal(txtMinWeight.Text.Trim());
        Obj.MaxWeight = Convert.ToDecimal(txtMaxWeight.Text.Trim());

        if (Shape != string.Empty)
            Obj.Shape = AddSingleQuote(Shape);
        else
            Obj.Shape = "";

        if (StoneType != string.Empty)
            Obj.StoneType = AddSingleQuote(StoneType);
        else
            Obj.StoneType = "";
        DataSet data = Obj.GetColorStoneDataBAL1();
        total = 100;
        //  List<Inventory> data = SampleCinco.MyInventory.GetInventoriesFilter(prms.Start, Convert.ToInt32(ComboBox1.SelectedItem.Value), prms.Sort[0], out total);

        return new { data, total };
    }

[Daniil]

OK, please post a response of the BindData DirectMethod.

[kavit@bdtpark.com]

OK, please post a response of the BindData DirectMethod.

Thank you for your reply
Means?

[Daniil]

Please see the screenshot.

[kavit@bdtpark.com]

OK, please post a response of the BindData DirectMethod.

Sorry for the late reply..

Below is the response:

{result:{"data":[{"TotalPrice":2852,"StoneInventoryId":1839,"StoneSKU":"SAC1008   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"3.26","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":875,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":770,"StoneInventoryId":1840,"StoneSKU":"SAC1009   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"1.4","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":550,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":-4464,"StoneInventoryId":1841,"StoneSKU":"SAC1017   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"-3.72","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":1200,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":5516,"StoneInventoryId":1842,"StoneSKU":"SAC1018   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"6.49","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":850,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":6084,"StoneInventoryId":1843,"StoneSKU":"SAC1019   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"4.68","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":1300,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":644,"StoneInventoryId":1844,"StoneSKU":"SAC1028   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"1.17","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":550,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":1432,"StoneInventoryId":1845,"StoneSKU":"SAC1029   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"1.91","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":750,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":752,"StoneInventoryId":1846,"StoneSKU":"SAC1033   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"1.67","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":450,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":1204,"StoneInventoryId":1847,"StoneSKU":"SAC1035   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"1.72","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":700,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null},{"TotalPrice":444,"StoneInventoryId":1848,"StoneSKU":"SAC1039   ","StoneShape":"Cushion  ","StoneType":"Blue Sapphire","StoneColor":"BL  ","StoneCarat":"1.11","StoneLength":null,"StoneWidth":null,"StoneDepth":null,"StoneDiscription":null,"StonePrice":400,"StoneLab":null,"StoneCertiNo":"","StoneCertiImage":null,"StoneColorImage":null,"StoneTreated":null,"StoneMatchedPairWith":"","StoneParcelDiamond":null,"RawID":"00000000-0000-0000-0000-000000000000","ModifiedDate":null}],"total":838}}

[Daniil]

A response looks correct.

It is strange that you attach the different Stores to the GridPanel and PagingToolbar.

The GridPanel uses the Store with ID="StoreDiamond".

But I see StoreID="Store1" for the PagingToolbar.

Please try to remove the StoreID="Store1" setting at all.