Show Sub Item List in Popup Grid

[ssnurudeen]

I have got entity say job it contains List of task I want to show job property inside an ejGrid (MVC) and when i click custom command button i want to show all the task related to job in popup as grid how to do this using syncfusion grid MVC

[Sellappandi Ramu]

Dear Customer,

Thanks for contacting Syncfusion support,

We have created a sample based on your requirement and it will show the employee details in grid while click on command button.

Please refer to the example code and sample,

@(Html.EJ().Grid<MVCGrid.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

       .EnableRowHover(false)

        .AllowSelection(false)

        .Columns(col =>

        {

            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();

            col.HeaderText("Employee Details").Commands(command =>

            {

                command.Type("detail")

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "Details",

                           Width = "100px",

                           Click = "onClick"

                       }).Add();

            })

            .IsUnbound(true)

            .TextAlign(TextAlign.Center)

            .Width(150)

            .Add();

        })

)

@(Html.EJ().Dialog("commanddialog")

        .Width(450)

        .Title("Details of employee")

        .ShowOnInit(false)

        .EnableResize(false)

        .Target("#FlatGrid")

)

}

<div id="Grid"></div>

    <script type="text/javascript">

        function onClick(args) {

            $("#Grid").data("ejGrid") !== undefined && $("#Grid").ejGrid("destroy");

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

            var index = this.element.closest("tr").index();

            var record = grid.getCurrentViewData()[index];

            $("#Grid").ejGrid({

                dataSource: [record],

                columns: [

                        { field: "FirstName", headerText: "First Name",  width: 110 },

                        { field: "LastName", headerText: "Last Name",  width: 110 },

                        { field: "HireDate", headerText: "Hire Date", format:"{0:MM/dd/yyyy}",  width: 110 },

                        { field: "Country", headerText: "Country",  width: 110 }]

        });

            $("#commanddialog").append($("#Grid"))

                .ejDialog("option", { position: { X: this.element.offset().left - 455, Y: this.element.offset().top } })

                .ejDialog("open");

        }
    </script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCGrid_121238-16618671171112577497.zip

Refer to the attached output screen shot,

Regards,
Sellappandi R

[ssnurudeen]

How to populate JSON string (List of task) Like this

Eg : When i click details button i want to populate

JSON List in new window
[{"Id":190,"TaskId":190,"TaskNo":"SH_M0NF8URW_1","State":"Open","Name":null},
{"Id":201,"TaskId":201,"TaskNo":"SH_M0NF8URW_12","State":"Open","Name":null},
{"Id":202,"TaskId":202,"TaskNo":"SH_M0NF8URW_13","State":"Open","Name":null}] 

[Sellappandi Ramu]

Dear Customer,

We can assign the JSON data directly to grid using dataSource property while click details button.

Refer to the online help documentation for grid data binding and code snippet.

Document: https://help.syncfusion.com/js/grid/data-binding

Please refer to the code example and modified sample,

@(Html.EJ().Grid<MVCGrid.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

       .EnableRowHover(false)

        .AllowSelection(false)

        .Columns(col =>

        {

            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();

            col.HeaderText("Employee Details").Commands(command =>

            {

                command.Type("detail")

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "Details",

                           Width = "100px",

                           Click = "onClick"

                       }).Add();

            })

            .IsUnbound(true)

            .TextAlign(TextAlign.Center)

            .Width(150)

            .Add();

        })

)

@(Html.EJ().Dialog("commanddialog")

        .Width(450)

        .Title("Details of Task")

        .ShowOnInit(false)

        .EnableResize(false)

        .Target("#FlatGrid")

)

<div id="Grid"></div>

   <script type="text/javascript">

        var data = [{ "Id": 190, "TaskId": 190, "TaskNo": "SH_M0NF8URW_1", "State": "Open", "Name": null },

                    { "Id": 201, "TaskId": 201, "TaskNo": "SH_M0NF8URW_12", "State": "Open", "Name": null },

                    { "Id": 202, "TaskId": 202, "TaskNo": "SH_M0NF8URW_13", "State": "Open", "Name": null }]

        function onClick(args) {

            $("#Grid").data("ejGrid") !== undefined && $("#Grid").ejGrid("destroy");

            $("#Grid").ejGrid({

                dataSource: data,// Bound the JSON data

            });

            $("#commanddialog").append($("#Grid"))

                .ejDialog("option", { position: { X: this.element.offset().left - 455, Y: this.element.offset().top } })

                .ejDialog("open");

        }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCGrid-81666755-359140297.zip

Regards,
Sellappandi R

[ssnurudeen]

Hello sir,

I am getting this error.

Attachment: Error_474c27b.rar

[Sellappandi Ramu]

Dear Customer,

The reported issue will reproduce when we perform the datamanager operation in null dataSource. Please share the following information to us, it will help us to provide the prompt solution.

1.       Please check whether you have the data before assign to the grid dataSource.

2.       Essential studio version details.

3.       Full code snippet of client and server side.

4.       Provide the issue reproducing sample, if it is possible. It will help us to provide the better solution sooner.

Regards,
Sellappandi R

SIGN IN To post a reply.