some functions in grid

[Harry Zheng]

Hi,

I am starting to use grid in asp.net mvc 5 project, and wonder how I can implement these functions in grid (I have been using tree grid, and know how to implement those functions in tree grid, but not in grid)..

1.Hierarchy grid: I am new to this function. Please give me an example for this function. Particularly I am not clear how to provide data to child grid, and how child grid data connected to parent grid data.

2. How to update child grid data whenever parent data is changed?

3. Is there a function to refresh data for certain row in grid? such as in tree grid, you have refreshRow() method.

4. How to get the index for the row I am editing?

5. How to calculate the sum for the value from certain column in grid? For example, I have a column "Percentage", in which all the value are numbers. How can I get the total percentage for this column?

6. How to add hyperlink to certain column(custom column)?

7. How to use BeginEdit event to make some columns are editable but others are not? I know we can do it using AllowEditting, but wonder how we can do it using BeginEdit like in tree grid.

Thank you,

Harry

[Jayaprakash Kamaraj]

Hi Harry,

Query	Response
how to provide data to child grid, and how child grid data connected to parent grid data.	Hierarchy Grid feature allows you to add the Grid control inside the Grid row. When you want to view the child Grid, you can expand the Grid. Bind the data to child Grid by assigning the foreign key field to” query string” property. Please refer the below code example, Help documentation, and sample. Code Example: .Columns(col =>         {             col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();             col.Field("FirstName").HeaderText("First Name").Width(100).Add();             col.Field("Title").Width(120).Add();             col.Field("City").Width(100).Add();             col.Field("Country").Width(100).Add();         }) .ChildGrid(child =>                  {                      child.Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/")                         .QueryString("EmployeeID")                         .AllowPaging()                         .Columns(col =>                         {                             col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();                             col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add();                             col.Field("Freight").Width(120).Add();                             col.Field("ShipName").Width(100).Add();                         })                         .ChildGrid(d =>                         {                             d.Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Customers/")                            .QueryString("CustomerID")                            .Columns(col =>                         {                             col.Field("CustomerID").HeaderText("CustomerID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();                             col.Field("Phone").HeaderText("Phone").Width(100).Add();                             col.Field("Address").Width(120).Add();                             col.Field("Country").Width(100).Add();                         });                         });                  }) ) Help documentation : http://help.syncfusion.com/aspnetmvc/grid/hierarchy-grid Sample : http://www.syncfusion.com/downloads/support/forum/121051/ze/SyncfusionMvcApplication3708769152
How to update child grid data whenever parent data is changed?	Please share the following information to provide a prompt solution. 1. Do you want to edit parent and child grid at a time? 2. Do you to perform any other actions done in child Grid while updating parent grid?
Is there a function to refresh data for certain row in grid? such as in tree grid, you have refreshRow() method.	Please share the following information to us for your requirement. It will help us to provide the prompt solution.                                Do you want to refresh all the child grids data for a particular parent row?
How to get the index for the row I am editing?	We have achieved your requirement using beginEdit event, which is used to get index of the edited row. Please refer to the below code example and Help documentation   .ClientSideEvents(eve => { eve.BeginEdit("beginedit"); }) …. …. <script type="text/javascript"> function beginedit(args) {     alert("gridObj.selectedRowIndex->" + args.rowIndex); } </script> Help document : http://help.syncfusion.com/js/api/ejgrid#events:beginedit
How to calculate the sum for the value from certain column in grid? For example, I have a column "Percentage", in which all the value are numbers. How can I get the total percentage for this column?	We can render summary rows using “showSummary” and “SummaryRow” properties in ejGrid. Please refer to the below code example, Help documentation and sample. Code example: .ShowSummary()                 .SummaryRow(row =>                 {                     row.Title("Sum").SummaryColumns(col => { col.SummaryType(SummaryType.Sum).Format("{0:C}").DisplayColumn("Freight").DataMember("Freight").Add(); }).Add();                 }) Help documentation : http://help.syncfusion.com/aspnetmvc/grid/summary Sample : http://www.syncfusion.com/downloads/support/forum/121051/ze/SyncfusionMvcApplication3708769152
How to add hyperlink to certain column(custom column)?	Already we have discussed the same in the below Knowledge Base, Link : https://www.syncfusion.com/kb/3768/how-to-place-hyperlink-in-grid-column
How to use BeginEdit event to make some columns are editable but others are not? I know we can do it using AllowEditting, but wonder how we can do it using BeginEdit like in tree grid.	We have achieved your requirement using actioncomplete event. This event triggers for every grid action success event. Please refer the below code example and Help documentation, Code example: function actioncomplete(args) {     if (args.requestType == "beginedit")         $(args.target).find(".e-editedrow").find("input:visible").eq(2).addClass("e-disable").attr("disabled", true); } Help Documentation:  http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete

Regards,

Jayaprakash K.

[Harry Zheng]

Hi Jayaprakash,

Thank you for your solutions.

Query1. Can we use ViewBag as datasource to pass data tochild grid?

Query2. Please share the following information to provide a prompt solution.

1. Do you want to edit parent and child grid at a time?

No. I just want to edit parent.
2. Do you to perform any other actions done in child Grid while updating parent grid?

No other action.

Query3. Do you want to refresh all the child grids data for a particular parent row?
Yes. Refresh all the child grids data for a particular parent row.

Query 5. I just want to get the number for the total percent, not summary row. I will use that number for other purpose. How can I get that number?

Thank you,

Harry

[Jayaprakash Kamaraj]

 
Hi Harry,

Query1: Can we use View Bag as datasource to pass data tochild grid?

We are able to use Viewbag as DataSource to pass data to the child Grid. Please refer to the below code example,

Code example,

child.Datasource((IEnumerable<object>)ViewBag.dataSource1)

                        .QueryString("EmployeeID")

                        .AllowPaging()

                        .Columns(col =>

                        {

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

                            col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();

                            col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();

                            col.Field("ShipPostalCode").HeaderText("Ship Postal Code").TextAlign(TextAlign.Right).Width(100).Add();

                        });
                 })

Query 2: Just want to edit parent grid: 

You want to enable editing behavior for parent Grid. Please refer the below code example,
Code example,

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

Query 3: Refresh all the child grids data for a particular parent row.

We have achieved your requirement using Rowselected event. This event is used to trigger after grid row selected. Please refer to the below code example,

Code example:

function rowselected(args) {

    var gridobj = $("#FlatGrid").ejGrid("instance")

    if (gridobj.getContentTable().find("tr").eq(0).children().hasClass("e-detailrowexpand")) {

        x = args.rowIndex;

        var childobj = $("#child1_grid" + x + "").ejGrid("instance");

        childobj.refreshContent();

    }
}

Query 4: I just want to get the number for the total percent, not summary row. I will use that number for other purpose. How can I get that number?

We have achieved your requirement using sum method. We have invoked the method ej.sum in Grid databound event which is triggered while Grid bound with data during initial rendering. Please refer to the below code example,

Code example:

    function databound(args) {

        var sumvalue = ej.sum(this.model.dataSource, "Freight");

        alert("gridObj.summaryrowvalue->" +sumvalue);
    }

Sample: http://www.syncfusion.com/downloads/support/forum/121051/ze/SyncfusionMvcApplication3-2046017440
Regards,
Jayaprakash K.