ShowHide Column

[Rajiv Kumar]

Hi,
 We have a requirement to change the number of columns in a grid. The details are in the attachment.

Thanks,
Rajiv

Attachment: ShowHideColumns_3f7dbc3b.zip

[Prabu Sarvesan]

Hi Ragiv,

 

We are sorry for the inconvenience caused.

 

Query 1: (Issue of horizontal scroll bar has not been solved)

 

We are able to reproduce this issue in Essential studio version 10.2.0.75. But, this issue has been fixed in our updated releases. We need to validate whether that fix will work on lower version (10.2.0.75). So, we will update you with further details regarding this issue on May 5, 2014.

 

In the meantime we suggest you to use following code snippets to resolve your issue,

 

Code snippets:

 

[SCRIPT]

 

<script type="text/javascript">

 

Sys.Application.add_load(function () {

$find("DatatableSample")._resizer._ResizeToFitAllvColumns();

});

 

</script>

 

 

For your convenience we have created a simple sample and the same can be download from below link,

 

 

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/general/Sample-655301430.zip

 

 

Query 2: (What’s the best way to shows a grid with 0 records when nothing is found in the search result)

 

 

We are facing some issue while performing search operation in Grid which uses Data Table as data source. So, we need time to analyze on this and we will update you with further details on May 5, 2014.

 

 

Query 3:  (Just a reminder that we are using IEnumerable<System.Data.DataRow>)

 

From now on we will provide you Grid sample with Data Table Binding.

 

Query 4: (But the Allow scrolling and Scroll Option is not available in my intellisense)

 

In our previous update we have mistakenly considered your requirement as Asp .net MVC Grid. So, please ignore the previous update except Show/Hide column solution. Since, in both (Asp .net MVC and Asp .net MVC classic) the solution for Show/Hide column query is same.

 

Please let us know if you need any further assistance.

 

Regards,

 

Prabhu Sarvesan

[Prabu Sarvesan]

Hi Rajiv,

 

Query 1: (But then it takes long time to load the page with grid)

 

We would like to let you know that due large number of columns, the Grid will take long time to load. So, to avoid this issue we suggest you to use pager on your Grid. Please refer the below code snippets,

 

Code Snippets:

 

[CSHTML]

 

@(Html.Syncfusion().Grid<System.Data.DataRow>("DatatableSample")

...

.EnablePaging()

.PageSettings(page =>

{

page.AllowPaging(true);

page.PageCount(4);

})

…

)

 

 

Query2: (What is the real issue? Is it an issue with old version of the grid?)

 

We are sorry for the inconvenience caused.

 

We are not able to understand which issue (Whether horizontal scrolling issue or Grid takes long time to load) you are mentioning in this query.

 

So, to avoid confusion please mention the issue.

 

Query3: (Why it takes long time to hide and show the columns?)

 

We would like to let you know that with our current implementation behavior the client side show/hide column method will process each cell when it is called. So, it takes time to show/hide columns and to avoid this issue we suggest you to make a server post to re render the grid with required columns.

 

For your convenience we have modified the previous updated sample and the same can be downloaded from below link,

 

Sample Link:

 

http://www.syncfusion.com/downloads/support/directtrac/general/Sample399026579.zip

 

Query4: (Is there any advantage of using the new assemble EJ? We are ready to use the new version if we get solution to our issue)

 

We have forwarded this query to concern team and they will update you the response for this query.

 

Please let us know if you need any further assistance.

 

Regards,

 

Prabhu Sarvesan

[Sakthi G]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Friday, April 25, 2014 4:30 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116211, ShowHide Column, has been updated.

 

HI ,

    Thanks for your reply . I was able to use your HIDE/UNHIDE sample but issue of horizontal scroll bar has not been solved. The details are in the attachment.

 

Also  what’s the best way to shows a grid with 0 records when nothing is found in the search result. Just a reminder that we are using

IEnumerable<System.Data.DataRow>

 

As our model.

Thanks,

Rajiv

[Sakthi G]

Posting Customer's attachment

Attachment: 116211_4263c431.zip

[Ragavee U S]

Hi Rajiv

Thanks for using Syncfusion Products.

We went through your coding for scrolling and found that the syntax for the scrolling is defined incorrectly.

.Scrolling(scroll =>

    {

        scroll.AllowScrolling(true);

        scroll.Height(500);

    })

 

 

Please refer the code snippet below for the correct syntax for scrolling.

@(Html.EJ().Grid<OrdersView>("Sample")

. . .

.AllowScrolling()

.ScrollOption(scroll => {scroll.Height(500);})

. . .

.Render())

 

Regarding your requirement on show/hide columns on clicking a link, please refer the code snippet below

@Html.EJ().Button("All").ClientSideEvents(eve => { eve.Click("onclick"); }).Render()

@Html.EJ().Button("Address").ClientSideEvents(eve => { eve.Click("onclick"); }).Render()

<script type="text/javascript">

    function onclick() {

        var gridObj = $("#Sample").data("ejGrid");       

        if (this.element[0].id == "All") {           

            gridObj.showColumns(["Order ID", "Customer ID", "Freight","Ship Address","Ship City"]);

            }

        else {           

            gridObj.hideColumns(["Order ID","Customer ID","Freight","Ship City"]);

        }

    }

</script>

 

For your convenience, we have created a simple sample based on your request and the same can be downloaded from the attachment.

Please let us know if you have any queries. 

Regards,

Ragavee U S

Attachment:

Attachment: Sample_f893142b.zip

[Revathi K]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Wednesday, April 30, 2014 5:19 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116211, ShowHide Column, has been updated.

 

Hi Prabhu,

    Please find the details of the solution of horizontal scroll bar in the attachment.

 

Thanks,

Rajiv

Attachment: HorizontalScrollBarIssue_e859a98b.zip

[Revathi K]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Thursday, May 01, 2014 3:36 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116211, ShowHide Column, has been updated.

 

Hi,

     I tried to use the current version (12.1.0.43) of the grid but could not find any solution to my problem. The only difference I could see is the way grid is being created in code:

@(Html.EJ().Grid<OrdersView>("Formatting")

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

                        .Columns(col =>

                        {

                            col.Field("Number").Format("{0:n2}").TextAlign(TextAlign.Right).Width(110).Add();

                            col.Field("Currency").Format("{0:c2}").TextAlign(TextAlign.Right).Width(110).Add();

                            col.Field("Date").Format("{0:MM/dd/yyyy}").TextAlign(TextAlign.Right).Width(110).Add();

                        })

                        .Render())

 

Instead of

    @(Html.Syncfusion().Grid<System.Data.DataRow>("GridEntity")

    .Datasource(Model)

    .ClientSideEvents(eve => eve.OnRecordSelectionEvent("SelectionHandler"))

    .ClientSideEvents(eve => eve.OnLoad("HideColumn"))

    .Caption((string)ViewBag.selectedEntity)

    .Scrolling(scroll => scroll.AllowScrolling(true).Width(800).Height(500)  )

     )

 

Is there any advantage of using the new assemble EJ? We are ready to use the new version if we get solution to our issue.

 

Thanks ,

Rajiv

[Sakthi G]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Monday, May 05, 2014 4:12 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116211, ShowHide Column, has been updated.

 

Hi Prabhu,

                    I used the following javascript code to resolve my scrolling issue.

Sys.Application.add_load(function () {

$find("DatatableSample")._resizer._ResizeToFitAllvColumns();

});

 

Question1: How do we use the above code in case there are more than one grid on a view(MVC application). The second grid is loaded on click of a row of the first grid on the same view.

Question2: Is there any reason why it takes more time to load the data in the grid in Internet Explorer(IE 8). Also when I use the IP in the url the above code does not work in IE. Is it known issue with IE?

 

Thanks,

Rajiv

[Madhu Sudhanan P]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Thursday, May 01, 2014 3:36 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116211, ShowHide Column, has been updated.

 

Hi,

     I tried to use the current version (12.1.0.43) of the grid but could not find any solution to my problem. The only difference I could see is the way grid is being created in code:

@(Html.EJ().Grid<OrdersView>("Formatting")

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

                        .Columns(col =>

                        {

                            col.Field("Number").Format("{0:n2}").TextAlign(TextAlign.Right).Width(110).Add();

                            col.Field("Currency").Format("{0:c2}").TextAlign(TextAlign.Right).Width(110).Add();

                            col.Field("Date").Format("{0:MM/dd/yyyy}").TextAlign(TextAlign.Right).Width(110).Add();

                        })

                        .Render())

 

Instead of

    @(Html.Syncfusion().Grid<System.Data.DataRow>("GridEntity")

    .Datasource(Model)

    .ClientSideEvents(eve => eve.OnRecordSelectionEvent("SelectionHandler"))

    .ClientSideEvents(eve => eve.OnLoad("HideColumn"))

    .Caption((string)ViewBag.selectedEntity)

    .Scrolling(scroll => scroll.AllowScrolling(true).Width(800).Height(500)  )

     )

 

Is there any advantage of using the new assemble EJ? We are ready to use the new version if we get solution to our issue.

 

Thanks ,

Rajiv

Hi Rajiv,

 

Please find the response.

 

Query: “Is there any advantage of using the new assemble EJ? We are ready to use the new version if we get solution to our issue”

 

Advantages in new ASP.Net MVC control:

 

1.       The new ASP.Net MVC control is fully client based.

2.       It has HTML5 support.

 

The issues reported in MVC Classic Grid control such as “Horizontal Scrollbar issue” and “Searching datatable issue” are not reproduced in new ASP.Net MVC control. But in MVC Grid control, we don’t have support to provide the grid datasource as DataTable, we have logged “DataTable support for datasource in MVC Wrapper” as a feature request. Please find the feature details from the following link.

 

FR Detail:  http://www.syncfusion.com/support/directtrac/features/SFMVC-45.

 

For now we can bind the DataTable to the grid by converting it to IEnumerable as follow.

 

 

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

            Dictionary<string, object> row;

            foreach (DataRow dr1 in dt.Rows)

            {

                row = new Dictionary<string, object>();

                foreach (DataColumn col in dt.Columns)

                {

                    row.Add(col.ColumnName, dr1[col]);

                }

                rows.Add(row); //Converted the DataTable into List

            }

 

 

 

For your convenience, we have created a simple sample and the same can be downloaded from the below location.

 

Sample Location: Forum_DataTable.zip

 

In the above sample we have achieved your requirement for Show and hide column based on link clicked.

 

For now we have provided the Unedited documentation copy of the Getting Started ASP.Net MVC Grid control and the same can be downloaded from the below link.

 

Document Link: Getting_Started_MVC_grid_updatednew.zip

 

For your convenience we have also created a getting started video for ASP.Net MVC Grid control and the same can be downloaded from the following location.

 

Video Link: aspmvc.zip

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Sakthi G]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Thursday, May 08, 2014 4:59 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116243, ShowHide Column, has been updated.

Hi.

    I have few more questions in the attachment.

 

Thanks,

Rajiv

Attachment: Resize_Columns_67c226b6.zip

[Prabu Sarvesan]

Hi Rajiv,

We are sorry for the inconvenience caused.

Before we start providing you the solution could you please confirm whether your requirement has been satisfied with Asp .net MVC (EJ MVC) Grid control solution updated on May 8, 2014?

If not please confirm your Essential studio version with us to avoid confusion, because you have mentioned two different versions (10.234.0.75 and 12.1.0.43) in your previous updates.

The information provided would be great help for us to resolve your issue.

Please let us know if you have any queries.

Regards,

Prabhu Sarvesan

[Sakthi G]

From: Rajiv Kumar [mailto:[e-mail]]
Sent: Friday, May 09, 2014 5:01 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 116243, ShowHide Column, has been updated.

 

Hi Prabhu,

         I was able to show/hide columns. The biggest problem we are facing right now is the resizing of the columns using the following code:

    if (typeof (Sys) !== 'undefined') {

        $find("Property")._resizer._ResizeToFitAllvColumns();

    }

We have around 15-20 columns and 5-6 grids on a detail page. Currently we are using 10.234.0.75. It takes long time to load.

 

The functionalities we need are as follows:

1)      Be able to display variable number of columns in the grid and that’s the reason we have used IEnumerable<System.Data.DataRow> as our model

2)      Be able to selectively hide/show columns  

3)      If possible no need to call the above JavaScript to resize them.

We are ready to use the latest version if we get the above functionality with performance. Also is it the best model we are using to achieve variable number of columns?

 

Here are the functionality that is nice to have

1)      In a grid can we have only one  row editable(if yes how to validate the data during editing)?

2)      Can we have a link in one of the columns to open a new popup window.?

 

Thanks,

Rajiv

[Prabu Sarvesan]

Hi Rajiv,

 

Please find the solution for your queries.

 

Query 1: (Can we have a link in one of the columns to open a new popup window?)

 

We would like to let you that your requirement has been achieved using “QueryCellInfo” event. Please refer the below code snippets to achieve your requirement,

 

Code Snippets:

 

[CSHTML]

 

@(Html.Syncfusion().Grid<System.Data.DataRow>("Grid1")

...

.QueryCellInfo(cell => Html.RenderAction("QueryAction", "Home", new { args = cell }))

...

)

 

 

[CS]

 

 

// to trigger query cell info event while post

 

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult DataTableGrid(PagingParams args)

{

...

var engine = new DataSource().GetDataSource(tableName).AsEnumerable().GridActions<System.Data.DataRow>() as GridHtmlActionResult<System.Data.DataRow>;

engine.GridModel.QueryCellInfo = QueryAction;

return engine;

}

 

// Query cell info event definition

 

[ChildActionOnly]

public void QueryAction(GridTableCell<System.Data.DataRow> args)

{

if (args.TableCellType == GridTableCellType.RecordFieldCell || args.TableCellType == GridTableCellType.AlternateRecordFieldCell)

{

 

if (args.Column.MappingName == "ShipCountry")

{

var anchorTag = new TagBuilder("a");

anchorTag.InnerHtml = args.Text.ToString();

anchorTag.MergeAttribute("rel='nofollow' href", "#");

anchorTag.MergeAttribute("onclick","window.open()");

args.Text = anchorTag;

}

 

}

 

}

 

 

For your convenience we have depicted this requirement in the attached sample.

 

 

To know more details about Query cell info event please refer the below documentation link,

 

 

http://help.syncfusion.com/ug/asp.net%20mvc/grid/default.htm#!Documents/querycellinfoaction.htm

 

 

Query 2: (In a grid can we have only one row editable (if yes how to validate the data during editing)?)

 

 

We would like to let you know that your requirement has been achieved using “OnActionBegin” event. Please refer the below code snippets,

 

 

Code Snippets:

 

 

[CSHTML]

 

 

@(Html.Syncfusion().Grid<System.Data.DataRow>("Grid1")

 

...

 

.ClientSideEvents(events =>

{

events.OnActionBegin("actionBegin");

})

...

 

)

 

 

[SCRIPT]

 

 

// Row with primary key value 10250 is only editable others cannot be edited

 

function actionBegin(sender, args) {

if (args.requestType == "BeginEdit") {

if (sender.primarykeyValue.toString() != "10250") {

args.cancel = true;  // to prevent current action

}

}

}

 

 

For your convenience we have depicted this requirement in the attached sample.

 

 

Query 3: (If possible no need to call the above JavaScript to resize them. We are ready to use the latest version if we get the above functionality with performance & how do we use the above code in case there are more than one grid on a view (MVC application). The second grid is loaded on click of a row of the first grid on the same view & also when I use the IP in the url the above code does not work in IE)

 

 

We would like to let you know that we can achieve the resizing behavior without using the following code,

 

 

 $find("Property")._resizer._ResizeToFitAllvColumns();

 

 

To achieve this please refer the below code snippets,

 

 

Code Snippets:

 

 

[CSHTML]

 

 

@(Html.Syncfusion().Grid<System.Data.DataRow>("Grid1")

 

…

 

.AllowResizing(true)

 

.ResizeSettings(resize =>

{

resize.ResizeToFit(true);

})

...

 

)

 

 

Note:

 

This API (ResizeToFit) will work in our latest Essential studio versions but it will not work in the version 10.2.0.75.

 

 

Query 4: (Be able to selectively hide/show columns)

 

 

We are sorry for the inconvenience caused.

 

 

Please provide detailed information about the requirement because we have already provided two different solutions for Show/Hide columns.

 

1) Using client side showColumns/hideColumns method

2) By making server post to re render required columns

 

 

The information provided would be great help for us to achieve your requirement.

 

Query 5: (Issue of horizontal scroll bar has not been solved)

 

We are afraid to let you know that we are unable to merge the fix for this issue (API ResizeToFit not working in the version 10.2.0.75) since it leads to some other issues in lower version. So we suggest you to upgrade to our latest version.

 

Query 6: (What’s the best way to shows a grid with 0 records when nothing is found in the search result)

 

 

We are confirmed that  this as issue to get a solution for this behavior, please contact us at Syncfusion Support or you may also open a support ticket by login in to direct trac account and mention this forum link for reference.

 

For your convenience we have created a simple sample depicting your requirements and the same can be downloaded from below link,

 

Sample Link:

 

http://www.syncfusion.com/downloads/support/directtrac/general/Sample-Modified-842194432.zip

 

Please let us know if you need any further assistance.

 

Regards,

 

Prabhu Sarvesan

[Prabu Sarvesan]

Hi Rajiv,

Query: (In a grid can we have only one row editable (if yes how to validate the data during editing))

Please check the following link to find the alternative solution for this query. In this demo sample there is an option to lock rows in a Grid while editing. Please let us know whether it meets your requirement.

Demo Link:

http://mvc.syncfusion.com/demos/ui/grid/Editing/ServerCRUD

Please let us know if you have any concerns.

Regards,

Prabhu Sarvesan