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

Editing values on detail template

Thread ID:

Created:

Updated:

Platform:

Replies:

121757 Jan 21,2016 07:53 PM UTC Jan 22,2016 09:23 AM UTC JavaScript 1
loading
Tags: ejGrid
Lory
Asked On January 21, 2016 07:53 PM UTC

Hi Team,

I have an ejGrid that uses detail template. One of the tabs displays the details of the record and has a button for editing this information. However I can't get the button to trigger the click event. I also need to get the primary key of the clicked button.  Basically it should work similar to a custom command or command column but on the Tab detail level instead of the main grid. How can this be achieved?

Thanks.

Attachment: EssentialStudioforJavaScriptDetailTemplate_73978bc5.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On January 22, 2016 09:23 AM UTC

Hi Lory,

Query #1: However I can't get the button to trigger the click event.

In your code example, you have rendered the ejButton in the document ready, which is present in the detail template. So, the button is not rendered as ejButton and the click event has not been triggered. To resolve this problem, you have to render the ejButton within the detailsDataBound event like rendering the detailsGrid, ejChart. Please refer to the code example.

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)),

                detailsTemplate: "#tabGridContents",

                detailsDataBound: "detailGridData",

                . . . ..

            });

        });

        function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid").ejGrid({

                 . . ..

            });


            e.detailsElement.css("display", "");

            e.detailsElement.find("#detailChart" + filteredData).ejChart(

    {


         . . .  . .

    });

            e.detailsElement.find("#btnEdit").ejButton({

                showRoundedCorner: true,

                size: "small",

                click: function (args) {

                    var obj = $("#Grid").ejGrid("instance");

                     . .. . .

                }

            });

            e.detailsElement.find(".tabcontrol").ejTab({

                selectedItemIndex: 1,

            });

        }
    </script>


Query #2: I also need to get the primary key of the clicked button.

getPrimaryKeyFieldNames will get the primary key name of the parent Grid. To get the value of current parent record from the detailTemplate or after clicking the button, we have to fetch the id of button and through which we can get the value of primarykey of parent Grid.

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

        <div class="tabcontrol" id="Test">

            <ul>

                <li><a rel='nofollow' href="#detailChart{{:EmployeeID}}">Stock Chart</a></li>

                <li><a rel='nofollow' href="#gridTab{{:EmployeeID}}">Stock Grid</a></li>

                <li><a rel='nofollow' href="#detailTab{{:EmployeeID}}">Details</a></li>

            </ul>

            <div id="detailChart{{:EmployeeID}}">

            </div>

            <div id="gridTab{{:EmployeeID}}">

                <div id="detailGrid{{:EmployeeID}}">

                </div>

            </div>           

               <div id="detailTab{{:EmployeeID}}">

                <table class="CardTable" cellpadding="3" cellspacing="2">

                     . . .    

                </table>

            </div>

        </div>

    </script>


    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                // the datasource "window.employeeView" is referred from jsondata.min.js

                dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)),

                detailsTemplate: "#tabGridContents",

                detailsDataBound: "detailGridData",

                columns: [

                          { field: "EmployeeID", isPrimaryKey: true },

                           . .. .

                ]

            });

        });

        function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            // the datasource "window.ordersView" is referred from jsondata.min.js

            var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid" + filteredData).ejGrid({

                . . . .

            });


            e.detailsElement.css("display", "");

            e.detailsElement.find("#detailChart" + filteredData).ejChart(

    {

         . .. ..

    });

            e.detailsElement.find("#btnEdit").attr("data-id", filteredData).ejButton({

                showRoundedCorner: true,

                size: "small",

                click: function (args) {

                    var obj = $("#Grid").ejGrid("instance");//Parent Grid

                    var fieldName= obj.getPrimaryKeyFieldNames()[0];

                    var primaryKeyValue = this.element.data("id");// Value of Primarykey from button attr data-id

                     . . .     .. … . .

                }

            });

            e.detailsElement.find(".tabcontrol").ejTab({

                selectedItemIndex: 1,

            });

        }
    </script>



Query #3: Basically it should work similar to a custom command or command column but on the Tab detail level instead of the main grid. How can this be achieved?

Using startEdit(), we can edit the parent grid from the button click event of detailsTemplate. Refer to the code example.

            e.detailsElement.find("#btnEdit").attr("data-id", filteredData).ejButton({

                showRoundedCorner: true,

                size: "small",

                click: function (args) {

                    var obj = $("#Grid").ejGrid("instance");//Parent Grid

                    var primaryKeyValue = this.element.data("id");

                    var index = this.element.closest("tr.e-detailrow").prev().index();

                    obj.startEdit($(obj.getRows()[index]));//editng fetched data                }
            });


We have prepared a sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/ljjc2ze4

We also found that you have given the ID as “detailGrid” for details Grid. This will leads to conflict in each functionality done in the detailsGrid. So use a unique id. Refer to the code example.

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

        <div class="tabcontrol" id="Test">

              . . . .. .

            <div id="detailChart{{:EmployeeID}}">

            </div>

            <div id="gridTab{{:EmployeeID}}">

                <div id="detailGrid{{:EmployeeID}}">

                </div>

            </div> 

              . . . …

        </div>

    </script>


        function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            // the datasource "window.ordersView" is referred from jsondata.min.js

            var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid" + filteredData).ejGrid({//Done necessary changes in the detailGridData.

                . . . .

            });

             . . . . ..  .

        }



Refer to the following Help Documents for different methods and events of ejGrid.

http://help.syncfusion.com/js/api/ejgrid#methods:getprimarykeyfieldnames

http://help.syncfusion.com/js/api/ejgrid#methods:startedit

http://help.syncfusion.com/js/api/ejgrid#events

Regards,
Seeni Sakthi Kumar S.

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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;