We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

DataGrid with custom loading

Thread ID:

Created:

Updated:

Platform:

Replies:

117790 Dec 15,2014 11:19 AM Jan 8,2015 06:33 AM JavaScript 11
loading
Tags: ejDataManager
Walter Maranini
Asked On December 15, 2014 11:19 AM

I would like to create a datagrid with virtual scrolling and load data on demand.
How to:

  • call the web method using POST method?
  • send custom data to web method?
  • use a jquery ajax queue to perform request?
Thanks
Stefano Enrico


Ragavee U S [Syncfusion]
Replied On December 16, 2014 06:28 AM

Hi Stefano

 

Query #1: call the web method using POST method?

 

Based on your requirement, we have created a sample with virtual scrolling and load on demand feature enabled. The sample can be downloaded from the below location.

 

Sample Link:  http://www.syncfusion.com/downloads/support/directtrac/general/SyncMVC746848833.zip

 

In the above sample, we have used UrlAdaptor to perform POST operation to obtain the data from the server and pass it to grid dataSource. And also, at the server side, using the DataManager class we have performed “load on demand” by passing only the data corresponding to that page. Please refer the below code snippet.

 

[CS]

public ActionResult Event(DataManager dm)

        {           

            var DataSource = OrderRepository.GetAllRecords();           

            DataResult result = new DataResult();

            result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();

            result.count = DataSource.Count();

            return Json(result, JsonRequestBehavior.AllowGet);

        }

 

[JS]

<script type="text/javascript">

   

    $(function () {

        var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" });      

            $("#Grid").ejGrid({

                dataSource: data,

                allowScrolling: true,

                scrollSettings: { width: 0, height: 300, allowVirtualScrolling: true},

                . . . .

       });

    });   

    

</script>

 

Please refer the below screenshot:

 

 

Query #2: send custom data to web method?

 

We can send a custom data to the web method using the addParams property of ej.Query(). Please refer the below code snippet

 

<script type="text/javascript">

   

    $(function () {       

            $("#Grid").ejGrid({

                . . . .

               actionBegin: function (args) {

                    args.model.query.addParams("employeeID", 4);

                }

          

        });

    });   

    

</script>

 

[CS]

public ActionResult Event(DataManager dm,int? employeeID)

        {           

            //code for operation using custom data/parameter

        }

 

Please refer the below screenshot

 

 

Query #3: use a jquery ajax queue to perform request?

 

We need few clarifications from your side on the above query.

 

Could you please let us know if, by jquery ajax queue, did you mean jquery .queue() and .dequeue() or jquery .ajaxq()

 

Jquery.queue() and dequeue()

 

It is mainly used for animation purposes. Please refer the below online link:

 

http://api.jquery.com/jquery.queue/

 

jquery .ajaxq()

 

It is used to run the AJAX requests in a sequential manner. Please refer the below link:

 

https://code.google.com/p/jquery-ajaxq/

 

For your kind information, if you want to perform tasks in sequential manner, promise.done() can be used. On Performing the executeQuery() on dataManager, we get the output as promise. On the success/done event of promise, we can specify the requests that are to be performed sequentially. Please refer the below code snippet.

 

<script type="text/javascript">

   

    $(function () {

        var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" });

        var query = ej.Query().addParams("employeeID", 4);

        var promise = data.executeQuery(query);

        promise.done(function (e) {

            //requests to be performed

           });

        });

    });   

    

</script>

 

Please get back to us if you need any further assistance.

 

Regards

Ragavee U S


Walter Maranini
Replied On December 16, 2014 08:16 AM

Thanks Ragavee for the response.
Sorry, but I can't see the screenshots

Gowthami V [Syncfusion]
Replied On December 17, 2014 12:16 AM

Hi Stefano,

Sorry about the inconvenience caused.


We have attached the screenshot file which is not loaded properly in the previous response and the same can be downloaded from the below link.

 

Screenshot Link: UrlAdaptor.zip

 

Please get back to us if you need further assistance.

 

Regards,

Gowthami V.


Stefano Enrico
Replied On December 19, 2014 09:01 AM

Hi Ragavee

Query #1
solved!

Query #2:
actionBegin event triggers only at the first call and when i add sorts, but not when add filters
Also skip also take not passed with the filters

var dataManager = ej.DataManager({
url: window.location.rel='nofollow' href + '/_GRID',   // my asp.net handler 
offline: false,
adaptor: 'UrlAdaptor'
});

[...]

$grid.ejGrid({
dataSource: dataManager,
actionBegin: function (args) {
$.each(Object.keys(params), function () {
args.model.query.addParams(this.toString(), params[this]);
});
},
offline: false,
columns: columns,
allowReordering: true,
showColumnChooser: true,
allowResizing: true,
allowResizeToFit: true,
allowScrolling: true,
scrollSettings: { allowVirtualScrolling: true, height: height, width: 0 },
allowFiltering: true,
filterSettings: { filterType:  'menu' },
allowSearching: true,
allowSorting: true,
allowMultiSorting: true,
allowSelection: true,
selectionType: 'single',
selectedRowIndex: 1
});

See zip file for net log


Query #3:

All my server request are performed with this ajaxQueue:

var ajaxQueue = $({});
$.ajaxQueue = function (ajaxOpts) {
    var oldComplete = ajaxOpts.complete;
    ajaxQueue.queue(function (next) {
        ajaxOpts.complete = function () {
            if (oldComplete) { oldComplete.apply(this, arguments); }
            next();
        };
        $.ajax(ajaxOpts);
    });
};

For example: 

$.ajaxQueue({
url: window.location.rel='nofollow' href + '/' + options.GOSUB, type: 'POST', dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data, textStatus) {
},
error: function (data, textStatus) {
}
});

Attachment: 19122014_145404_c83a7b65.zip

Ragavee U S [Syncfusion]
Replied On December 22, 2014 12:01 PM

Hi Stefano

 

Query #1: “actionBegin event triggers only at the first call and when i add sorts, but not when add filters Also skip also take not passed with the filters”

 

We are sorry to let you know that we are unable to reproduce the issue mentioned. We can get the skip and take data after performing sorting and filtering operation. Please refer the attachments for screenshots.

 

Also, could you please tell us what data you are passing in the params object. Please provide us more information which will be helpful for us to provide you response accordingly.

 

Query #2: “All my server request are performed with this ajaxQueue”

 

We need few clarifications from your side on the above query. Could you please provide us more and clear information on the above query, such as what you would like to do with the ajaxQueue and what suggestion/requirement you would like to get from us?

 

The provided information will be helpful for us to provide you response accordingly.

 

Regards

Ragavee U S


Attachment: customData_1b3145bd.zip

Stefano Enrico
Replied On December 23, 2014 08:44 AM

Query #1:

I focused the issue: it is the grid filter that is immediate and fires the server request without skip and take
How to disable this behavior?

allowFiltering: true,
filterSettings: { filterType:  'menu' },

Ragavee U S [Syncfusion]
Replied On December 24, 2014 06:37 AM

Hi Stefano

 

Thanks for your update.

 

Since we are unable to reproduce the issue at our side, we need few clarifications from your side.

 

1.       Could you please provide us the information of your product version eg. v12.3.0.38?

2.       Could you please share your server side code(especially the _GRID method code in which you have processed data with skip,take) and client side code with us such that we can analyze the issue and provide you resolution.

3.       From the net log image that you have attached, we saw that you have obtained an Internal Server Error. Could you please provide us the trace details of the error?

 

Please provide us with the above requested information only after which we can analyze the issue reported and provide you response accordingly.

 

Please get back to us if you need any further assistance.

 

Regards

Ragavee U S


Stefano Enrico
Replied On December 29, 2014 08:41 AM

Hi Ragavee,

1. The version is 12.4.0.24 (updated today)

2. Client & Server code:

var columns = []; // empty only for this script
var params = { tipo: 1, nome: 'test' };
$('#grid').ejGrid({
dataSource: ej.DataManager({
url: window.location.rel='nofollow' href + '/_GRID',
offline: loadAll,
adaptor: 'UrlAdaptor'
}),
actionBegin: function (args) {
$.each(Object.keys(params), function () {
args.model.query.addParams(this.toString(), params[this]);
});
},
columns: columns,
allowReordering: true,
showColumnChooser: true,
allowResizing: true,
allowResizeToFit: true,
allowScrolling: true,
scrollSettings: { allowVirtualScrolling: true, height: height, width: 0 },
allowFiltering: true,
filterSettings: { filterType: 'menu' },
allowSearching: true,
allowSorting: true,
allowMultiSorting: true,
allowSelection: true,
selectionType: 'single',
selectedRowIndex: 0
});

/*------------------------------------------------------------------------*/

// ASP.net Handler

public void ProcessRequest(HttpContext context)
{
// [...]
Grid(context);
}

private void Grid(HttpContext context)
{
string jsonString;
context.Request.InputStream.Position = 0;
using (var inputStream = new StreamReader(context.Request.InputStream))
{
jsonString = inputStream.ReadToEnd();
}

Syncfusion.JavaScript.DataManager dm = javaScriptSerializer.Deserialize<Syncfusion.JavaScript.DataManager>(jsonString);

Dictionary<string, object> input = javaScriptSerializer.Deserialize<Dictionary<string, object>>(jsonString);

Int32 type = (Int32)input["tipo"];
String name = input["nome"].ToString();

IQueryable<object> list = (IQueryable<object>)Sistemi.Data.Helper.GetQueryable(name); // this method returns  the object collection

Syncfusion.JavaScript.DataSources.DataOperations dataOperation = new Syncfusion.JavaScript.DataSources.DataOperations();
IEnumerable result = dataOperation.Execute(list, dm);

var gridResult = new { result = result, count = list.Count() };

Syncfusion.JavaScript.Shared.Serializer.DataSourceSerializer dataSourceSerializer = new Syncfusion.JavaScript.Shared.Serializer.DataSourceSerializer();
string retJs = dataSourceSerializer.Serialize(gridResult);

context.Response.Write(retJs);
context.Response.ContentType = "application/json;";
context.Response.End();
}

3. Error 500 is returned because a server request fires without "skip" and "take" parameters. 
This happens when the column filter is immediate

Regards
Stefano

Sellappandi Ramu [Syncfusion]
Replied On January 2, 2015 08:05 AM

Hi Stefano,

Thanks for your update.

We have analyzed your code snippet and found that the input dictionary doesn’t have the tippo keyword when we type in the filter text box which is the cause of issue. We suggest you to check the condition before using input dictionary to resolve the issue. Please refer the below code snippet for further details.

/*Modified code*/

            if (input.ContainsKey("tippo"))

            {

                Int32 type = (Int32)input["tipo"];

                String name = input["nome"].ToString();

            }

For your convenience we have created sample and the same can be downloaded from the following link.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/117790/SyncMVC1177902036591919.zip

Please let us know if you need any further assistance.

Regards,

Sellappandi R

Stefano Enrico
Replied On January 7, 2015 03:51 AM

Hi Sellappandi, 

the most important issue is: can I put grid ajax request in my ajaxQueue?
All request of web application pass through this ajaxQueue. This concept is essential to our web framework.
I need to have control of the ajax call queue from all components, including grid. 

Please refer the below code snippet:

var columns = []; // empty only for this script
var params = { tipo: 1, nome: 'test' };
$('#grid').ejGrid({
dataSource: ej.DataManager({
url: window.location.rel='nofollow' href + '/_GRID',
offline: loadAll,
adaptor: 'UrlAdaptor'
}),
actionBegin: function (args) {
$.each(Object.keys(params), function () {
args.model.query.addParams(this.toString(), params[this]);
});
},
columns: columns,
allowReordering: true,
showColumnChooser: true,
allowResizing: true,
allowResizeToFit: true,
allowScrolling: true,
scrollSettings: { allowVirtualScrolling: true, height: height, width: 0 },
allowFiltering: true,
filterSettings: { filterType: 'menu' },
allowSearching: true,
allowSorting: true,
allowMultiSorting: true,
allowSelection: true,
selectionType: 'single',
selectedRowIndex: 0
});

var ajaxQueue = $({});
$.ajaxQueue = function (ajaxOpts) {
    var oldComplete = ajaxOpts.complete;
    ajaxQueue.queue(function (next) {
        ajaxOpts.complete = function () {
            if (oldComplete) { oldComplete.apply(this, arguments); }
            next();
        };
        $.ajax(ajaxOpts);
    });
};



/*------------------------------------------------------------------------*/

// ASP.net Handler

public void ProcessRequest(HttpContext context)
{
// [...]
Grid(context);
}

private void Grid(HttpContext context)
{
string jsonString;
context.Request.InputStream.Position = 0;
using (var inputStream = new StreamReader(context.Request.InputStream))
{
jsonString = inputStream.ReadToEnd();
}

Syncfusion.JavaScript.DataManager dm = javaScriptSerializer.Deserialize<Syncfusion.JavaScript.DataManager>(jsonString);

Dictionary<string, object> input = javaScriptSerializer.Deserialize<Dictionary<string, object>>(jsonString);

//Int32 type = (Int32)input["tipo"];
//String name = input["nome"].ToString();

IQueryable<object> list = (IQueryable<object>)Sistemi.Data.Helper.GetQueryable(); // this method returns  the object collection

Syncfusion.JavaScript.DataSources.DataOperations dataOperation = new Syncfusion.JavaScript.DataSources.DataOperations();
IEnumerable result = dataOperation.Execute(list, dm);

var gridResult = new { result = result, count = list.Count() };

Syncfusion.JavaScript.Shared.Serializer.DataSourceSerializer dataSourceSerializer = new Syncfusion.JavaScript.Shared.Serializer.DataSourceSerializer();
string retJs = dataSourceSerializer.Serialize(gridResult);

context.Response.Write(retJs);
context.Response.ContentType = "application/json;";
context.Response.End();
}

I deepen my problem with the immediate column filter after the resolution of this request.
Thank You


Ragavee U S [Syncfusion]
Replied On January 8, 2015 06:33 AM

Hi Stefano,

We considered this requirement “Perform grid ajax request in ajaxQueue” as feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards

Ragavee U S



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;