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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dialog window from grid without postback

Thread ID:

Created:

Updated:

Platform:

Replies:

121566 Jan 2,2016 07:38 PM UTC Jan 11,2016 07:21 AM UTC ASP.NET Web Forms 8
loading
Tags: Grid
Thomas Meier
Asked On January 2, 2016 07:38 PM UTC

Hello there,
I need help with a "ej:Grid".
I present selected data an ej: grid available.
About an "Info" button (or event) I would like to present additional information (new SQL query) in a modal dialog box.
Unfortunately, all my attempts to postback when ej:grid triggered and the grid reloaded (back to page 1).

Is there a way
, without a trigger postback, read a value from the grid and those to be transferred to a code-behind function so that I can then display the dialog box?

Sellappandi Ramu [Syncfusion]
Replied On January 4, 2016 10:45 AM UTC

Hi Thomas,

Thanks for contacting Syncfusion support.

By default postback action will perform in ASP.Net when using asp button. If we want to stop the postback action, we need to return false from the OnClientClick event. Getting data from server without postback we need to use Ajax method.  

Please refer to the code example,

<ej:grid id="FlatGrid" runat="server" allowscrolling="true" AllowPaging = "true" >

        <Columns>

               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">                  

               </ej:Column>

               <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">                  

               </ej:Column>              

               <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="110"></ej:Column>

               <ej:Column Field="ShipCity" HeaderText="ShipCity" Width="90" />

               <ej:Column HeaderText="Order Info" Template="True" TemplateID="#columnTemplate" TextAlign="Center" Width="110" />

            </Columns>

    </ej:grid>

    <script type="text/x-jsrender" id="columnTemplate">

       <asp:Button ID="Button1" runat="server" Text="Info" OnClientClick="myfunction(); return false;"/>

    </script>

    <script type="text/javascript">

        function myfunction() {

            $.ajax({

                url: "/Default.aspx/Data",

                type: "POST",

                dataType: "json",

                contentType: 'application/json; charset=utf-8',

                success: function (data) {

                    alert("success")


                },

                error: function (xhr) {

                    alert('error');

                }

            })


        }
    </script>

[System.Web.Services.WebMethod]

        public static string Data()

        {

            //perform operation

            return data;// return the data
        }


Regards,
Sellappandi R

Thomas Meier
Replied On January 6, 2016 07:22 PM UTC

Thanks for the answer.
I had the value of "settings.AutoRedirectMode = RedirectMode.Permanent" on "settings.AutoRedirectMode = RedirectMode.Off" change to make it work (File RouteConfig.cs).

But how can I return a value of the current row to the WebService?
When I press the "Info" button in the 3rd row, I need the value of CustomerID in order to start a query.

Sellappandi Ramu [Syncfusion]
Replied On January 7, 2016 08:56 AM UTC

Hi Thomas,

Thanks for the update.

We need to use Ajax method to pass the current selected value to server side and perform the operation. We suggest you to use onClientClick event in client side and send the selected value to server side, we can get the selected values by using getSelectedRecords property.

Please refer to the code example and sample,

<script type="text/x-jsrender" id="columnTemplate">

       <asp:Button ID="Button1" runat="server" Text="Info" OnClientClick="myfunction(); return false;"/>

    </script>

    <script type="text/javascript">

        function myfunction() {

            var gridObj = $("#<%=FlatGrid.ClientID%>").ejGrid("instance");

            var customerID = gridObj.getSelectedRecords()[0].CustomerID;

            $.ajax({

                url: "/Default.aspx/Data",

                type: "POST",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                data: JSON.stringify({ data: customerID }),

                success: function (data) {

                    alert(data.d);


                },

                error: function (xhr) {

                    alert('error');

                }

            })

        }
    </script>
[aspx.cs]

[System.Web.Services.WebMethod]

        public static string Data(string data)

        {

            //perform operation

            return data;// return the data
        }


Sample: http://www.syncfusion.com/downloads/support/forum/121566/ze/Sample_1215661985596562

Regards,
Sellappandi R

Thomas Meier
Replied On January 8, 2016 12:03 AM UTC

Hello there,
I still have a problem with this part of the program:
Your program works.
But in my program always comes the error
"TypeError: gridObj.getSelectedRecords (...) [0] is undefined" (Firefox devtools)

The only difference is a database query.

Attachment: runtime_error_31ce06d5.rar

Thomas Meier
Replied On January 8, 2016 12:07 AM UTC

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="jumbotron">
        <ej:Grid ID="FlatGrid" runat='server' AllowPaging="True" AllowSorting="True" AllowTextWrap="True" DataSourceCachingMode="None" DataSourceID="SqlDataSource1"  
            MinWidth="0" AllowSelection="False" EnableRowHover="False" >
            <Columns>
                <ej:Column Field="column1"></ej:Column>
                <ej:Column Field="Anlage"></ej:Column>
                <ej:Column HeaderText="Info" Template="True" TemplateID="#columnTemplate" TextAlign="Center" Width="110"></ej:Column>
            </Columns>
            <PageSettings Template="" ></PageSettings>
            <ScrollSettings EnableTouchScroll="False"></ScrollSettings>
        </ej:Grid>

        <script type="text/x-jsrender" id="columnTemplate">
            <asp:Button ID="Button1" runat="server" Text="Info" OnClientClick="myfunction(); return false;" />
        </script>
        <script type="text/javascript">
            function myfunction() {
                var gridObj = $("#<%=FlatGrid.ClientID%>").ejGrid("instance");
                var info = gridObj.getSelectedRecords()[0].Anlage;
                $.ajax({
                    url: "/Default.aspx/Daten",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ data: info }),
                    success: function (data) {
                        alert(data.d);
                    },
                    error: function (xhr) {
                        alert('error');
                    }
                })
            }
        </script>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SchichtbuchDB %>" SelectCommand="SELECT [techn. Platz] AS column1, [Anlage] FROM [sapanlagen]"></asp:SqlDataSource>
    </div>  
</asp:Content>

Sellappandi Ramu [Syncfusion]
Replied On January 8, 2016 09:10 AM UTC

Hi Thomas,

We have checked the reported issue at our end using provided codes and found that you have set allowSelection as false which is the cause of the issue. We are unable to get the SelectedRecords when allowSelection property is false. So we have achieved your requirement using currentViewData and getRowByIndex properties.

Please refer to the code example and sample,

<script type="text/x-jsrender" id="columnTemplate">

       <asp:Button ID="Button1" runat="server" Text="Info" OnClientClick="myfunction(this); return false;"/>

    </script>

    <script type="text/javascript">

        function myfunction(element) {

            var gridObj = $("#<%=FlatGrid.ClientID%>").ejGrid("instance");

            var customerID = gridObj.model.currentViewData[gridObj.getIndexByRow($(element).parents("tr"))].CustomerID;

            $.ajax({

                url: "/Default.aspx/Data",

                type: "POST",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                data: JSON.stringify({ data: customerID }),

                success: function (data) {

                    alert(data.d);


                },

                error: function (xhr) {

                    alert('error');

                }

            })


        }
    </script>


Sample: http://www.syncfusion.com/downloads/support/forum/121566/ze/Sample_1215661971945629

Regards,
Sellappandi R

Thomas Meier
Replied On January 8, 2016 10:38 PM UTC

Hello there,
thank you for both programs.
After modification with Selected Records both work.

Sellappandi Ramu [Syncfusion]
Replied On January 11, 2016 07:21 AM UTC

Hi Thomas,

Thanks for the update.

Please get back to us if you have any queries. We are happy to assist you.

Regards,
Sellappandi R

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.

Warning Icon 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.Close Icon

;