We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

WebApiAdapter

Thread ID:

Created:

Updated:

Platform:

Replies:

125934 Sep 12,2016 01:35 PM Sep 14,2016 11:20 PM ASP.NET Web Forms 3
loading
Tags: Grid
Martin Sickel
Asked On September 12, 2016 01:35 PM

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 [Syncfusion]
Replied On September 13, 2016 02:44 AM

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
Replied On September 14, 2016 02:30 AM

That's it, thank you very much.

Karthick Kuppusamy [Syncfusion]
Replied On September 14, 2016 11:20 PM

Hi Martin, 

We are happy to hear that your requirement is achieved. 

Regards, 
K.Karthick. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;