[Solved] How to hide column from telerik Grid with Ajax binding

[Deepak]

Hi, I am new to MVC3 Razor and facing below problem :
I have used Telerik Grid in my partial View. There are 2 radio button on my view for filtering the data (Pending/Completed). based on this filteration I have to hide one column "LabeledOn" (7th column of grid) from Telerik grid.
I have implement the below code to hide the columns and it's working perfect :):

$(document).ready(function () {
if ($("#optPending").attr('checked')) {
            var i=0;
            $("#Items tr").each(function () {
                $currentRow = $(this);
                if (i == 0) {
                    $currentRow.find("th:eq(7)").hide();
                }
                else {
                    $currentRow.find("td:eq(7)").hide();
                }
                i = i + 1;
            });
        }
}

everything is working fine when my view is loading first time but now the problem is I am using paging with Ajax binding and whenever I am changing the page the above code is not rendering because of Ajax calling so the hidden column data is getting display on my view below is the code of my Grid :

<input type="radio" checked="checked" value="1" id="optPending" name="rptSource" onclick="LoadItems(1, true);" />Pending

 <input type="radio" value="2" name="rptSource" id="optCompleted" onclick="LoadItems(2, true);" />Completed

@{Html.Telerik().Grid<Microsoft.Commerce.CDS.Tools.CDM.MiddleTier.LabelingItem>(Model)

            .Name("Items")

            .DataKeys(keys => keys.Add(k => k.SamplingId))

            .PrefixUrlParameters(false)

            .HtmlAttributes(new { Style = "align:center; width : 1160;" })

            .Columns(columns =>

            {

                columns.Template(

                 @<text>

                 <img src="@item.ImageUrl" alt="@item.ImageUrl" height="100px" width="100px"  />
                   </text>)
                 .ClientTemplate(

                  "<img src='<#=ImageUrl #>' alt='<#=ImageUrl#>' height='100px' width='100px'/>")

                    .Title("Image").Width(50);

                columns.Template(

                     @<text>

                     <a href="#">@item.ItemHash</a>

                      </text>)

                      .ClientTemplate("<a href='#'> <#= ItemHash #> </a>")

                      .Width(100).Title("Product Hash & PE Link");

                columns.Bound(o => o.ItemTitle).Width(100).Title("Title");

                columns.Bound(o => o.ExtractToken).Width(90).Title("ExtractToken");

                columns.Template(

                  @<text>

                 @Html.RadioButton(@item.ItemHash, @item.ItemHash, @item.LabelYes, new { onclick = "UpdateLabel(this, 1)" })

                  </text>)

                  .ClientTemplate("<input type='radio' name='<#= ItemHash #>' onclick='UpdateLabel(this, 1)' <#= LabelYes ? checked='checked' : '' #>  />")

                   .Title("Yes").Width(25);

                columns.Template(

                   @<text>

                 @Html.RadioButton(@item.ItemHash, @item.ItemHash, @item.LabelNo , new { onclick = "UpdateLabel(this, 2)" })

                   </text>)

                  .ClientTemplate("<input type='radio' name='<#= ItemHash #>' onclick='UpdateLabel(this, 2)' <#= LabelNo ? checked='checked' : '' #> /> ")

                   .Title("No").Width(25);

                columns.Template(

                 @<text>

                @Html.RadioButton(@item.ItemHash, @item.ItemHash, @item.LabelMisCat, new { onclick = "UpdateLabel(this, 3)" })

                 </text>)

                .ClientTemplate("<input type='radio' name='<#= ItemHash #>' onclick='UpdateLabel(this, 3)' <#= LabelMisCat ? checked='checked' : '' #>  />")

                 .Title("MisCat").Width(25);

                columns.Bound(o => o.DateLabeled).Width(35).Title("Labeled on").Format("{0:MM/dd/yyyy}").Filterable(false);

                })

 

              .DataBinding(binding => binding.Ajax().Select("GetSelectedItems", "Labeling").Enabled(true))

              .Pageable(page => page.PageSize(10).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))

              .Scrollable(scrolling => scrolling.Height(800))

              .NoRecordsTemplate("No records to display")

              .Render();

               

}

.
And this is my Action calling for paging

public ActionResult GetSelectedItems()
{
   this.SamplingId = Convert.ToInt64(Session["samplingId"]);
   this.WorkStatus = Convert.ToInt32(Session["workStatus"]);
  return PartialView("_LabelItem", new GridModel(this.CachedItems));

}

Thanks in advance !!

[Nikolay Rusev]

Hello Deepak,

To have hidden state persisted on paging you should modify attr property of the column (grid.columns[index]).
For example to set that first column as hidden (the code bellow will take effect on paging) 

<script>
    function grid_load() {
        var grid = $(this).data("tGrid");
        setHiddenAttr(grid.columns[0]);
    }

    function setHiddenAttr(column) {
        var attr = column.attr;
        if(!attr || attr.indexOf("style") < 0) {
            attr = (attr || "") + ' style="display:none" ';
        } else {
            attr = column.attr.replace(/(style="(.*)?display):([^;]*)/i, "$1:none");
            if(attr === column.attr) {
                attr = attr.replace(/(style=")/i, "$1display:none;");
            }
        }
        column.attr = attr;
    }
</script>

With the upcoming Q3 2011 release of Telerik Extensions for ASP.NET MVC we will provide client API for show/hide of column as well as header context menu for the same.

Best wishes,
Nikolay Rusev
the Telerik team