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.
Unfortunately, activation email could not send to your email. Please try again.

Show Sub Item List in Popup Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121238 Nov 20,2015 11:46 PM Dec 8,2015 05:00 AM ASP.NET MVC 5
loading
Tags: Grid
ssnurudeen
Asked On November 20, 2015 11:46 PM

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 04:36 AM

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 12:14 AM

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 01:46 AM

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 07:36 AM

Hello sir,

I am getting this error.


Attachment: Error_474c27b.rar

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

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.

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.

;