Question

Good day!

I am working on a project right now and I am using JQGrid to show my data. As part of its functions, users can choose columns and make these columns as their default columns.

I used ‘columnChooser’ to let my user select for their default columns.

My problem now, how to retrieve those columns the user’s selected?
And how to set those columns as their default columns?

Can someone help me with this problem.

Thanks

Jason

Answer 1

After the user changes the column layout, you can get the colModel from the grid, iterate through it and push the configuration in a array of json objects which will then be sent to the server. The following code does this:

function saveColumnConfiguration(grid, url) {
    if (url.length > 0) {
        var colArray = new Array();
        var colModel = grid[0].p.colModel;
        for (var i = 0; i < colModel.length; i++) {
            if (colModel[i].name != "rn" && colModel[i].name != "cb") {
                colArray.push({
                    Name: colModel[i].name,
                    Width: colModel[i].width,
                    Visible: !colModel[i].hidden
                });
            }
        }
        $.ajax({
            url: url,
            type: 'POST',
            data: 'columnConfiguration=' + JSON.stringify(colArray)
        });
    }
}

The check for “rn” and “cb” means don’t take the rownumber and checkbox columns.

UPDATE

You will need a class to represent the columns:

[Serializable]
public class JqGridColumn
{
    public string Name { get; set; }
    public int Width { get; set; }
    public bool Visible { get; set; }
}

You also need custom model binder to deserialize the incoming list:

public class JqGridConfigurationModelBinder : IModelBinder
{
    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var conf = bindingContext.ValueProvider.GetValue("columnConfiguration").AttemptedValue;

        JavaScriptSerializer serializer = new JavaScriptSerializer();
        var configuration = serializer.Deserialize<IEnumerable<JqGridColumn>>(conf);

        return configuration;
    }
}

Register the model binder in application start:

ModelBinders.Binders.Add(typeof(IEnumerable<JqGridColumn>), new JqGridConfigurationModelBinder());

The action in the controller that handles the list will be something like this:

public void SaveColumnConfiguration(IEnumerable<JqGridColumn> columnConfiguration)
{
    // Save the list accordingly...
}

Note that the order of the columns is represented by their position in the list.
You can then easily read this configuration and render the grid.

UPDATE 2

The function in your case should be called like this

saveColumnConfiguration($("#freight_bill"), "/Controller/Action");

But not after the call for columnChooser. You can either make another button to save changes when the user chooses to do so or handle the done event from the column chooser like this:

$("#freight_bill").jqGrid('columnChooser', {
    done: function (perm) {
            if (perm) { 
                $("#freight_bill").jqGrid("remapColumns", perm, true, false); 
            }
            saveColumnConfiguration($("#freight_bill"), "/Controller/Action");
        }
});