Dialog window from grid without postback

[Thomas Meier]

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]

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]

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]

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]

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]

<%@ 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]

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]

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

[Sellappandi Ramu]

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