Get DataTable Information For MVC

[Wherever66Participant]

Hi,
I am using MVC with different Views (Index + CRUD). Wondering if there is an y way I can access the following information from DataTable and TreeView to pass to CRUD views so when I come back from those views I can restore DataTable and TreeView back to the original state
1. Current Page Number
2. The current page number
3. The filtered field name and criteria (I use only the simple filter mode) 3. The soring field and the sorting order (either descending or ascending)

I also noticed that there are three sorting states on columns. Is there any way to disable the unsort mode?

Straight answer will be appreciated.

The closest answer I found is https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-server-side-paging-sorting-filtering-mvc3.htm but it’s too hard to follow for me.

[DimitarParticipant]

Hi Wherever66,

jqxGrid has a savestate and loadstate methods I think you will find useful. Please take a look at the State Maintenance demo to see them in action.

To disable toggling “Remove Sort” by clicking the column header, set the property sorttogglestates to 1 (example).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Wherever66Participant]

Thanks Dimitar,

Two links you shown works but not mine 🙁
1. Once I have autoloadstate: false or autosavestate: false, my TreeGrid / DataTable disappears.
2. Once I have sorttogglestates:1, my TreeGrid or DataTable disappears.

Please help – No progress at all!

My MVC Codes (Simplified)

Model

public class ItemBrand
    {
        public int ItemBrandID { get; set; }
        public string BrandName { get; set; }
    }

Controller

public ActionResult Index()
        {
           return View();
        }

        public JsonResult GetBrands()
        {
            var dbResult = db.ItemBrands.OrderBy(b => b.BrandName).ToList();
            var brands = (from brand in dbResult
                         select new
                         {
                             brand.ItemBrandID,
                             brand.BrandName,
                         });
            return Json(brands, JsonRequestBehavior.AllowGet);
        }

View (everything works but the commented bits)

<div class="page-detail">
    <a href="@Url.Action("Create", "ItemBrands")" class="btn btn-success">
        <span class="glyphicon glyphicon-plus"></span>
        Create New Brand
    </a>

    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="dataTable">
            <script type="text/javascript">
                var btnEditClick = function (row) {
                    var id = $("#dataTable").jqxDataTable('getCellValue', row, "ItemBrandID");
                    window.location = '/ItemBrands/Edit/?id=' + id;
                };
                var btnDetailsClick = function (row) {
                    var id = $("#dataTable").jqxDataTable('getCellValue', row, "ItemBrandID");
                    window.location = '/ItemBrands/Details/?id=' + id;
                };
                var btnDeleteClick = function (row) {
                    var id = $("#dataTable").jqxDataTable('getCellValue', row, "ItemBrandID");
                    window.location = '/ItemBrands/Delete/?id=' + id;
                };
            </script>
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'ItemBrandID', type: 'number' },
                    { name: 'BrandName', type: 'string' },
                ],
                id: 'ItemBrandID',
                url: '/ItemBrands/GetBrands',
//Copy From Your Demo - Not Working Form Me
                //root: "entry",
                //record: "content"
                //pager: function (pagenum, pagesize, oldpagenum) {
                //    // callback called when a page or page size is changed.
                //}
//*********************
            };

            var buttonrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                return '<button onclick="btnEditClick(' + row + ')" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Edit</button> <button onclick="btnDetailsClick(' + row + ')" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>Details</button> <button onclick="btnDeleteClick(' + row + ')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Delete</button>';
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            // create DataTable
            $("#dataTable").jqxDataTable(
            {
//Copy From Your Demo - Not Working Form Me
                //autoloadstate: false,
                //autosavestate: false,
//********************
                width: 1110,
                height: 720,
                source: dataAdapter,
                theme: 'metrodark',
                pageable: true,
                pageSize: 16,
                altRows: true,
                sortable: true,
//Not working for me
                //sorttogglestates:1,
//**************
                //rowsHeight:36,
                filterable: true,
                columns: [
                    { text: 'Brand ID', dataField: 'ItemBrandID', filterable: false, hidden: true },
                    { text: 'Brand Name', dataField: 'BrandName', width: "60%" },
                    { text: 'Actions', cellsrenderer: buttonrenderer,  filterable: false, sortable: false, width: "20%" }
                ]
            });
        });
    </script>
}

By the way, how do you pass the “state variable” to Controller or Views (CRUD)? What Data Type / Structure it is?

var state = null;
            $("#saveState").click(function () {
                // save the current state of jqxGrid.
                state = $("#jqxgrid").jqxGrid('savestate');
            })
            ;
            $("#loadState").click(function () {
                // load the Grid's state.
                if (state) {
                    $("#jqxgrid").jqxGrid('loadstate', state);
                }
                else {
                    $("#jqxgrid").jqxGrid('loadstate');
                }
            });

[Wherever66Participant]

Hi Dimitar,
Now, I get it. State Maintenance is only available to jqxGrid (not jqxTreeGrid and jqxDataTable). Am I right?

I customized the code from your demo. After putting “savestate”, my CRUD buttons don’t go to other Views. The “loadstate” doesn’t seem work either. See the following codes. What could be the problem?

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'ItemBrandID', type: 'number' },
                    { name: 'BrandName', type: 'string' }
                ],
                id: 'ItemBrandID',
                url: '/ItemBrands/GetBrands',
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };

            var buttonRenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                return '<button onclick="btnEditClick(' + row + ')" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Edit</button> <button onclick="btnDetailsClick(' + row + ')" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>Details</button> <button onclick="btnDeleteClick(' + row + ')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Delete</button>';
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create Grid
            $("#Grid").jqxGrid(
            {
                width: 1110,
                height: 720,
                source: dataAdapter,
                theme: 'bootstrap',
                pageable: true,
                pageSize: 16,
                altRows: true,
                sortable: true,
                sorttogglestates: 1,
                rowsHeight:36,
                filterable: true,
//***** loadstate doesn't work**************
                ready: function () {
                    $("#Grid").jqxGrid('loadstate');
                },
//********************************************
                columns: [
                    { text: 'Brand ID', dataField: 'ItemBrandID', filterable: false, hidden: true },
                    { text: 'Brand Name', dataField: 'BrandName', width: "73%" },
                    //{ text: 'Action', dataField: 'ItemBrandID', columnType: 'button', width: "8%" },
                    { text: 'Commands', cellsrenderer: buttonRenderer,  filterable: false, sortable: false, width: "19%" }
                ]
            });
            $("#Grid").jqxGrid({ pagermode: 'simple' });
            //window.onbeforeunload = function (e) {
            //    $("#Grid").jqxGrid('savestate');
            //};
            $("#Grid").on("bindingComplete", function (event) {
                if (@ViewBag.ID != -1)
                {$('#Grid').jqxGrid('selectRow', @ViewBag.ID, "ItemBrandID")}
            });

        });
    </script>
}

<div class="page-detail">
    <a href="@Url.Action("Create", "ItemBrands")" class="btn btn-success">
        <span class="glyphicon glyphicon-plus"></span>
        Create New @ViewBag.ModuleName
    </a>
    <p></p>

    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="Grid">
            <script type="text/javascript">
                var btnEditClick = function (row) {
                    var id = $("#Grid").jqxGrid('getcellvalue', row, "ItemBrandID");
                    $("#Grid").jqxGrid('savestate');
//**********This line doesn't get executed after savestate********************
                    window.location = '/ItemBrands/Edit/?id=' + id;
//*******************************************************************
                };
                var btnDetailsClick = function (row) {
                    var id = $("#Grid").jqxGrid('getcellvalue', row, "ItemBrandID");
                    window.location = '/ItemBrands/Details/?id=' + id;
                    
                };
                var btnDeleteClick = function (row) {
                    var id = $("#Grid").jqxGrid('getcellvalue', row, "ItemBrandID");
                    window.location = '/ItemBrands/Delete/?id=' + id;
                };
            </script>
        </div>
    </div>
</div>

[DimitarParticipant]

Hi Wherever66,

The functionalities I offered (savestate, loadstate and sorttogglestates) are only supported by jqxGrid.

As for the issue you experience – please make sure you have referenced the script jqxgrid.storage.js, which is necessary if you wish to use the methods savestate and loadstate.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Wherever66Participant]

Hi Dimitar

You make my day. Thank you very much! It works beautifully. Now, what’s your trick to make jqxTreeGrid and jqxTab to do the same thing? You almost convince me that jqWizard is actually easier and better than Telerik Kendo UI for MVC in Asp.NET MVC plateform.

After we can iron out jqxTreeGrid and jqxTab, I believe jqWizard is essential to every ASP.NET MVC developer.

Again, thank you very much. you champion!

Regards,
Peter

[DimitarParticipant]

Hi Peter,

Unfortunately, jqxTreeGrid does not support state maintenance. If you wish, you can request this feature as a custom development task by writing to sales@jqwidgets.com.

The selection of jqxTabs can be saved through cookies as shown in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/cookies.htm?arctic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Wherever66Participant]

Hi Dimitar,

I realize jqxTreeGrid doesn’t have State Maintenance ability but how will you do it without? Manually save it to cookie? or some sort…. Please give me a direction.

I will give jqxTab a try tomorrow.

Regards,
Peter

[Wherever66Participant]

Hi Dimitar,

Just a thougth. Is that possible to display self related one to many entity in jqxGrid. If that can be done, it’s not necessary to use jqxTreeGrid.

Regards,
Peter

[DimitarParticipant]

Hi Peter,

1. You would have to manually save the current sorting, filtering and paging options using the tree grid’s API and then manually restore them again using the methods and other functionalities provided by the widget.
2. The closest thing I can think of is implementing nested grids. Here are two examples: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?arctic, http://www.jqwidgets.com/community/topic/getting-error-with-assembling-n-nested-jquery-grid/#post-56402.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts