Obtaining FlexGrid dynamic column list from controller

Posted by: elogsdon on 2 July 2020, 5:03 am EST

    • Post Options:
    • Link

    Posted 2 July 2020, 5:03 am EST

    I had posted a related topic earlier. This is related to the same application.

    In my MVC application my controller builds a column list of the columns to be displayed on the FlexGrid at run time. I pass the data and the column list to the view using this model:

    using LBBus500;
    using System.Collections.Generic;
    
    namespace Group_Web_Client.Models
    {
        public class PolicyList
        {
            public List<ctPolicyHistory> Policies { get; set; }
            public List<C1.Web.Mvc.Column> ColumnList { get; set; }
        }
    }
    

    Policies is the date to be displayed. ColumnList is the column information.

    The controller looks like this:

    using System.Web.Mvc;
    using Group_Web_Client.Models;
    using LBBus500;
    using dbFields;
    
    using System.Collections.Generic;
    using System.Runtime.Remoting.Messaging;
    
    namespace Group_Web_Client.Controllers
    {
        public class BillController : Controller
        {
            // GET: Bill
            //[Route("~/Bill/List")]
            public ActionResult List()
            {
                ctUser loggedInUser = (ctUser)Session["loggedInUser"];
                ctBill ctBill = new ctBill(loggedInUser);
                BillList billList = new BillList();
                billList.Bills = new List<BillHeader>();
                BillHeader billheader;
    
                List<ctBill> bills = ctBill.GetBillList($"GroupId = {loggedInUser.GroupId()}", "BillingDate Desc");
    
                foreach (ctBill bill in bills)
                {
                    billheader = new BillHeader()
                    {
                        GroupId = bill.GroupID().Value,
                        BillID = bill.BillID().Value,
                        BillingDate = bill.BillingDate().ToString(),
                        BCN = bill.BillingControlNumber().Value,
                        BillAmount = bill.BillingAmount().Value,
                        StatusText = bill.StatusText(bill.Status().Value)
                    };
                    billList.Bills.Add(billheader);
                }
    
                return View(billList);
            }
    
            //[HttpPost]
            public ActionResult PolicyEdit(int? id)
            {
                if (!id.HasValue)
                    id = 0;
                ctUser loggedInUser = (ctUser)Session["loggedInUser"];
                ctBill ctBill = new ctBill(loggedInUser);
                dbStatus status =  ctBill.Get(loggedInUser.GroupId(), (int)id);
    
                PolicyList policyList = new PolicyList();
                policyList.Policies = ctBill.PolicyList;
    
                policyList.ColumnList = new List<C1.Web.Mvc.Column>();
                policyList.ColumnList.Add(new C1.Web.Mvc.Column() { Header = "PolicyNumber",  Binding="PolicyNumberp" });
                policyList.ColumnList.Add(new C1.Web.Mvc.Column() { Header = "Member Id", Binding = "MemberIDp" });
    
                return View(policyList);
            }
       }
    }
    

    The Action being used is the PolicyEdit action. In “real life” is will pull the list of columns and attributes from a database. This is simplified.

    My View looks like this:

    @model Group_Web_Client.Models.PolicyList
    @{
        ViewBag.Title = "Edit Policies";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>Edit Policies</h2>
    
    @using (Html.BeginForm())
    {
        @(Html.C1().FlexGrid().Id("policyGrid")
            .IsReadOnly(true)
            .SortingType(C1.Web.Mvc.Grid.AllowSorting.SingleColumn)
            .Bind(Model.Policies)
            .AutoGenerateColumns(false)
            )
        <ul>
            @foreach (C1.Web.Mvc.Column tmpColumn in Model.ColumnList)
            {
                <li>@tmpColumn.Header @tmpColumn.Binding</li>
            }
        </ul>
    }
    <script>
        @*c1.documentReady(function () {
            var model = @Html.Raw(Json.Encode(Model));
            var theGrid = wijmo.Control.getControl('#policyGrid');
            theGrid.columns.push(new wijmo.grid.Column({ header: 'Policy Number', binding: PolicyNumberp }));
        })*@
        c1.documentReady(function () {
            var model = @Html.Raw(Json.Encode(Model));
            var theGrid = wijmo.Control.getControl('#policyGrid');
            theGrid.columns.push((model.ColumnList[0]);
            theGrid.columns.push((model.ColumnList[1]);
        })
    </script>
    
    

    Running this gives me a blank grid with data columns or headers.

    If I change the view to hard code the column data I get the expected results.

    <script>
        @*c1.documentReady(function () {
            var model = @Html.Raw(Json.Encode(Model));
            var theGrid = wijmo.Control.getControl('#policyGrid');
            theGrid.columns.push(new wijmo.grid.Column({ header: 'Policy Number', binding: PolicyNumberp }));
        })*@
        c1.documentReady(function () {
            var model = @Html.Raw(Json.Encode(Model));
            var theGrid = wijmo.Control.getControl('#policyGrid');
            theGrid.columns.push(new wijmo.grid.Column({ header: "Policy Number", binding: 'PolicyNumberp' }));
            theGrid.columns.push(new wijmo.grid.Column({ header: "Member ID", binding: 'MemberIDp'}));
        })
    </script>
    
    Examining the model in the browser using the F12 developer tools, I can see both Policies and ColumnLIst are populated in the model.
    
    Do I need to do some "conversion" on the model.ColumnList as I add it to theGrid.columns?
    
    
  • Posted 2 July 2020, 5:06 am EST

    I just noticed that I left an old version of the view script as comments. That can be ignored. My apologies…

    Eric.

  • Posted 2 July 2020, 2:30 pm EST

    Hi Eric,

    We are glad to know that your issue has been resolved. Thank you for notifying us.

    Regards,

    Manish Gupta

  • Posted 6 July 2020, 5:51 am EST

    Manish,

    It’s not resolved. The above post is describing an issue I am currently having. My second post was to clarify that some commented out code could be ignored and had not impact on my issue.

  • Posted 6 July 2020, 4:36 pm EST

    Hi,

    For showing dynamic columns from the Controller variable. Please refer to the attached sample and the following code snippet for reference:

    
    @(Html.C1().FlexGrid<Person>().Id("FlexGrid")
                .AutoGenerateColumns(false)
                .Bind(Model.Data)
                .CssClass("grid")
                .Columns(c =>
                {
                    foreach(var col in Model.Columns)
                    {
                        c.Add(col);
                    }
                })
    )
    

    Regards,

    Manish Gupta

    FlexGridDynamicColumnColumnCollection.zip

  • Posted 8 July 2020, 12:19 am EST

    Manish,

    Thanks. I thought I had tried that. I’ll try again and let you know the results.

    Eric.

  • Posted 8 July 2020, 2:32 pm EST

    Hi Eric,

    Please try at your end, it should work for you!.

    Regards,

    Manish Gupta

  • Posted 13 July 2020, 11:51 pm EST

    Manish,

    It is working fine now. Thank you for your help!

    Eric

  • Posted 1 December 2021, 1:50 am EST

    hello Manish! Perhaps you can help me. I am using flexgrid to display a dynamic table (the amount and name of columns in the table changes, as well as the data in the table). When the model is sent to the view for the first time, the table is rendered correctly, but when the model is sent again, the table does not change. What could be the reason?

  • Posted 1 December 2021, 8:59 pm EST

    Hi,

    It seems the columns are defined at the initialize. And the columns does not get updated on Model change.

    If you may share the demo sample or the code snippet depicting your issue. It would be great help to us for replicating the issue.

    Regards,

    Manish Gupta

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels