jQuery UI Widgets Forums ASP .NET MVC database requst for each row in grid

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 7 years, 12 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • database requst for each row in grid #91565

    Manowar
    Participant

    Hello, I got an application on jqxGrid, which gets rows of Documents or Document’s details rows
    but via SQLManagement Studio I see that for each row ( I show 10 rows on default) I got distinct request for the database ( 10 requests)
    Can you, please, help me with this issue?

    
            $(document).ready(function () {
    
               var types = [
                    {DocumentTypeID:1, Name:"Товарная накладная"},
                    {DocumentTypeID:2, Name:"Остатки"},
                    {DocumentTypeID:5, Name:"Излишки"}
                ];
    
                var typesSource =
                {
                    datatype: "array",
                    datafields: [
                        { name: 'Name', type: 'string' },
                        { name: 'DocumentTypeID', type: 'number' }
                    ],
                    localdata: types
                };
    
                var typesAdapter = new $.jqx.dataAdapter(typesSource, {
                    autoBind: true
                });
    
                // данные для master grid
                var source =
                        {
                            datatype: "json",
                            datafields: [
    			     { name: 'DocDate', type: 'date' },
                                 { name: 'RegNumber', type: 'string' },
                                 { name: 'UserID', type: 'number' },
                                 { name: 'RecordDate', type: 'date' },
                                 { name: 'RecordStatusID', type: 'number' },
                                 { name: 'RegistrationDate', type: 'date' },
                                 { name: 'Number', type: 'string' },
                                 { name: 'Description', type: 'string' },
                                 { name: 'DocumentTypeName', type: 'string' },
                                 { name: 'DocumentID', type: 'number' },
                                 { name: 'DocumentTypeID', type: 'number' },
                                 { name: 'ObjectID', type: 'number' },
                                 { name: 'Summa', type: 'number' },
                                 { name: 'ContragentName', type: 'string' }
                            ],
                            id: 'DocumentID',
                            url: 'GetIncDocuments',
                            root: 'Rows',
                            beforeprocessing: function (data) {
                                source.totalrecords = data.TotalRows;
                            },
    
                            addrow: function (rowid, rowdata, position, commit) {
                                // synchronize with the server - send insert command
                                rowdata.ObjectID = @ObjectID;
    
                                $.ajax({
                                    cache: false,
                                    dataType: 'json',
                                    contentType: "application/json; charset=utf-8",
                                    url: '../fooDocument/Add',
                                    data: JSON.stringify(rowdata),
                                    type: "POST",
                                    success: function (data, status, xhr) {
                                        rowdata.DocumentID = data.DocumentID;
                                        // insert command is executed.
                                        commit(true);
                                        $("#jqxgrid").jqxGrid("updatebounddata", "data");
                                    },
                                    error: function (jqXHR, textStatus, errorThrown) {
                                        alert(errorThrown);
                                        commit(false);
                                    }
                                });
                            },
                            deleterow: function (rowid, commit) {
                                commit(true);
                                $("#jqxgrid").jqxGrid('updatebounddata', 'data');
                            },
                            updaterow: function (rowid, rowdata, commit) {
                                rowdata.ObjectID = @ObjectID;
                                if (rowdata.Description != "здесь должно быть описание" && rowdata.RecordStatusID == 3) 
                                    rowdata.RecordStatusID = 1;
                                //alert(JSON.stringify(rowdata));
                                $.ajax({
                                     cache: false,
                                     dataType: 'json',
                                     url: '../fooDocument/Update',
                                     contentType: "application/json; charset=utf-8",
                                     data: JSON.stringify(rowdata),
                                     type: "POST",
                                     success: function (data, status, xhr) {
                                         // update command is executed.
                                         commit(true);
                                     },
                                     error: function (response) {
                                         alert(response.responseText);
                                         commit(false);
                                     }
                                 });
                             }
                    };
                
    
                var dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        loadComplete: function () {
                            $('span[style*="top: 4px"]').css("left", "2.5px");
                        }
                    }
                );
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                        {
                            width: 1000,
                            source: dataAdapter,
                            autoheight: true,
                            autoheight: true,
                            editable: true,
                            sortable: true,
                            localization: getLocalization(),
                            showaggregates: true,
                            showstatusbar: true,
                            statusbarheight: 25,
                            altrows: true,
                            editmode: 'selectedcell',//'selectedrow','click','selectedcell'
                            selectionmode: 'singlerow',//'singlecell', 'singlerow'
                            pageable: true,
                            virtualmode: true,
                            rendergridrows: function (obj) {
                                return obj.data;
                            },
                            columns: [
                                {
                                    text: "", datafield: "RecordStatusID", editable: false, width: 10, sortable: false, //селектор строки
                                    cellsrenderer: function () {return '<div style="height: 100%; background-color: #EEEEEE"><span></span></div>';}
                                },
                                { text: "Дата", datafield: "DocDate", columntype: "datetimeinput", cellsformat: "dd.MM.yy", width: 120},
                                {
                                    text: "Тип", datafield: "DocumentTypeName", editable:false, cellsalign: 'center', displayfield: "DocumentTypeName",
                                    width: 220, cellsrenderer: linkrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                                        return "<a style='display:block;margin-top:5px;margin-left:4px' href=\"/fooDocument/IncDocumentCard/"
                                            + rowdata.DocumentID + "\">" + value + "</a>";
                                    }
                                    //createeditor: function (row, value, editor) {
                                    //    editor.jqxDropDownList({ source: typesAdapter, valueMember: 'DocumentTypeID', displayMember: 'Name',                autoDropDownHeight: true/*, autoBind: true*/ });
                                    //}
                                },
                                { text: "Номер", datafield: "Number", width: 100 },
                                { text: "Поставщик", datafield: "ContragentName", width: 120},
                                { text: "Описание", datafield: "Description",  width: 270, cellsrenderer: docRowCellsRenderer },
                                { text: "Сумма", datafield: "Summa", editable:false, cellsalign: 'right', width: 120, cellsrenderer: disablecellsrenderer},
                                {
                                    text: '', datafield: 'Delete', columntype: 'button', sortable: false, width: 20,
                                    cellsrenderer: function (){ return "<span class='glyphicon glyphicon-trash' style='margin: auto'></span>"; }
                                }
                            ]
                        });
    
    

    This is controller, which gets Documents from database:

    
     public JsonResult GetIncDocuments(int pagesize, int pagenum)
            {
                int objectID;
                if (Request.IsAuthenticated)
                {
                    var identity = (System.Security.Claims.ClaimsPrincipal)System.Threading.Thread.CurrentPrincipal;
                    objectID = Int32.Parse(identity.Claims.Where(c => c.Type == "ObjectID").Select(c => c.Value).SingleOrDefault());
                }
                else
                    objectID = 4;
    
                var dbResult = db.fooDocument.Where(d => d.DocumentTypeID == 1 || d.DocumentTypeID == 2 || d.DocumentTypeID == 5 &&
                                                    d.ObjectID == objectID &&
                                                    d.RecordStatusID != 2)
                                                    .OrderBy(d => d.DocDate).ToList();
                var documents = (from s in dbResult
                                 select new
                                 {
                                     s.DocumentID,
                                     s.DocDate,
                                     s.RegNumber,
                                     s.UserID,
                                     s.RecordDate,
                                     s.RecordStatusID,
                                     s.RegistrationDate,
                                     s.Number,
                                     s.Description,
                                     s.ObjectID,
                                     s.DocumentTypeID,
                                     s.ContragentName,
                                     DocumentTypeName = s.fooDocumentType.Name,
                                     Summa = s.fooIncDocDetail.Where(d => d.RecordStatusID == 1).Sum(a => a.Amount * a.Price)
                                 });
                var total = dbResult.Count();
                documents = documents.Skip(pagesize * pagenum).Take(pagesize);
                var result = new
                {
                    TotalRows = total,
                    Rows = documents
                };
                return Json(result, JsonRequestBehavior.AllowGet);
            }
    
    database requst for each row in grid #91585

    Peter Stoev
    Keymaster

    Hi Manowar,

    Whenever you call addrow you make AJAX request in your code. That is why adding 10 rows makes 10 AJAX requests. What you can do is to save the new added rows into a variable and when you wish make AJAX request with all rows data.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    database requst for each row in grid #91587

    Manowar
    Participant

    Thanks for the answer, Peter, but I mean 10 requests are present when page is loaded for the first time, when my dataAdapter for the documents is filled

    
    var source =
                        {
                            datatype: "json",
                            datafields: [
    			     { name: 'DocDate', type: 'date' },
                                 { name: 'RegNumber', type: 'string' },
                                 { name: 'UserID', type: 'number' },
                                 { name: 'RecordDate', type: 'date' },
                                 { name: 'RecordStatusID', type: 'number' },
                                 { name: 'RegistrationDate', type: 'date' },
                                 { name: 'Number', type: 'string' },
                                 { name: 'Description', type: 'string' },
                                 { name: 'DocumentTypeName', type: 'string' },
                                 { name: 'DocumentID', type: 'number' },
                                 { name: 'DocumentTypeID', type: 'number' },
                                 { name: 'ObjectID', type: 'number' },
                                 { name: 'Summa', type: 'number' },
                                 { name: 'ContragentName', type: 'string' }
                            ],
                            id: 'DocumentID',
                            url: 'GetIncDocuments',
                            root: 'Rows',
                            beforeprocessing: function (data) {
                                source.totalrecords = data.TotalRows;
                            },
    

    GetIncDocuments is my method to get documents from database

    database requst for each row in grid #91588

    Peter Stoev
    Keymaster

    Hi Manowar,

    10 requests can’t happen from jqxGrid. With that initialization the dataAdapter will definitely make only 1 call and your typesAdapter will make additional.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.