1. Home
  2. Forum
  3. ASP.NET MVC
  4. asp.net mvc grid column formatting and hide unwanted column

asp.net mvc grid column formatting and hide unwanted column

I am using an ASP.NET MVC EJ GRID to display data.

 

@(Html.EJ().Grid<object>("ResultGrid")

            .Datasource((DataTable)Model)

            .ClientSideEvents(events => { events.DataBound("resultDataBound").RecordDoubleClick("doubleClick").Create("create").ToolbarClick("OnToolbarClick"); })

            .AllowResizeToFit()

            .AllowScrolling(false)

            .AllowSorting()

            .AllowMultiSorting()

            .AllowKeyboardNavigation(true)

            .AllowGrouping()

            .AllowReordering()

            .AllowResizing()

            .AllowFiltering()

            .FilterSettings(fs => { fs.FilterType(FilterType.Excel); })

            .AllowRowDragAndDrop().EnableAltRow(true)

            .AllowPaging()

            .PageSettings(page => page.PageSize(12))          

            .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>

            {

                items.AddTool(ToolBarItems.Search);

                items.AddTool(ToolBarItems.ExcelExport);

                items.AddTool(ToolBarItems.WordExport);

                items.AddTool(ToolBarItems.PdfExport);

            })).Mappers(map => map.ExportToExcelAction("/Home/ExportToExcel").ExportToPdfAction("/Home/ExportToPdf").ExportToWordAction("/Home/ExportToWord"))

            )

 

When the grid is rendered, I then use JS to format a specific column in the grid.

The 1st column always contain the ID of the record.

At the moment we are only displaying 5 columns.

 

With the ID column, we reformat it so it becomes a hyperlink.

 

function formatGrid(gridObj) {

    var columncount = gridObj.getVisibleColumnNames().length;

 

    // Loop through each column and format only the column where the header text is "Id".

    for (i = 0; i < columncount; i++) {

       var column = gridObj.getColumnByIndex(i);

       var header = column.headerText;

 

       // If user returns more than 5 columns, hide the rest.

       if (i > 4) {

           gridObj.hideColumns(header);

       }

       // Only do this reformat if it is only an ID and does not contain the <a> tag.

 

       if (header.toLowerCase() == "id") {

          column.format = "<a rel='nofollow' href='#' onclick='idClick(this.text);'>{Id}</a>";

       }

    }

}

 

QUESTIONS:

 

1. The ISSUE is that if I allow the display of more than 5 columns, for some reason, the “column.format” fails. The ID column rows are not hyperlinked. If I restrict it to display only 5 columns or less, the “column.format” works and the ID column rows become hyperlink.

 

2. Instead of “hideColumns”, is there a way to make the unwanted columns not visible?

 

3. In the above @(Html.EJ().Grid<object>("ResultGrid"), how do you specify “actionComplete”? I want to use this event to call the formatGrid() method.

Attachment: IDHyperLinkNotWorking_470accbb.zip

1 Reply
TS Thavasianand Sankaranarayanan Syncfusion Team April 5, 2018 12:48 PM UTC

Hi Dongil, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: If more than five column in Grid then “id” column is not get hyperlinked. 
 
We have analyzed your query and we are unable to reproduce the reported issue from our end. We suspect that based on our second and third query solution may solve your requirement. So, please ensure the solution with your end. 
 
Query 2: Instead of “hideColumns”, is there a way to make the unwanted columns not visible? 
 
We can achieve your requirement by using the dataBound event of ejGrid control. 
 
In the below code example we have set the hyperlink for OrderID column and we show only 5 columns in Grid.  
 
Refer the below code example. 
 
 
@(Html.EJ().Grid<Object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.DataSource) 
                     .ClientSideEvents(events => { events.DataBound("resultDataBound").ActionComplete("GridActionCompleteEvent"); }) 
                 
 ------- 
 
 
) 
<script type="text/javascript"> 
    function resultDataBound(args) { 
         
        var len  = args.model.columns.length; 
        for (var i = 0; i < len ; i++) { 
 
            if (args.model.columns[i]['headerText'].toLowerCase() == "orderid") { 
                args.model.columns[i]['format'] = "<a rel='nofollow' href='#' onclick='idClick(this.text);'>{OrderID}</a>"; // setting format the column which we want to set hyperlink. 
            } 
 
            if (i > 4) { 
                args.model.columns[i]['visible'] = false;  // setting the visible property as false for unwanted column in Grid. 
            } 
             
        } 
        
        this.refreshContent(true); 
    } 
 
</script> 
 
 
Refer the help documentation. 
 
 
 
Query 3: How to use actionComplete event in Grid control. 
 
We can bind the actionComplete event by using the below code example for ejGrid control. 
 
 
@(Html.EJ().Grid<Object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.DataSource) 
        .ClientSideEvents(events => {events.ActionComplete("GridActionCompleteEvent"); }) 
                 
                   ---- 
 
) 
<script type="text/javascript"> 
     
    function GridActionCompleteEvent(args) { 
 
        // Do your stuff here 
 
    } 
    
</script> 
 
 
Note: If we want to hide unwanted column and set hyperlink for id column then we suggest you to use dataBound event of ejGrid control instead of using actionComplete event of ejGrid control. 
 
We have prepared a single sample with the three query solution included and it can be downloadable from the below location. 
 
 
Refer the help documentation. 
 
 
If you still face the same issue then please get back to us.  
 
Regards, 
Thavasianand S. 


Loader.
Up arrow icon