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

Show Sub Item List in Popup Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121238 Nov 21,2015 04:46 AM UTC Dec 8,2015 10:00 AM UTC ASP.NET MVC 5
loading
Tags: Grid
ssnurudeen
Asked On November 21, 2015 04:46 AM UTC

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 [Syncfusion]
Replied On November 23, 2015 09:36 AM UTC

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: http://www.syncfusion.com/downloads/support/forum/121238/ze/MVCGrid_121238-1661867117

Refer to the attached output screen shot,

Regards,
Sellappandi R

ssnurudeen
Replied On November 24, 2015 05:14 AM UTC

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 [Syncfusion]
Replied On November 25, 2015 06:46 AM UTC

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: http://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: http://www.syncfusion.com/downloads/support/forum/121238/ze/MVCGrid-81666755

Regards,
Sellappandi R

ssnurudeen
Replied On December 7, 2015 12:36 PM UTC

Hello sir,

I am getting this error.


Attachment: Error_474c27b.rar

Sellappandi Ramu [Syncfusion]
Replied On December 8, 2015 10:00 AM UTC

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

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.

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

;