Hide/Show Editable links in webGrid CSHTML code

[nag]

I am trying to Hide/Show the 'Edit' link in each row of a given Grid. Basically only few user roles have the access to Modify the information. I wrote a method ActionResult in controller class to check the user access and returning Boolean value. Based on True/False I need to Hide/Show the 'Edit' Links in a grid. The design code is written in MVC CSHTML. Please suggest how it can be achieved. I tried using JQuery but I can hide the Edit column only for the first row of the grid. Below is the code in CSHTML and Jquery.

CSHTML

 <table border="1" cellpadding="0" cellspacing="1" style="width: 90%;"><tr> <td> @grid.GetHtml(tableStyle: "webGridMedium", headerStyle: "header", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid.Columns( grid.Column("BeginDate", "Begin Date", style: "description"), grid.Column("Status", "Status", style: "description"), grid.Column("", style: "description10", format: @<a class="edit-status" id="btnEditStatus" rel='nofollow' href="">Edit</a>) )) </td> </tr> </table>

JQuery Code: The parameter data is boolean value I get it from Controller class.

<script> $(document).ready(function () { checkAccess(); } function checkAccess() { // debugger; $.ajax({ url: '/Employee/CheckAccess', type: 'POST', data: {}, success: function (data) { if (data == false) { document.getElementById("btnEditStatus").style.visibility = "hidden"; } else if (data = true) { document.getElementById("btnEditStatus").style.visibility = ""; } }, error: (function (result) { alert("Failed access! Please contact administrator."); }) }) } </script>

[Mani Sankar Durai]

Hi nag, 

We have analyzed your query and found the cause of the issue. Since you have rendered the Edit link to be visible or hide by using document.getElementById("btnEditStatus") in the ajax post. So it is the cause of the issue. By using that it will traverse only one time if the returned Boolean value is either true or false. In case of that we achieved your requirement by using refreshTemplate event of Syncfusion grid. It will traverse each cell and makes it to either visible or hide according to Boolean value. So we suggest you to traverse each cell of edit link instead of giving document.getElementById("btnEditStatus”) 

 

For your convenience please refer the below code example, 

 

<script type="text/x-jsrender" id="columnTemplate"> 

 

    <a class="edit-status" id="btnEditStatus" rel='nofollow' href="">Edit</a> 

         

</script> 

 

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

… 

        .Columns(col => 

        { 

            … 

            col.HeaderText("Button").Template("#columnTemplate").Width(100).Add(); 

        }) 

            .ClientSideEvents(eve => eve.TemplateRefresh("refreshTemplate")) 

) 

<script> 

     

    function refreshTemplate(args) { 

        var cell = args; 

        $.ajax({ 

            url: '/Home/CheckAccess', 

            type: 'POST', 

            data: {}, 

            success: function (data) { 

                if (data == "False") { 

                    cell.cell.style.visibility = "hidden"; 

                } 

                else if (data = "True") { 

                    cell.cell.style.visibility = ""; 

                } 

            }, 

            error: (function (result) { 

                alert("Failed access! Please contact administrator."); 

            }) 

        }) 

    } 

 

</script> 

 

We have also prepared a sample based on Syncfusion Grid that can be available from the below link, 

Link: http://www.syncfusion.com/downloads/support/forum/125263/ze/Sample935840167 

 

If you still face the issue please get back to us with the following detais, 

1.       Is that you using Syncfusion Grid or webGrid in MVC? 

2.       Send the code that you rendered in controller page? 

 

The provided information will help us to analyze the issue and provide you the response as early as possible, 

 

Regards, 

Manisankar Durai. 

 

 

[nag]

Thank you for the responding. I am using Webgrid in MVC and I can't find ClientSideEvents when I use regular MVC webgrid.

Here is my method in controller class

public ActionResult CheckAccess()

{

try

{

bool CanUserHasEditAccess = false;

string USER_ID = "UYUI45"

CanUserHasEditAccess = "TRUE";

return Json(CanUserHasEditAccess);

}

}

}

catch

{

throw;

}

}

[Mani Sankar Durai]

Hi Nag, 

We have suspected that you are using Syncfusion Grid. So, we have updated the solution in the previous response for Syncfusion Grid. Since you asked the support for WebGrid in MVC which is provided by Microsoft. 

Please refer the following link, 

Link: http://stackoverflow.com/questions/12937450/hide-webgrid-column-edit-link-based-on-condition-in-mvc3 

 

Regards, 

Manisankar Durai. 

[nag]

Thank you so much :). Wonderful. It's worked.

[Mani Sankar Durai]

Hi Nag,  

Thanks for your feedback. 

 

We are happy to hear that your requirement is achieved.  

 

Regards, 

Manisankar Durai.