GridColumnSettings issues.

7 posts, 0 answers
  1. Julien
    Julien avatar
    2 posts
    Member since:
    Jun 2011

    Posted 10 Dec 2012 Link to this post

    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.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Julien
    Julien avatar
    2 posts
    Member since:
    Jun 2011

    Posted 13 Dec 2012 Link to this post

    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.
  4. Matt
    Matt avatar
    11 posts
    Member since:
    Apr 2013

    Posted 15 May 2013 Link to this post

    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.
  5. Julien
    Julien avatar
    2 posts
    Member since:
    Jun 2011

    Posted 15 May 2013 Link to this post

    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
  6. Julien
    Julien avatar
    2 posts
    Member since:
    Jun 2011

    Posted 15 May 2013 Link to this post

    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>
  7. Matt
    Matt avatar
    11 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    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.
Back to Top