[Solved] Issues with Grid (Ajax, Grouping)

[Philip Senechal]

I'm having multiple issues with my Grid, however, each issue can be resolved by turning off a different feature that I need. I would really like them to all work together.
Here is my ideal Grid code

@(Html.Telerik().Grid<ReportConfigHelper>() //width 934, 917 with scrollbar
.Name("optionGrid")
.DataKeys(keys => keys.Add(o => o.Id))
.DataBinding(dataBinding => dataBinding.Ajax()
    .OperationMode(GridOperationMode.Client)
    .Select("_optionSelect", "Setup", new { ReportId = Model.Report.Id })
    .Update("_optionUpdate", "Setup", new { ReportId = Model.Report.Id })
    .Delete("_optionDelete", "Setup", new { ReportId = Model.Report.Id }))
.Columns(columns =>
{
    columns.Bound(o => o.OptionValueValue)
        .HtmlAttributes(new { @class = "aligncenter" })
        .HeaderTemplate(
            @<text>Value</text>
        )
        .Width(75)
        .ReadOnly(true)
        .HeaderHtmlAttributes(new { style = "text-align:center" });
    columns.Bound(o => o.OptionValueName)
        .ReadOnly(true);
    columns.Bound(o => o.OptionSort)
        .Width(50);
    columns.Command(commands =>
        {
            commands.Edit().ButtonType(GridButtonType.Image);
            commands.Delete().ButtonType(GridButtonType.Image);
        })
        .Width(76);
})
.Groupable(grouping => grouping.Groups(groups => groups.Add(o => o.OptionName)).Visible(false))
.Pageable(paging => paging.Style(GridPagerStyles.Status).PageSize(999))
.Scrollable(scrolling => scrolling.Height("550px"))
.Selectable()
.ClientEvents(events =>
    {
        events.OnDataBinding("bindToken");
        events.OnSave("saveToken");
        events.OnDelete("saveToken");
    })
)

Now for the requirements and problems. This Grid has to bind via Ajax and it has to be Grouped. Therefore I have turned on Client Operation Mode and Grouping. If I try to do Grouping without Client Operation Mode, I get no results back.

With the Grid in this setup, anytime I attempt to Delete or Update an item in the Grid, I receive an "With the Grid in this setup, anytime I attempt to Delete or Update an item in the Grid, I receive an "Object reference not set to an instance of an object" error and my data will not update.

If I turn off Grouping, then I don't receive the "Object reference not set to an instance of an object", however, my Grid still doesn't update when I Add/Update/Delete an item.

If I then turn off Client Operation Mode, the grid will update when I Add/Update/Delete, but I lose the ability to Group.

Do you have any possible solutions to allow me to Group and Ajax bound grid without setting the grid to Client Operation Mode?

[Rosen]

Hi Philip Senechal,

I'm afraid that I'm unable to recreate such behavior locally. I have attached a small test project, please take a look maybe I'm missing something obvious.

Regards,
Rosen
the Telerik team

[Philip Senechal]

Hi Rosen,

Can you try binding the grid to a ViewModel and see what you get? I have to bind mine to a ViewModel instead of the model directly due to the circular reference issue. I think this might be where the issue is since my other grids that are bound to the model directly don't exhibit this problem. Thanks.

[Philip Senechal]

Actually, I applied grouping to one of my other grids that uses a regular model and get the same error...when attempting to insert/update/delete with Grouping turned on, I get an error "Object reference not set to an instance of an object.". But by simply removing the .Groupable line, everything works fine..insert/update/delete.

I was able to get around the problem by returning my items as a List ( .ToList() ) instead of as an IQueryable. I suppose that is okay in this case.