[Wherever66Participant]

By the way, I do do these as well

under _ViewImport.cshtml

@using jQWidgets.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers
@*@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration*@

[Wherever66Participant]

I created a brand new project with asp.net core 2.0 to test your tag helpers not upgraded from 1.1. Do I need to DI the tag helpers in the STartup class? These are what I do
1. NuGet jqwidgets.aspnetcore.mvc.taghelpers
2. Download jqWidgets 5.10. Unzip and copy the jqwidgets folder to wwwroot.
3. refer to necessary jqwidgets js file in the Layout.cshtml

Will there work under asp.net core 2.0?

[Wherever66Participant]

I created a new project with asp.net core to test your tag helpers not covered from 1.1. Do I need to put your helpers somewhere in the Starup class?

[Wherever66Participant]

Sorry, my typo, I meant true. When I have those statements in the ready property grid state is not working at all. Please give me a direction…

[Wherever66Participant]

Sorry, I was confused between align and cellalign. It works. Thanks

[Wherever66Participant]

I meant the “Header” or “Title” of a column align to the right.

[Wherever66Participant]

Funny, my jqxGrid is not responsive but yours are. Can you show a bit key codes to achieve it?

[Wherever66Participant]

It’s a pity. I will find something for it. Thanks for the information.

[Wherever66Participant]

Working Perfectly! Thx.

[Wherever66Participant]

That works. thx.

[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

[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

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

[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>

[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');
                }
            });

[Author]

Posts