Adding Activate/Deactivate button in MVC jqGrid

Question

I have FormTemplate class in my project

public class FormTemplate : BaseEntity
{
    public virtual string Name { get; set; }
    public virtual DateTime? DateCreation { get; set; }
    public virtual FormTemplateGroup Group { get; set; }
    public virtual bool Active { get; set; }
    public virtual FormTemplateStatus Status { get; set; }
    public virtual IList<QuestionBlock> QuestionBlocks { get; set; }
    public virtual bool IsFreeze { get; set; }
}

and I use MVC jqGrid http://mvcjqgrid.skaele.it/Home/Formatters
to show the list of FormTemplates on the page

@(Html.Grid("Grid")
            .SetCaption("List")
            .AddColumn(new Column("Name").SetLabel("Name"))
            .AddColumn(new Column("GroupFor").SetLabel("Group"))
            .AddColumn(new Column("DateCreation").SetLabel("Date"))
            .AddColumn(new Column("Status").SetLabel("Status")).SetSortOnHeaderClick(false)
            .AddColumn(new Column("Id").SetLabel(" ").SetCustomFormatter("buttonize").SetWidth(220).SetAlign(Align.Center))
            .SetAutoWidth(false)
            .SetRowNumbers(true)
            .SetUrl(Url.Action("FormTemplateGridData"))
            .SetAutoWidth(true)
            .SetRowNum(10)
            .SetRowList(new[] { 5, 10, 15, 20 })
            .SetViewRecords(true)
            .SetPager("Pager"))

I don't show value of IsFreeze property on my page, but I need to add Activate button if IsFreeze == true and Deactivate button otherwise for every FormTemplate.

I tried to add the checking function in buttonize

function buttonize(cellvalue, options, rowobject) {
        var result = '<input type="button" value="Edit" onclick="editTemplate(' + options.rowId + ')">' + '&nbsp;'
            + '<input type="button" value="Delete" onclick="deleteTemplate(' + options.rowId + ')">' + '&nbsp;';

        if (isFreezeTemplate(rowobject[4])) {
            result += '<input type="button" value="Activate" onclick="activateTemplate(' + options.rowId + ')">';
        }
        else {
            result += '<input type="button" value="Deativate" onclick="deactivateTemplate(' + options.rowId + ')">';
        }
        return result;
    }

added function

function isFreezeTemplate(id) {
        var check = $.post('@Url.Action("IsFreezeFormTemplate")', { id: id });
        return check;
    }

and added in controller

[HttpPost]
    public bool IsFreezeFormTemplate(int id)
    {
        var formTemplate =
            FormTemplateRepository.Query()
            .Where(ft => ft.Id == id)
            .SingleOrDefault();

        if (formTemplate.IsFreeze == true) return true;
        return false;
    }

but I get only Activate buttons for all FormTemplates on my page.
How to fix it?

Answer 1

You could add a hidden column to the grid from which you read the value in your buttonize function through the rowobject argument.

.AddColumn(new Column("IsFreeze").SetHidden(true))

This way you don't need the ajax request.

Answer 2

I suggest you to fill the IsFreeze in the FormTemplateGridData action (if not done) and to use it directly in your buttonize function :

function buttonize(cellvalue, options, rowobject) {
    var result = '<input type="button" value="Edit" onclick="editTemplate(' + options.rowId + ')">' + '&nbsp;'
        + '<input type="button" value="Delete" onclick="deleteTemplate(' + options.rowId + ')">' + '&nbsp;';

    if (rowobject["IsFreeze"]) {
        result += '<input type="button" value="Activate" onclick="activateTemplate(' + options.rowId + ')">';
    }
    else {
        result += '<input type="button" value="Deactivate" onclick="deactivateTemplate(' + options.rowId + ')">';
    }

    return result;
}

---

Edit - action code

In order to precise what is being send to the grid, here is the code of the grid data action :

public JsonResult FormTemplateGridData()
{
    var donnees = new
    {
        total = 2,
        page = 1,
        records = 2,
        rows = new List<FormTemplate>
        {
            new FormTemplate { Id = 1, Active = true, Name = "first", IsFreeze = true },
            new FormTemplate { Id = 2, Active = true, Name = "second", IsFreeze = true  },
            new FormTemplate { Id = 3, Active = false, Name = "last", IsFreeze = false  }
        }
    };

    return Json(donnees);
}