How to set a default column value in the add dialog?

[Ed]

I need to be able to set a primary key value ( tournament_id) when the add button is clicked and the add dialog is opened? How can I do this?

    <ej:Grid ID="TablesGrid" runat="server" AllowFiltering="True" AllowPaging="True" AllowScrolling="True" AllowSorting="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource2" EnableLoadOnDemand="False" MinWidth="0">

                        <Columns>

                            <ej:Column DataType="number" Field="tournament_id" IsPrimaryKey="True">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_id" IsPrimaryKey="True" HeaderText="Table Number">

                            </ej:Column>

                            <ej:Column DataType="boolean" Field="active" EditType="BooleanEdit" HeaderText="Active">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_type_id" EditType="DropdownEdit" ForeignKeyField="tabletypeid" ForeignKeyValue="tabledesc" HeaderText="Table Type">

                            </ej:Column>

                        </Columns>

                        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

                        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="true" ShowAddNewRow="False" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Normal" />

                    </ej:Grid>

[Jagadesh Ram Raajkumar]

Hi Ed, 

Greetings from Syncfusion Support. 

To set a default value to a cell whenever the add dialog is opened to add a new record, you can use actionBegin event to set the value for the primary key value(tournament_id). Since it is a primary key value it should be unique, so upon setting the value you need to make sure if it’s a unique value.

In the below code snippet we have used actionBegin event to set the default value which the cell will show after clicking the add button in the toolbar. In the actionBegin event handler, we set the tournament_id value based on maximum numerical value plus one so, it will be a unique value.

Code Snippet: 

<ej:Grid ID="TablesGrid" runat="server" AllowFiltering="True" AllowPaging="True" AllowScrolling="True" AllowSorting="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource2" EnableLoadOnDemand="False" MinWidth="0"> 

<ClientSideEvents ActionBegin="actionBegin" /> 

 

......... 

</ej:Grid>     

 

<script type="text/javascript"> 

        function actionBegin(args) { 

            if (args.requestType == "add") { 

                args.data.tournament_id = Math.max(...args.model.dataSource.map((i) => i.tournament_id)) + 1; 

            } 

        } 

</script> 

Please refer to the below documentation,
https://help.syncfusion.com/api/js/ejgrid#events:actionbegin

Kindly get back to us for further assistance. 

Regards,
Jagadesh Ram 

[Ed]

Ok so what I need to do is to set the Tablesgrid tournament_id based on the Tournamentgrid selected tournament_id, I have in code behind the Tablesgrid being filtered when a row is selected but really need the Add Dialog and filter to be set can you help me with that?

    <ej:Grid ID="TournamentGrid" runat="server" AllowPaging="True" ClientIDMode="Static" AllowScrolling="True" AllowSorting="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" EnableLoadOnDemand="False" MinWidth="0" AllowResizeToFit="true">

        <ClientSideEvents RowSelected="rowSelect" />

        <SelectionSettings EnableToggle="true" />

        <Columns>

            <ej:Column AllowEditing="False" DataType="number" Field="tournament_id" IsIdentity="True" IsPrimaryKey="True" EditType="NumericEdit" HeaderText="Id">

            </ej:Column>

            <ej:Column DataType="number" Field="status_id" EditType="DropdownEdit" ForeignKeyField="statusvalue" ForeignKeyValue="statustext" HeaderText="Status">

            </ej:Column>

            <ej:Column DataType="string" Field="name" HeaderText="Name">

            </ej:Column>

            <ej:Column DataType="string" Field="location_name" HeaderText="Location">

            </ej:Column>

            <ej:Column DataType="string" Field="addr1" HeaderText="Addr 1">

            </ej:Column>

            <ej:Column DataType="string" Field="addr2" HeaderText="Addr 2">

            </ej:Column>

            <ej:Column DataType="string" Field="city" HeaderText="City">

            </ej:Column>

            <ej:Column DataType="string" Field="state" HeaderText="State">

            </ej:Column>

            <ej:Column DataType="string" Field="postal_code" HeaderText="Postal Code">

            </ej:Column>

            <ej:Column DataType="string" Field="country_cd" HeaderText="Country" EditType="DropdownEdit" ForeignKeyField="countrytypevalue" ForeignKeyValue="countrytypetext">

            </ej:Column>

            <ej:Column DataType="date" Field="from_dt" EditType="Datepicker" HeaderText="From Date">

            </ej:Column>

            <ej:Column DataType="date" Field="to_dt" EditType="Datepicker" HeaderText="To Date">

            </ej:Column>

            <ej:Column DataType="number" Field="reg_fee_Max" DefaultValue="0" HeaderText="Reg Fee Max" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="reg_fee_per_event" HeaderText="Reg Fee Per Event" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="total_reg_fee_package" HeaderText="Total Reg Fee Package" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_Max" HeaderText="Table Fee Max" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_per_event" HeaderText="Table Fee Per Event" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_package" HeaderText="Table Fee Package" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="membership_id" EditType="DropdownEdit" ForeignKeyField="membershhiptypevalue" ForeignKeyValue="membershhiptypetext" HeaderText="Membership Points Used">

            </ej:Column>

            <ej:Column DataType="date" Field="Create_Dt" HeaderText="Create Date">

            </ej:Column>

            <ej:Column DataType="string" Field="Create_Userid" HeaderText="Create Userid">

            </ej:Column>

            <ej:Column DataType="date" Field="Update_Dt" HeaderText="Last Update Date">

            </ej:Column>

            <ej:Column DataType="string" Field="Update_Userid" HeaderText="Last Update by Userid">

            </ej:Column>

        </Columns>

        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete"></ToolbarSettings>

        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="false" ShowAddNewRow="false" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Dialog" />

    </ej:Grid>

                   <ej:Grid ID="TablesGrid" runat="server" AllowPaging="True" AllowScrolling="True" AllowSorting="True" MinWidth="0">

                        <Columns>

                            <ej:Column DataType="number" Field="tournament_id" IsPrimaryKey="True" Visible="false">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_id" IsPrimaryKey="True" HeaderText="Table Number">

                            </ej:Column>

                            <ej:Column DataType="boolean" Field="active" EditType="BooleanEdit" HeaderText="Active">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_type_id" EditType="DropdownEdit" ForeignKeyField="tabletypeid" ForeignKeyValue="tabledesc" HeaderText="Table Type">

                            </ej:Column>

                        </Columns>

                        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

                        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="true" ShowAddNewRow="False" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Normal" />

                    </ej:Grid>

    <script type="text/javascript">

        function rowSelect(args) {

            var grid = $("#TournamentGrid").ejGrid("instance");

            var statusid = args.data.status_id

            //status_id status_desc

            //0 Not Set

            //1 Active

            //2 Archive

            //3 Running

            //4 Complete

            if (statusid == 0) {

                $("#" + this.element.attr("id") + "_delete").addClass("e-enable");

                $("#" + this.element.attr("id") + "_edit").addClass("e-enable");

                var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems");

                var deletetoolbar = $("#" + grid.element.attr("id") + "_delete");

                var edittoolbar = $("#" + grid.element.attr("id") + "_edit");

                $toolbar.ejToolbar("enableItem", deletetoolbar);

                $toolbar.ejToolbar("enableItem", edittoolbar);

            }

            else {

                $("#" + this.element.attr("id") + "_delete").addClass("e-disable");

                $("#" + this.element.attr("id") + "_edit").addClass("e-disable");

                var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems");

                var deletetoolbar = $("#" + grid.element.attr("id") + "_delete");

                var edittoolbar = $("#" + grid.element.attr("id") + "_edit");

                $toolbar.ejToolbar("disableItem", deletetoolbar);

                $toolbar.ejToolbar("disableItem", edittoolbar);

            }

        }

   </script>

[Jagadesh Ram Raajkumar]

Hi Ed, 

 

Thanks for the update.

Before we proceed, kindly confirm the following details so that it would be more helpful for us to provide better assistance.
                              

1. In the code you have provided, only the TournamentGrid has RowSelected event bound but you have mentioned it is under Tablesgrid. Please confirm which grid has the event bound.
2. After the row selection do you want to set selected row’s data into the Tablesgrid?
3. To which the filtered records needs to be set?
4. To which grid the add dialog should open with a default value?.

 

Regards,
Jagadesh Ram 

[Ed]

So Tournamentgrid I have rowselected event in code behind setting filter on Tabledgrid.

What I want is to put these in the Javascript so when a row is selected on Tournamentgrid the Tablesgrid is filtered on tournament_id from Tournamentgrid and add new dialog on Tablesgrid defaults the tournament_id that is selected from Tournamentgrid.

Hope that makes sense and thanks so much for the help.

[Farveen Sulthana Thameeztheen Basha]

Hi Ed, 

Thanks for your details. 

Query#:- What I want is to put these in the Javascript so when a row is selected on Tournamentgrid the Tablesgrid is filtered on tournament_id from Tournamentgrid  

 

From your query we understood that need to render DetailGrid(TablesGrid) based on the selection of the row from Master Grid(Tournamentgrid). We have achieved your requirement by preparing sample using Master-Detail relationship and filtered the records based on the row selected from Master Grid. 

Screenshot:- 

 

Query#:- add new dialog on Tablesgrid defaults the tournament_id that is selected from Tournamentgrid. 

 

We have achieved this requirement using RowSelecting and ActionBegin event of the Grid. We have get the corresponding Filtered record value from RowSelecting event from Master Grid and assign that value to DetailGrid using ActionBegin event of the Grid. 

Refer to the code below:- 

Default.aspx:- 

 

Master Grid 

<ej:Grid ID="EmployeesGrid" runat="server" DataSourceID="SqlDataSource1" EnableLoadOnDemand="false" AllowSorting="True" AllowPaging="True"> 

             

            <ClientSideEvents EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" RowSelecting="rowSelecting"  ActionComplete="complete" /> 

                <Columns> 

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="Right" Width="100" /> 

                .   .    . 

               <ej:Column Field="Country" HeaderText="Country" Width="100" /> 

            

            </Columns>            

 </ej:Grid> 

 

Detail Grid 

 

<ej:Grid ID="OrdersGrid" runat="server" DataSourceID="SqlDataSource2" EnableLoadOnDemand="false" AllowSorting="True" AllowPaging="True"> 

             <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

             <ClientSideEvents  ActionBegin="begin" ActionComplete="complete" DataBound="dataBound"  /> 

            <Columns> 

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 

                  .   .   . 

           </Columns>            

   </ej:Grid> 

<script type="text/javascript"> 

       

        $(function () { 

            var val; 

            var $data = $('#MainContent_OrdersGrid').ejGrid("instance")._dataSource(); 

            $('#<%= EmployeesGrid.ClientID %>').ejGrid({ 

                 

                rowSelected: function (args) { 

                    val = val; 

                    var employeeId = args.data.EmployeeID; 

                    var detaildata = ej.DataManager($data).executeLocal(ej.Query().where("EmployeeID",    ej.FilterOperators.equal, employeeId, false).take(10));    //filter the records based on EmployeeID 

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

                    gridObj.dataSource(detaildata.slice(0, 5));   //bind the datasource to detailGrid using dataSource method 

                } 

            }); 

        }); 

        function rowSelecting(args) { 

            val = args.data.EmployeeID;      

        } 

        

        function begin(args) { 

            if (args.requestType == "add") { 

                args.rowData.EmployeeID = val;   //get the value from Master Grid and assign  

            } 

        } 

     </script> 

Sample Link:-  https://www.syncfusion.com/downloads/support/forum/170181/ze/Sample1655292788.zip 

Screenshot:- 

 

Demo Link:- https://asp.syncfusion.com/demos/web/grid/masterdetails.aspx 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Ed]

So the add dialog is setting the tournament_id like it should but when I select a row in the tournamentgrid it is not filtering in the tablesgrid?

    <ej:Grid ID="TournamentGrid" runat="server" AllowPaging="True" ClientIDMode="Static" AllowScrolling="True" AllowSorting="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" EnableLoadOnDemand="False" MinWidth="0" AllowResizeToFit="true">

        <ClientSideEvents RowSelected="rowSelect" RowSelecting="rowSelecting"/>

        <SelectionSettings EnableToggle="true" />

        <Columns>

            <ej:Column AllowEditing="False" DataType="number" Field="tournament_id" IsIdentity="True" IsPrimaryKey="True" EditType="NumericEdit" HeaderText="Id">

            </ej:Column>

            <ej:Column DataType="number" Field="status_id" EditType="DropdownEdit" ForeignKeyField="statusvalue" ForeignKeyValue="statustext" HeaderText="Status">

            </ej:Column>

            <ej:Column DataType="string" Field="name" HeaderText="Name">

            </ej:Column>

            <ej:Column DataType="string" Field="location_name" HeaderText="Location">

            </ej:Column>

            <ej:Column DataType="string" Field="addr1" HeaderText="Addr 1">

            </ej:Column>

            <ej:Column DataType="string" Field="addr2" HeaderText="Addr 2">

            </ej:Column>

            <ej:Column DataType="string" Field="city" HeaderText="City">

            </ej:Column>

            <ej:Column DataType="string" Field="state" HeaderText="State">

            </ej:Column>

            <ej:Column DataType="string" Field="postal_code" HeaderText="Postal Code">

            </ej:Column>

            <ej:Column DataType="string" Field="country_cd" HeaderText="Country" EditType="DropdownEdit" ForeignKeyField="countrytypevalue" ForeignKeyValue="countrytypetext">

            </ej:Column>

            <ej:Column DataType="date" Field="from_dt" EditType="Datepicker" HeaderText="From Date">

            </ej:Column>

            <ej:Column DataType="date" Field="to_dt" EditType="Datepicker" HeaderText="To Date">

            </ej:Column>

            <ej:Column DataType="number" Field="reg_fee_Max" DefaultValue="0" HeaderText="Reg Fee Max" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="reg_fee_per_event" HeaderText="Reg Fee Per Event" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="total_reg_fee_package" HeaderText="Total Reg Fee Package" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_Max" HeaderText="Table Fee Max" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_per_event" HeaderText="Table Fee Per Event" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_package" HeaderText="Table Fee Package" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="membership_id" EditType="DropdownEdit" ForeignKeyField="membershhiptypevalue" ForeignKeyValue="membershhiptypetext" HeaderText="Membership Points Used">

            </ej:Column>

            <ej:Column DataType="date" Field="Create_Dt" HeaderText="Create Date">

            </ej:Column>

            <ej:Column DataType="string" Field="Create_Userid" HeaderText="Create Userid">

            </ej:Column>

            <ej:Column DataType="date" Field="Update_Dt" HeaderText="Last Update Date">

            </ej:Column>

            <ej:Column DataType="string" Field="Update_Userid" HeaderText="Last Update by Userid">

            </ej:Column>

        </Columns>

        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete"></ToolbarSettings>

        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="false" ShowAddNewRow="false" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Dialog" />

    </ej:Grid>

                    <ej:Grid ID="TablesGrid" runat="server" AllowPaging="True" AllowScrolling="True" AllowFiltering="true" AllowSorting="True" MinWidth="0" DataSourceID="SqlDataSource2">

                        <ClientSideEvents ActionBegin="begin"/>

                        <Columns>

                            <ej:Column DataType="number" Field="tournament_id" IsPrimaryKey="True">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_id" IsPrimaryKey="True" HeaderText="Table Number">

                            </ej:Column>

                            <ej:Column DataType="boolean" Field="active" EditType="BooleanEdit" HeaderText="Active">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_type_id" EditType="DropdownEdit" ForeignKeyField="tabletypeid" ForeignKeyValue="tabledesc" HeaderText="Table Type">

                            </ej:Column>

                        </Columns>

                        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

                        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="true" ShowAddNewRow="False" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Normal" />

                    </ej:Grid>

       $(function () {

            var val;

            var $data = $('#MainContent_TablesGrid').ejGrid("instance")._dataSource();

            $('#<%= TournamentGrid.ClientID %>').ejGrid({

                rowSelected: function (args) {

                    val = val;

                    var tournamentId = args.data.tournament_id;

                    var detaildata = ej.DataManager($data).executeLocal(ej.Query().where("tournament_id", ej.FilterOperators.equal, tournamentId, false).take(10)); //filter the records based on tournament_id

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

                    gridObj.dataSource(detaildata.slice(0, 5)); //bind the datasource to detailGrid using dataSource method

                }

            });

        });

        function rowSelecting(args) {

            val = args.data.tournament_id;

        }

        function begin(args) {

            if (args.requestType == "add") {

                args.rowData.tournament_id = val; //get the value from Master Grid and assign

            }

        }

[Ed]

Here is the full code:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="MaintTournament.aspx.vb" Inherits="foosballtournaments.MaintTournament" %>

<%@ Register Assembly="Syncfusion.EJ.Web, Version=19.3460.0.45, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>

<%@ Register Assembly="Syncfusion.EJ, Version=19.3460.0.45, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>

<%@ Register Assembly="Syncfusion.EJ" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>

<%@ Register Assembly="Syncfusion.EJ.Web" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>

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

    <ej:Grid ID="TournamentGrid" runat="server" AllowPaging="True" ClientIDMode="Static" AllowScrolling="True" AllowSorting="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" EnableLoadOnDemand="False" MinWidth="0" AllowResizeToFit="true">

        <ClientSideEvents RowSelected="rowSelect" RowSelecting="rowSelecting"/>

        <SelectionSettings EnableToggle="true" />

        <Columns>

            <ej:Column AllowEditing="False" DataType="number" Field="tournament_id" IsIdentity="True" IsPrimaryKey="True" EditType="NumericEdit" HeaderText="Id">

            </ej:Column>

            <ej:Column DataType="number" Field="status_id" EditType="DropdownEdit" ForeignKeyField="statusvalue" ForeignKeyValue="statustext" HeaderText="Status">

            </ej:Column>

            <ej:Column DataType="string" Field="name" HeaderText="Name">

            </ej:Column>

            <ej:Column DataType="string" Field="location_name" HeaderText="Location">

            </ej:Column>

            <ej:Column DataType="string" Field="addr1" HeaderText="Addr 1">

            </ej:Column>

            <ej:Column DataType="string" Field="addr2" HeaderText="Addr 2">

            </ej:Column>

            <ej:Column DataType="string" Field="city" HeaderText="City">

            </ej:Column>

            <ej:Column DataType="string" Field="state" HeaderText="State">

            </ej:Column>

            <ej:Column DataType="string" Field="postal_code" HeaderText="Postal Code">

            </ej:Column>

            <ej:Column DataType="string" Field="country_cd" HeaderText="Country" EditType="DropdownEdit" ForeignKeyField="countrytypevalue" ForeignKeyValue="countrytypetext">

            </ej:Column>

            <ej:Column DataType="date" Field="from_dt" EditType="Datepicker" HeaderText="From Date">

            </ej:Column>

            <ej:Column DataType="date" Field="to_dt" EditType="Datepicker" HeaderText="To Date">

            </ej:Column>

            <ej:Column DataType="number" Field="reg_fee_Max" DefaultValue="0" HeaderText="Reg Fee Max" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="reg_fee_per_event" HeaderText="Reg Fee Per Event" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="total_reg_fee_package" HeaderText="Total Reg Fee Package" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_Max" HeaderText="Table Fee Max" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_per_event" HeaderText="Table Fee Per Event" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="table_fee_package" HeaderText="Table Fee Package" Format="{0:C2}">

            </ej:Column>

            <ej:Column DataType="number" Field="membership_id" EditType="DropdownEdit" ForeignKeyField="membershhiptypevalue" ForeignKeyValue="membershhiptypetext" HeaderText="Membership Points Used">

            </ej:Column>

            <ej:Column DataType="date" Field="Create_Dt" HeaderText="Create Date">

            </ej:Column>

            <ej:Column DataType="string" Field="Create_Userid" HeaderText="Create Userid">

            </ej:Column>

            <ej:Column DataType="date" Field="Update_Dt" HeaderText="Last Update Date">

            </ej:Column>

            <ej:Column DataType="string" Field="Update_Userid" HeaderText="Last Update by Userid">

            </ej:Column>

        </Columns>

        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete"></ToolbarSettings>

        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="false" ShowAddNewRow="false" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Dialog" />

    </ej:Grid>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TournamentConnectionString1 %>" DeleteCommand="DELETE FROM [Tournament] WHERE [tournament_id] = @tournament_id" InsertCommand="INSERT INTO [Tournament] ([name], [location_name], [addr1], [addr2], [city], [state], [postal_code], [country_cd], [from_dt], [to_dt], [reg_fee_Max], [reg_fee_per_event], [total_reg_fee_package], [table_fee_Max], [table_fee_per_event], [table_fee_package], [membership_id], [status_id], [Create_Dt], [Create_Userid], [Update_Dt], [Update_Userid]) VALUES (@name, @location_name, @addr1, @addr2, @city, @state, @postal_code, @country_cd, @from_dt, @to_dt, @reg_fee_Max, @reg_fee_per_event, @total_reg_fee_package, @table_fee_Max, @table_fee_per_event, @table_fee_package, @membership_id, @status_id, @Create_Dt, @Create_Userid, @Update_Dt, @Update_Userid)" SelectCommand="SELECT * FROM [Tournament]" UpdateCommand="UPDATE [Tournament] SET [name] = @name, [location_name] = @location_name, [addr1] = @addr1, [addr2] = @addr2, [city] = @city, [state] = @state, [postal_code] = @postal_code, [country_cd] = @country_cd, [from_dt] = @from_dt, [to_dt] = @to_dt, [reg_fee_Max] = @reg_fee_Max, [reg_fee_per_event] = @reg_fee_per_event, [total_reg_fee_package] = @total_reg_fee_package, [table_fee_Max] = @table_fee_Max, [table_fee_per_event] = @table_fee_per_event, [table_fee_package] = @table_fee_package, [membership_id] = @membership_id, [status_id] = @status_id, [Create_Dt] = @Create_Dt, [Create_Userid] = @Create_Userid, [Update_Dt] = @Update_Dt, [Update_Userid] = @Update_Userid WHERE [tournament_id] = @tournament_id">

        <DeleteParameters>

            <asp:Parameter Name="tournament_id" Type="Int32" />

        </DeleteParameters>

        <InsertParameters>

            <asp:Parameter Name="name" Type="String" />

            <asp:Parameter Name="location_name" Type="String" />

            <asp:Parameter Name="addr1" Type="String" />

            <asp:Parameter Name="addr2" Type="String" />

            <asp:Parameter Name="city" Type="String" />

            <asp:Parameter Name="state" Type="String" />

            <asp:Parameter Name="postal_code" Type="String" />

            <asp:Parameter Name="country_cd" Type="String" />

            <asp:Parameter Name="from_dt" Type="DateTime" />

            <asp:Parameter Name="to_dt" Type="DateTime" />

            <asp:Parameter Name="reg_fee_Max" Type="Decimal" />

            <asp:Parameter Name="reg_fee_per_event" Type="Decimal" />

            <asp:Parameter Name="total_reg_fee_package" Type="Decimal" />

            <asp:Parameter Name="table_fee_Max" Type="Decimal" />

            <asp:Parameter Name="table_fee_per_event" Type="Decimal" />

            <asp:Parameter Name="table_fee_package" Type="Decimal" />

            <asp:Parameter Name="membership_id" Type="Int32" />

            <asp:Parameter Name="status_id" Type="Int32" />

            <asp:Parameter Name="Create_Dt" Type="DateTime" />

            <asp:Parameter Name="Create_Userid" Type="String" />

            <asp:Parameter Name="Update_Dt" Type="DateTime" />

            <asp:Parameter Name="Update_Userid" Type="String" />

        </InsertParameters>

        <UpdateParameters>

            <asp:Parameter Name="name" Type="String" />

            <asp:Parameter Name="location_name" Type="String" />

            <asp:Parameter Name="addr1" Type="String" />

            <asp:Parameter Name="addr2" Type="String" />

            <asp:Parameter Name="city" Type="String" />

            <asp:Parameter Name="state" Type="String" />

            <asp:Parameter Name="postal_code" Type="String" />

            <asp:Parameter Name="country_cd" Type="String" />

            <asp:Parameter Name="from_dt" Type="DateTime" />

            <asp:Parameter Name="to_dt" Type="DateTime" />

            <asp:Parameter Name="reg_fee_Max" Type="Decimal" />

            <asp:Parameter Name="reg_fee_per_event" Type="Decimal" />

            <asp:Parameter Name="total_reg_fee_package" Type="Decimal" />

            <asp:Parameter Name="table_fee_Max" Type="Decimal" />

            <asp:Parameter Name="table_fee_per_event" Type="Decimal" />

            <asp:Parameter Name="table_fee_package" Type="Decimal" />

            <asp:Parameter Name="membership_id" Type="Int32" />

            <asp:Parameter Name="status_id" Type="Int32" />

            <asp:Parameter Name="Create_Dt" Type="DateTime" />

            <asp:Parameter Name="Create_Userid" Type="String" />

            <asp:Parameter Name="Update_Dt" Type="DateTime" />

            <asp:Parameter Name="Update_Userid" Type="String" />

            <asp:Parameter Name="tournament_id" Type="Int32" />

        </UpdateParameters>

    </asp:SqlDataSource>

    <ej:Tab ID="Tab1" runat="server">

        <Items>

            <ej:TabItem ID="Tables" runat="server" Text="Tables">

                <ContentSection>

                    <ej:Grid ID="TablesGrid" runat="server" AllowPaging="True" AllowScrolling="True" AllowFiltering="true" AllowSorting="True" MinWidth="0" DataSourceID="SqlDataSource2">

                        <ClientSideEvents ActionBegin="begin"/>

                        <Columns>

                            <ej:Column DataType="number" Field="tournament_id" IsPrimaryKey="True">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_id" IsPrimaryKey="True" HeaderText="Table Number">

                            </ej:Column>

                            <ej:Column DataType="boolean" Field="active" EditType="BooleanEdit" HeaderText="Active">

                            </ej:Column>

                            <ej:Column DataType="number" Field="table_type_id" EditType="DropdownEdit" ForeignKeyField="tabletypeid" ForeignKeyValue="tabledesc" HeaderText="Table Type">

                            </ej:Column>

                        </Columns>

                        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

                        <EditSettings AllowEditing="True" AllowDeleting="true" AllowAdding="true" AllowEditOnDblClick="true" ShowAddNewRow="False" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true" EditMode="Normal" />

                    </ej:Grid>

                </ContentSection>

             </ej:TabItem>

            <ej:TabItem ID="Events" runat="server" Text="Events">

             </ej:TabItem>

            <ej:TabItem ID="EventRanking" runat="server" Text="Event Ranking/Price Per Event">

            </ej:TabItem>

            <ej:TabItem ID="Prizes" runat="server" Text="Prizes">

            </ej:TabItem>

            <ej:TabItem ID="Packages" runat="server" Text="Packages">

            </ej:TabItem>

            <ej:TabItem ID="PackageEvents" runat="server" Text="Package Events">

            </ej:TabItem>

        </Items>

    </ej:Tab>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TournamentConnectionString1 %>" DeleteCommand="DELETE FROM [Tournament_Table] WHERE [tournament_id] = @tournament_id AND [table_id] = @table_id" InsertCommand="INSERT INTO [Tournament_Table] ([tournament_id], [table_id], [active], [table_type_id]) VALUES (@tournament_id, @table_id, @active, @table_type_id)" SelectCommand="SELECT * FROM [Tournament_Table] ORDER BY [table_id]" UpdateCommand="UPDATE [Tournament_Table] SET [active] = @active, [table_type_id] = @table_type_id WHERE [tournament_id] = @tournament_id AND [table_id] = @table_id">

        <DeleteParameters>

            <asp:Parameter Name="tournament_id" Type="Int32" />

            <asp:Parameter Name="table_id" Type="Int32" />

        </DeleteParameters>

        <InsertParameters>

            <asp:Parameter Name="tournament_id" Type="Int32"/>

            <asp:Parameter Name="table_id" Type="Int32" />

            <asp:Parameter Name="active" Type="Boolean" />

            <asp:Parameter Name="table_type_id" Type="Int32" />

        </InsertParameters>

        <UpdateParameters>

            <asp:Parameter Name="active" Type="Boolean" />

            <asp:Parameter Name="table_type_id" Type="Int32" />

            <asp:Parameter Name="tournament_id" Type="Int32" />

            <asp:Parameter Name="table_id" Type="Int32" />

        </UpdateParameters>

    </asp:SqlDataSource>

    <ej:Dialog ID="ErrorDialog" runat="server">

        <DialogContent>

            <div>

            <asp:Label ID="errortextlabel" runat="server"></asp:Label>

            </div>

            <div class="Dialog">

                <ej:Button ID="btnClose" runat="server" Size="Medium" Type="Button" Height="30" Width="150" OnClick="btnClose_Click" Text="Close"></ej:Button>

            </div>

        </DialogContent>

    </ej:Dialog>

    <ej:Dialog ID="ConfirmationDialog" runat="server">

        <DialogContent>

            <div>

            <asp:Label ID="conftextlabel" runat="server"></asp:Label>

            </div>

            <div>

                <ej:Button ID="btnOk" runat="server" Size="Small" Type="Button" Height="30" Width="150" OnClick="btnOk_Click" Text="Ok"></ej:Button>

            <ej:Button ID="btnCancel" runat="server" Size="Medium" Type="Button" Height="30" Width="150" OnClick="btnCancel_Click" Text="Cancel"></ej:Button>

            </div>

        </DialogContent>

    </ej:Dialog>

    <script type="text/javascript">

        function rowSelect(args) {

            var grid = $("#TournamentGrid").ejGrid("instance");

            var statusid = args.data.status_id

            //var tournamentid = args.data.tournament_id

            //status_id status_desc

            //0 Not Set

            //1 Active

            //2 Archive

            //3 Running

            //4 Complete

            if (statusid == 0) {

                $("#" + this.element.attr("id") + "_delete").addClass("e-enable");

                $("#" + this.element.attr("id") + "_edit").addClass("e-enable");

                var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems");

                var deletetoolbar = $("#" + grid.element.attr("id") + "_delete");

                var edittoolbar = $("#" + grid.element.attr("id") + "_edit");

                $toolbar.ejToolbar("enableItem", deletetoolbar);

                $toolbar.ejToolbar("enableItem", edittoolbar);

            }

            else {

                $("#" + this.element.attr("id") + "_delete").addClass("e-disable");

                $("#" + this.element.attr("id") + "_edit").addClass("e-disable");

                var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems");

                var deletetoolbar = $("#" + grid.element.attr("id") + "_delete");

                var edittoolbar = $("#" + grid.element.attr("id") + "_edit");

                $toolbar.ejToolbar("disableItem", deletetoolbar);

                $toolbar.ejToolbar("disableItem", edittoolbar);

            }

            //var detaildata = ej.DataManager($data).executeLocal(ej.Query().where("tournament_id", ej.FilterOperators.equal, tournamentId, false).take(10)); //filter the records based on tournament_id

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

            //gridObj.dataSource(detaildata.slice(0, 5)); //bind the datasource to detailGrid using dataSource method

        }

        function onClose() {

            $("#ErrorDialog").ejDialog("close");

        }

        //Test

        $(function () {

            var val;

            var $data = $('#MainContent_TablesGrid').ejGrid("instance")._dataSource();

            $('#<%= TournamentGrid.ClientID %>').ejGrid({

                rowSelected: function (args) {

                    val = val;

                    var tournamentId = args.data.tournament_id;

                    var detaildata = ej.DataManager($data).executeLocal(ej.Query().where("tournament_id", ej.FilterOperators.equal, tournamentId, false).take(10)); //filter the records based on tournament_id

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

                    gridObj.dataSource(detaildata.slice(0, 5)); //bind the datasource to detailGrid using dataSource method

                }

            });

        });

        function rowSelecting(args) {

            val = args.data.tournament_id;

        }

        function begin(args) {

            if (args.requestType == "add") {

                args.rowData.tournament_id = val; //get the value from Master Grid and assign

            }

        }

    </script>

</asp:Content>

[Jagadesh Ram Raajkumar]

Hi Ed, 

Thanks for the update.

Upon validating your code on our end, we couldn’t reproduce the error you faced. But we would like you to set the debugger as shown in the screenshot below to verify whether the row selection triggers the mapped events and share it with us. Since the filtering of the data in the TablesGrid is present in the rowSelected event handler.

Screenshots: https://www.syncfusion.com/downloads/support/forum/170181/ze/screenshot395420829

If you are still facing the issue, kindly check whether the variable ‘$data’ is populated or not and share it with us. Along with this, share the details below:- 

1. Screenshot of Script Error(if any occurs on console window).
2. Also RowSelected event has been bound multiple times in your provided code. Please ensure to remove this.

 

3. Video demo to replicate the issue(On rowselect).

Regards,
Jagadesh Ram