WebApiAdapter

[Martin Sickel]

Dear All

I try to get the following working.

I have created  a WEBPAGE,which looks like this.

    <div class="mainCommand">

        <div class="divCommand">

            <ej:Button ID="btnClear" Type="Button" CssClass="button" ClientSideOnClick="setURLData" runat="server" Text="Initial load / reset"></ej:Button>

            <ej:Button ID="btnUpdate" Type="Button" CssClass="button" ClientSideOnClick="setURLUpdate" runat="server" Text="Update"></ej:Button>

        </div>

    </div>

    <ej:Splitter ID="SPMain" runat="server" Height="80vh" Width="100%" Orientation="Horizontal" EmptyDataText="" EnableAutoResize="false">

        <ej:SplitPane PaneSize="70%" MinSize="400" runat="server">

            <PaneContent>

                <div style="height: 100%; width: 100%; float: left;">

                    <div style="height: 100%; width: 100%; float: left;">

                        <asp:TextBox ID="txtBoxCallLog" runat="server" TextMode="MultiLine" CssClass="txtBoxCallLog"></asp:TextBox>

                    </div>

                </div>

            </PaneContent>

        </ej:SplitPane>

        <ej:SplitPane runat="server" PaneSize="450px">

            <PaneContent>

                <%--                <ej:DataManager runat="server" ID="mainDataManager" URL="default.aspx/Data" Adaptor="WebMethodAdaptor" />--%>

                <%--                <ej:WaitingPopup ID="test" runat="server" Target="#targetelement" ShowOnInit="false"></ej:WaitingPopup>--%>

                <div id="targetelement" style="height: 100%; width: 100%; float: left;">

                    <div style="height: 100%; width: 100%; float: left;">

                        <ej:Grid ID="mainGrid" AllowScrolling="true" AllowResizeToFit="true" AllowResizing="true" AllowPaging="true" AllowSorting="true" AllowGrouping="true" runat="server" OnServerRecordDoubleClick="mainGrid_ServerRecordDoubleClick">

                            <DataManager runat="server" URL="api/testdata/" Adaptor="WebApiAdaptor" />

                            <Columns>

                                <ej:Column Field="INTERACTIONIDKEY" HeaderText="INTERACTIONIDKEY" TextAlign="Left" Width="50px">

                                </ej:Column>

                                <ej:Column Field="REMOTENUMBER" HeaderText="REMOTENUMBER" TextAlign="Left" Width="50px">

                                </ej:Column>

                                <ej:Column Field="LASTUPDATE" HeaderText="DATETIME" TextAlign="Left" Format="{0:MM/dd/yyyy}" Width="50px">

                                </ej:Column>

                            </Columns>

                            <PageSettings PageSize="20" />

                            <ScrollSettings ScrollerSize="20" Width="103px" Height="55%" />

                            <%--                            <ClientSideEvents DataBound="dataBound" />--%>

                        </ej:Grid>

                    </div>

                </div>

            </PaneContent>

        </ej:SplitPane>

    </ej:Splitter>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#<%=btnClear.ClientID%>").click(function () {

                showpopup();

            });

            $("#<%=btnUpdate.ClientID%>").click(function () {

                showpopup();

            });

        });

        function setURLData(e) {

            var data = ej.DataManager({

                url: "api/testdata/",

                adaptor: new ej.WebApiAdaptor()

            })

            var query = new ej.Query()-take(5);

            var execute = data.executeQuery(query)

                    .done(function (e) {

                        var data = e.result;

                        var gridobj = $("#<%=mainGrid.ClientID%>").data("ejGrid");

                        gridobj.dataSource(data.result);

                        hidepopup();

                    });

                }

        function setURLUpdate(e) {

            var data = ej.DataManager({

                url: "api/testdata/",

                adaptor: new ej.WebApiAdaptor()

            })

            var query = new ej.Query().take(5);

            var execute = data.executeQuery(query)

                    .done(function (e) {

                        var data = e.result;

                        var gridobj = $("#<%=mainGrid.ClientID%>").data("ejGrid");

                        gridobj.dataSource(data.result);

                        hidepopup();

                    });

                }

        function showpopup() {

            $(function () {

                $("#targetelement").ejWaitingPopup();

                var popUpObj = $("#targetelement").data("ejWaitingPopup");

                popUpObj.show();

            });

        }

        function hidepopup() {

            $(function () {

                $("#targetelement").ejWaitingPopup();

                var popUpObj = $("#targetelement").data("ejWaitingPopup");

                popUpObj.hide();

            });

        }

    </script>

it is working as expected, but if I try to populate the grid by pressing one of the buttons it will not work, what did I do wrong?

I also have attached the small testproject which shows the issue.

Attachment: Demo_ae654588.zip

[Venkatesh Ayothi Raman]

Hi Martin, 

Thanks for contacting Syncfusion support. 

We went through your project that you have shared for us and found that you were bound wrong data source in setURlData and setURLUpdate function as follows, 

Code example: 

<Wrong Code> 

 

function setURLData(e) { 

            . . . 

 

            var execute = data.executeQuery(query) 

                    .done(function (e) { 

                        var data = e.result; 

                        var gridobj = $("#<%=mainGrid.ClientID%>").data("ejGrid"); 

                        gridobj.dataSource(data.result); // here you were bound the undefined data source. 

                        hidepopup(); 

                    }); 

                } 

 

        function setURLUpdate(e) { 

                  . . . 

            var execute = data.executeQuery(query) 

                    .done(function (e) { 

                        var data = e.result; 

                        var gridobj = $("#<%=mainGrid.ClientID%>").data("ejGrid"); 

                        gridobj.dataSource(data.result);// here you were bound the undefined data source. 

                        hidepopup(); 

                    }); 

                } 

------------------ 

<Correct Code> 

function setURLData(e) { 

                 . . . 

            var execute = data.executeQuery(query) 

                    .done(function (e) { 

                        var data = e.result; 

                        var gridobj = $("#<%=mainGrid.ClientID%>").data("ejGrid"); 

                        gridobj.dataSource(data); // We can bound the correct data source  

                        hidepopup(); 

                    }); 

                } 

 

        function setURLUpdate(e) { 

 

             . . .  

            var execute = data.executeQuery(query) 

                    .done(function (e) { 

                        var data = e.result; 

                        var gridobj = $("#<%=mainGrid.ClientID%>").data("ejGrid"); 

                        gridobj.dataSource(data); // We can bound the correct data source  

                        hidepopup(); 

                    }); 

                } 

We suggested you to bind the data source like above. If we misunderstood your query, then could you please provide more details about your requirement? 

 

Regards, 

Venkatesh Ayothiraman.

[Martin Sickel]

That's it, thank you very much.

[Karthick Kuppusamy]

Hi Martin, 

We are happy to hear that your requirement is achieved. 

Regards, 

K.Karthick.