jQWidgets Forums

Forum Replies Created

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

Author

Posts

September 27, 2013 at 9:02 am in reply to: Help regarding ‘loadstate’ property Help regarding ‘loadstate’ property #29683

dominicthoppil

Participant

Dear Dimitar

Thank you for your reply. I am using the latest version. You are not able to simulate the issue with my sample ? In my case i am using the controller method to bind the data.

Regards
Dominic

September 27, 2013 at 6:14 am in reply to: Drag and Drop Grid Column Drag and Drop Grid Column #29664

dominicthoppil

Participant

Dear Dimitar

Thank you for your reply.

Regards
Dominic

September 26, 2013 at 2:50 pm in reply to: Help regarding ‘loadstate’ property Help regarding ‘loadstate’ property #29619

dominicthoppil

Participant

Dear Dimitar

Thank you for your reply. I tried your example and it is working fine. After analyzing the difference between your code and my code , i understand that in my case the ‘virtualmode is true’ . So when the grid is restoring the layout, the controller method will get invoked . And my state will become the original state. So the issue still exists.

I can give you a sample for reproducing my issue.

View Part

<!DOCTYPE html>
<html lang="en">
@{
    ViewBag.Title = "SaveState";
}
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        var viewcontent = '';
        var loaddata = '';
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            LoadGrid();
            $("#saveState").jqxButton({ theme: theme });
            $("#loadState").jqxButton({ theme: theme });
            $("#hide").jqxButton({ theme: theme });
            var state = null;
            $("#saveState").click(function () {
                // save the current state of jqxGrid.
                state = $("#jqxgrid").jqxGrid('getstate');
                viewcontent = JSON.stringify(state);
                var d = { viewcontent: viewcontent }
                $.ajax({
                    datatype: 'json',
                    type: 'POST',
                    data: d,
                    url: '@Url.Action("SaveLayout", "SaveState")',
                    success: function (result) {
                        alert(result);
                    },
                    error: function (result, n, r) {
                        alert(result.statusText);
                    }
                });
            });
            $("#loadState").click(function () {
                // load the Grid's state.
                alert(loaddata.viewcontent);
                var obj = JSON.parse(loaddata.viewcontent);
                $("#jqxgrid").jqxGrid('loadstate', obj);
            });
            $("#hide").click(function () {
                $("#jqxgrid").jqxGrid('hidecolumn', 'ShipCity');
            });
        });
        function LoadGrid() {
            var source =
             {
                 datatype: "json",
                 datafields: [
                 { name: 'ShipName', map: 'ShipName' },
                 { name: 'ShipCity', map: 'ShipCity' },
                 { name: 'ShipCountry', map: 'ShipCountry' }
                 ],
                 url: '@Url.Action("GetData", "SaveState")',
                 root: 'entry',
                 type: 'GET',
                 pager: function (pagenum, pagesize, oldpagenum) {
                     // callback called when a page or page size is changed.
                 },
                 filter: function () {
                     // update the grid and send a request to the server.
                     $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                 },
                 beforeprocessing: function (data) {
                     source.totalrecords = data.TotalCount;
                     loaddata = data;
                 }
             };
             BindSource(source);
         }
         function BindSource(source) {
             var theme = getDemoTheme();
             var dataAdapter = new $.jqx.dataAdapter(source);
             $("#jqxgrid").jqxGrid(
             {
                 width: 670,
                 source: dataAdapter,
                 theme: theme,
                 selectionmode: 'multiplerowsextended',
                 sortable: true,
                 pageable: true,
                 virtualmode: true,
                 autoheight: true,
                 autoloadstate: false,
                 autosavestate: false,
                 columnsresize: true,
                 columnsreorder: true,
                 showfilterrow: true,
                 filterable: true,
                 rendergridrows: function () {
                     return dataAdapter.records;
                 },
                 ready: function () {
                     $('#jqxgrid').jqxGrid('autoresizecolumns');
                 },
                 columns: [
                   { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 },
                   { text: 'Ship City', datafield: 'ShipCity', width: 200 },
                   { text: 'Ship Country', datafield: 'ShipCountry', width: 200 }
                 ]
             });
         }
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <input type="button" id="saveState" value="Save State" />
            <input type="button" id="loadState" value="Load State" />
            <input type="button" id="hide" value="Hide Ship City" />
        </div>
    </div>
</body>
</html>

Controller Part

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace TestGridLayout.Controllers
{
    public class SaveStateController : Controller
    {
        //
        // GET: /SaveState/
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult SaveState()
        {
            return View();
        }
        public ActionResult GetData(int pagesize, int pagenum)
        {
            List<Dictionary<string, dynamic>> lstDict = new List<Dictionary<string, dynamic>>();
            Dictionary<string, dynamic> dictData = new Dictionary<string, dynamic>();
            string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Layout.txt");
            string content = string.Empty;
            for (int i = 0; i < 100; i++)
            {
                dictData = new Dictionary<string, dynamic>();
                dictData.Add("OrderID", i);
                dictData.Add("ShipName", "N" + i);
                dictData.Add("ShipCity", "CT" + i);
                dictData.Add("ShipCountry", "CY" + i);
                lstDict.Add(dictData);
            }
            if (System.IO.File.Exists(filePath))
            {
                using (StreamReader sr = new StreamReader(filePath))
                {
                    content = sr.ReadToEnd();
                }
            }
            var result = new
            {
                TotalCount = lstDict.Count,
                entry = lstDict,
                viewcontent = content,
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        public string SaveLayout(string viewcontent)
        {
            string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Layout.txt");
            try
            {
                if (System.IO.File.Exists(filePath))
                    System.IO.File.Delete(filePath);
                System.IO.StreamWriter file = new System.IO.StreamWriter(filePath);
                file.WriteLine(viewcontent);
                file.Close();
            }
            catch (Exception eX)
            {
                Response.StatusCode = 500;
                Response.StatusDescription = eX.Message;
            }
            return ("Layout saved to the location : " + filePath);
        }
    }
}

Regards
Dominic

September 23, 2013 at 1:23 pm in reply to: Help in setting the property ‘autoresizecolumns’ Help in setting the property ‘autoresizecolumns’ #29384

dominicthoppil

Participant

Dear Dimitar

Thank you for your quick response. Now we are using v2.9.2. I will try with the version V3.0.2.

Regards
Dominic

September 23, 2013 at 12:20 pm in reply to: Help in setting the property ‘autoresizecolumns’ Help in setting the property ‘autoresizecolumns’ #29381

dominicthoppil

Participant

Dear Dimitar

Thank you for your reply.

Unfortunately the solution didn’t work for me. As you said i disabled columnresize (columnsresize: false). If i change the order of the column, the width will be lost and also in grouping. In your example, you have set the width for your columns, but in my case i didn’t set the width to my column. I set only three properties to the columns, i.e dataField,editable and text.

My binding part as follows.

   function LoadGrid(source) {
                var dataadapter = new $.jqx.dataAdapter(source, {
                    loadError: function (xhr, status, error) {
                        DisplayError(xhr, '#divError');
                    }});
                var theme = getDemoTheme();
                $("#jqxgrid").jqxGrid({
                    source: dataadapter,
                    width: $("#jqxgrid").parent().width(),
                    height: $("#jqxgrid").parent().height(),
                    pageable: true,
                    virtualmode: true,
                    filterable: true,
                    theme: theme,
                    columnsresize: false,
                    showfilterrow: true,
                    groupable: true,
                    sortable: true,
                    columnsreorder: true,
                    rendergridrows: function () {
                        return dataadapter.records;
                    },
                    ready: function () {
                        $('#jqxgrid').jqxGrid('autoresizecolumns');
                    },
                    columns: dataLoader.gridColumns, //my columns will be in the object dataLoader.gridColumns.
                });
                $("#jqxgrid").on('columnreordered', function (event) {
                    $("#jqxgrid").jqxGrid('autoresizecolumns');
                });
            }

Any hints?

Regards
Dominic

September 23, 2013 at 4:43 am in reply to: An error alert during grid binding (Error message : [object Object]) An error alert during grid binding (Error message : [object Object]) #29336

dominicthoppil

Participant

Dear Dimitar

Thank you for your reply. My issue got solved when i made some changes in the data.

Regards
Dominic

September 18, 2013 at 12:52 pm in reply to: Paging issue in jqxgrid Paging issue in jqxgrid #29175

dominicthoppil

Participant

Dear Peter Stoev

Thank you for the information. It worked when i used key value pair [Collection of dictionary]. But my grid filtering is not working. I set both the showfilterrow : true and filterable: true. I can see the filter row but it is not filtering based on by input (at least in the loaded data ). How can i solve this issue.

Regards
Dominic

September 16, 2013 at 5:09 am in reply to: Paging issue in jqxgrid Paging issue in jqxgrid #29008

dominicthoppil

Participant

Dear Peter Stoev,

Thank you for your response.

Since my all columns are dynamic, I can’t create an array. So I can send only json string to the server.
Is it possible to override the default behavior?

I.E.

1. Load the first page data initially [Binding json string to grid]
2. When the user clicks the next page, I will call a controller method with arguments as page number and page size and rebind the next page data [json string] to the grid.

If it is possible, in which event (rendergridrows, pagerenderer, pagechanged etc) I should call my controller method to invoke the next page data and how do I bind the grid (or refresh the grid) with the new data.

Regards
Dominic

August 7, 2013 at 10:30 am in reply to: Search/Filter for jqxTree Search/Filter for jqxTree #26392

dominicthoppil

Participant

Any updates on this ?

Regards
Dominic

August 7, 2013 at 5:25 am in reply to: Search/Filter for jqxTree Search/Filter for jqxTree #26365

dominicthoppil

Participant

Thank you for your reply.

I was trying to create a workaround. I was partially succeeded and it may not the best as i am not an expert in jquery. If i found an item which is at the bottom of the tree , how can i set the scroll bar to that position. The selection is in that item, but scroll bar is not moving based on the selection. Do you have any suggestions ?

If you have some around , please share.


 var allItems;
        var list = new Array();
        var itemselected = false;
        $("#txtsearch").keypress(function () {
            itemselected = false;
            if (allItems == null) {
                allItems = $('#jqxtree').jqxTree('getItems');
                $.each(allItems, function () {
                    list.push(this.value);
                });
                searchitems();
            }
            else {
                searchitems();
            }
        });
        function searchitems() {
            $.map(list, function (value) {
                if (itemselected == true) return;
                d = $('#txtsearch').val();
                var search = new RegExp(d, "gi");
                if (value.match(search)) {
                    $.each(allItems, function () {
                        if (itemselected == true) return;
                        if (this.value.toUpperCase() == value.toUpperCase()) {
                            $('#jqxtree').jqxTree('selectItem', this);
                            $('#jqxtree').jqxTree('expandItem', this);
                            itemselected = true;
                        };
                    });
                    return value;
                }
                return null;
            });
        }

Regards
Dominic

Author

Posts

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