Editing values on detail template

[Lory]

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]

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.