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

some functions in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121051 Nov 5,2015 08:43 PM UTC Nov 9,2015 09:21 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Harry Zheng
Asked On November 5, 2015 08:43 PM UTC

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 [Syncfusion]
Replied On November 6, 2015 10:37 AM UTC

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
Replied On November 6, 2015 09:07 PM UTC

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

 
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.

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

;