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.

Dialog window from grid without postback

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 05:45 AM

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 02:22 PM

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 03:56 AM

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 7, 2016 07:03 PM

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 7, 2016 07:07 PM

<%@ 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 04:10 AM

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 05:38 PM

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

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

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.

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.

;