GridColumnSettings issues.

[Julien]

Hi,

I’m working with a Kendo Grid using MVC4 with Razor’s syntax.

I need to be able to customize column’s order and displaying option in order to save user’s preference.

To achieve that, I tried to use a tab of GridColumnSettings and load it in the View using the LoadSettings method of the columns property.

I have a few issues with that:

-          Even if the column order can be set dynamically with this method, I don’t understand how to use ClientTemplate or Template attribute of the GridColumnSettings object.

-          By using this loading system I have two Gird's options who don’t work anymore: line and column are not selectable and the groupable option seems to not work too.

Thanks for your help.

[Petur Subev]

Hello Julien,

I tried on my side both Selectable and Groupable options when loading the Columns with LoadSettings feature and they seems to be working fine. Could you share a project which we can run and see the reason for that behavior?

Yes using the LoadColumnSettings has its limitations. Indeed the Template method is not available because in the controller we do not have access to the View methods which are internally used by the Grid to write its Html. However the ClientTemplate should be available and working properly and if you are using Ajax binding you should not have any obstacles defining your ClientTemplate.

All the best,
Petur Subev
the Telerik team

[Julien]

Hi, I changed my binding to Ajax binding as you suggested and its read method (I was using BindTo).
Indeed it solved my ClientTemplate issue but it caused another problem, my data weren't initially loaded and I had to do a sort after a column switch to see the data.
I finally found what option caused the real problem: it was the column menu option.
I have disabled it and now everything works perfectly (even the initial data loading).

I'll give you my code just in case of.

View :

@{

    ViewBag.Title = "Index";

}

 

<h2>Index</h2>

 

@(

 Html.Kendo().Grid<KendoFromMVC.TESTKENDOUI>()

             .Name("testEditableGrid")

             .ToolBar(tb => tb.Create())

             .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp)

                         .Window(w => w.HtmlAttributes(new { @style = "width:500px;" })

                         .Resizable(e => e.Enabled(true))))

             .DataSource(dataSrc => dataSrc.Ajax()

                         .Read(read => read.Action("read3", "KendoGrid"))

                         .Create(create => create.Action("Create", "KendoGrid"))

                         .ServerOperation(false)

                         .Update(update => update.Action("Update", "KendoGrid"))

                         .Destroy(dest => dest.Action("Destroy", "KendoGrid"))

                         .Model(model => model.Id(p => p.COLUMN1_NAME))

                         .PageSize(ViewBag.nbGridLine)

                         )

             .Groupable(g => g.Enabled(true))

             .Sortable()

             .Scrollable(test => test.Enabled(true))

             .Reorderable(re => re.Columns(true))

             .Resizable(re => re.Columns(true))

             .Navigatable(nav => nav.Enabled(true))

             .Pageable(p => p.PageSizes(new int[] { 50, 100, 1000 }).Enabled(true))

             //.ColumnMenu(menu => menu.Enabled(true)) --> was the problem

             .Selectable(sel => sel.Enabled(true))

             .Columns(cols => cols.LoadSettings(ViewBag.cols))

             .AutoBind(true)

)

Controller :

public ActionResult Index()

{

    ViewBag.test = true;

 

    var cols = new[]

        {

            new GridColumnSettings

            {

                Member = "DOMAINE",

                Width = "200px",

                ClientTemplate = "#= DOMAINE # <img src=\"pouet\">",

                Groupable = true,

                Visible = true

            },

            new GridColumnSettings

            {

                Member = "NIC_HANDLE",

                Width = "150px",

                Groupable = false

              

            },

            new GridColumnSettings

            {

                Member = "DATE_CREA",

                Format = "{0:dd/MM/yyyy}",

                Groupable = true

            },

            new GridCommandColumnSettings

            {

                Commands =

                {

                    new GridEditActionCommand(),

                    new GridDestroyActionCommand()

                },

                Width = "200px",

                Title = "<strong>COMMANDS</strong>"

            }

 

        };

 

    ViewBag.cols = cols;

    ViewBag.nbGridLine = 50;

    //ViewBag.model = this._db.TESTKENDOUI;

    return View();

}

I don't need the columnMenu option so my problem is solved.

Thanks for your answer and have a nice day.

[Matt]

Hello Julien and Petur,

I need the same feature. However I have used JS APIs to initiate/render the kendo grid in my page.

Please let me know if 

.Columns(cols => cols.LoadSettings(ViewBag.cols))

is available via JS, too. I have googled a lot but can't get any positive result.

Thanks.

[Julien]

Is it something like this you are looking for?

$("#grid").kendoGrid({
  columns: [{
    field: "name",// create a column bound to the "name" field
    title: "Name" // set its title to "Name"
  }, {
    field: "age",// create a column bound to the "age" field
    title: "Age" // set its title to "Age"
  }],
  dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
});

I found this here http://docs.kendoui.com/api/web/grid

[Julien]

I maybe replied to fast (or without enought explanation).

I mean you can iniate an object in JS before giving it to the initiation method.

you could do something like that  to create your js object :
<script>
var MyColumnsTab = @Html.Raw(Json.Encode(@ViewBag.ColsTab)); //it need to be in your .cshtml file
</script>

[Matt]

Hi Julien,

Thanks for prompt reply,

Can you please share a working sample of same kind, in which the grid column gets initiated from JS variable?

Thanks.