jQuery UI Widgets Forums DataTable Get DataTable Information For MVC

This topic contains 9 replies, has 2 voices, and was last updated by  Dimitar 8 years, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Get DataTable Information For MVC #77807

    Wherever66
    Participant

    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.

    Get DataTable Information For MVC #77834

    Dimitar
    Participant

    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/

    Get DataTable Information For MVC #77853

    Wherever66
    Participant

    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');
                    }
                });
    
    Get DataTable Information For MVC #77861

    Wherever66
    Participant

    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>
    
    
    Get DataTable Information For MVC #77882

    Dimitar
    Participant

    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/

    Get DataTable Information For MVC #77905

    Wherever66
    Participant

    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

    Get DataTable Information For MVC #77908

    Dimitar
    Participant

    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/

    Get DataTable Information For MVC #77909

    Wherever66
    Participant

    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

    Get DataTable Information For MVC #77910

    Wherever66
    Participant

    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

    Get DataTable Information For MVC #77923

    Dimitar
    Participant

    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/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.