Search code examples
partial-viewsdynamic-datatelerik-gridtelerik-mvc

Dynamically Generated Telerik MVC3 Grid - Add Checkboxes


I have a grid that is dynamically generated based on search criteria. I render the grid in a partial view using Ajax. That all works fine.

I now need to add a checkbox column as the first column.

Also, how do I get filtering, sorting paging etc. to work now since it is in a partial view. When i click on a header to sort I get a Page not found error and the filter Icon doesnt do anything.

And one more thing. When I try to add a GridCommandColumnSettings to the grid I get the error "Invalid initializer member declarator"

Code is below for the gridcolumnsettings

    public GridColumnSettings[] NewColumns(DataTable fullDT)
    {
        GridColumnSettings[] newColumns = new GridColumnSettings[fullDT.Columns.Count];

        for (int i = 0; i < fullDT.Columns.Count; i++)
        {
            // set the visibility property for the DeliveryID
            bool boolDeliveryID;
            if (fullDT.Columns[i].ColumnName == "DeliveryID")
                boolDeliveryID = false;
            else
                boolDeliveryID = true;

            newColumns[i] = new GridColumnSettings
            {
                new GridCommandColumnSettings
                {
                    Commands = 
                    {
                        new GridEditActionCommand(),
                        new GridDeleteActionCommand()
                    },
                    Width = "200px",
                    Title = "Commands"
                },
                Member = fullDT.Columns[i].ColumnName,
                Title = fullDT.Columns[i].ColumnName,
                Visible = boolDeliveryID,
                Filterable = true,
                Sortable = true
            };
        }
        return newColumns;
    }

Any suggestions would be appreciated.

Thanks

I edited my post to add my partial for the Grid

Here is my partial for the grid

@(Html.Telerik().Grid<System.Data.DataRow>(Model.Data.Rows.Cast<System.Data.DataRow>())
.Name("Grid")
.Columns(columns =>
{
    columns.LoadSettings(Model.Columns as IEnumerable<GridColumnSettings>);
})
.DataBinding(dataBinding =>       dataBinding.Ajax().Select("_DeliveryManagerCustomBinding", "Deliveries"))
.EnableCustomBinding(true)
 .Resizable(resize => resize.Columns(true))

)


Solution

  • I don't add columns this way when I use the Telerik Grid control, but looking at what you're doing I would hazard a guess to say you will need to do something like the following:

    increase the size of the newColumns array by 1 (because we're going to add in the checkbox column):

    GridColumnSettings[] newColumns = new GridColumnSettings[fullDT.Columns.Count + 1];
    

    if you want it at the beginning you will need to do the following before your for-loop:

    GridColumnSettings s = new GridColumnSettings() {
      ClientTemplate("<input type=\"checkbox\"  name=\"checkeditems\" value=\"some value\" />")
      Title("title goes in here")
    };
    

    Then you will add it into your array:

    newColumns[0] = s;
    

    and then increase the start index for your for-loop to 1:

    for (int i = 1; i < fullDT.Columns.Count; i++)
    

    the checkbox column will go at the beginning