[Solved] Grid fails with 19 columns?

[Robert]

I'm trying to pass information through the model coming back from ajax call (json format) that is not displayed in the grid. This works fine for up to 18 columns (9 visible and used).

The second I add a 19th, everything stops working, the grid comes up with a very brief spinner, column headers and filters as programmed, but no rows displayed.

I know this isn't very specific, but does anyone have an idea where I'm going wrong?

I have had columns listed in the "columns" with the hidden attribute, I've also had fields passed in the data that are never referenced in the grid definition but are there when I populate my popup editor.

All of this works fine, until I return 19 data fields from my ajax web service.

Thanks, Bob

[Robert]

This is my model:

public class SpecialRequestViewModel
{
    public int idx  { get; set; }
    public string Description  { get; set; }
    public int Qty { get; set; }
    public string SpecialAssociation  { get; set; }
    public string isInstr { get; set; }
    public int MarketngEngnrID { get; set; }
    public int InitiatorID { get; set; }
    public int SalesEngnrID { get; set; }
    public int SpclEngnrID { get; set; }
    public int CustomerID { get; set; }
    public int ProdFam { get; set; }
    public string Product { get; set; }
    public string RequestNotes { get; set; }
    public DateTime? DateRequested { get; set; }
    public bool ReqrsBlockDiag { get; set; }
    public bool ReqrsInstInstr { get; set; }
    public bool ReqrsOprtManual { get; set; }
    public bool ReqrsDescription { get; set; }
    //public bool ReqrsMaintManual { get; set; }
    //public bool ReqrsSpecDwng { get; set; }
}

This is the DynamicLinq EF query: (If I uncomment one more item it fails to display any rows, though the grid frame and headers display fine).

var specials = db.SpecialRequests
    .OrderByDescending(p => p.idx) // EF requires oredered IQueryable to do paging
    .Select(q => new SpecialRequestViewModel
        {
            idx = q.idx,
            Description = q.Description,
            Qty = q.Qty,
            SpecialAssociation = q.SpecialAssociation,
            isInstr = q.IsInstrumentNotCompent ? "Inst." : "Comp.",
            MarketngEngnrID = q.MarketngEngnrID,
            CustomerID = q.CustomerID,
            ProdFam = q.ProductFamily,
            InitiatorID = q.InitiatorID,
            SalesEngnrID = q.SpclEngnrID,
            SpclEngnrID = q.SpclEngnrID,
            Product = q.Product,
            RequestNotes = q.RequestNotes,
            DateRequested = q.DateRequested,
            ReqrsBlockDiag = q.ReqrsBlockDiag,
            ReqrsInstInstr = q.ReqrsInstInstr,
            ReqrsOprtManual = q.ReqrsOprtManual,
            ReqrsDescription = q.ReqrsDescription//,
            //ReqrsMaintManual = q.ReqrsMaintManual,
            //ReqrsSpecDwng = q.ReqrsSpecDwng
        })
    .ToDataSourceResult(take, skip, sort, filter);

This is the JavaScript that populates the grid:

function FillSpclReqTbl() {
    mainGrid = $("#gridDiv1").kendoGrid({
        height: 870,
        editable: {
            mode: "popup",
            template: $("#SpecReqDetTemplate").html(),
            width: 800
        },
        sortable: true,
        toolbar: ["create"], // specify toolbar commands
        scrollable: {
            virtual: true
        },
        filterable: {
            mode: "menu, row"
        },
        filterMenuInit: function (e) {
            if (e.field === "DateRequested") {
                var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
                beginOperator.value("gte");
                beginOperator.trigger("change");

                var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
                endOperator.value("lte");
                endOperator.trigger("change");
            }
        },
        reorderable: true,
        resizable: true,
        columnResizeHandleWidth: 6,
        columns: [
            {
                field: "idx",
                width: 45,
                filterable: false
            },
            {
                field: 'isInstr',
                values: instValus,
                title: 'Instr',
                width: 70,
                headerAttributes: {
                    "title": "Instrument or Component"
                },
                filterable: {
                    extra: false,
                    cell: {
                        template: function (options) {
                            options.element.kendoDropDownList({
                                autoBind: false,
                                dataTextField: "text",
                                dataValueField: "value",
                                valuePrimitive: true,
                                dataSource: instFiltValus,
                                text: 'Both'
                            });
                        },
                        operator: 'eq',
                        showOperators: false,
                        inputWidth: 75
                    }
                }
            },
            {
                field: "Description",
                width: 220,
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        inputWidth: '90%',
                        template: '<input type="text" class="k-textbox" autocomplete="off" />'
                    }
                },
                template: "<div title=' #= Description # ' class='customClass'> #= Description # </div>"
            },
            {
                field: "Qty",
                width: 55,
                format: '{0:n0}',
                attributes: {
                    style: "text-align: center;"
                },
                filterable: {
                    cell: {
                        template: function (options) {
                            options.element.kendoNumericTextBox({
                                spinners: false,
                                format: "{0:n0}"
                            });
                            $(options.element).attr('autocomplete', 'off');
                        },
                        showOperators: false,
                        operator: 'eq',
                        inputWidth: 45,
                    }
                }
            },
            {
                field: "SpecialAssociation",
                title: 'Sp. Assoc.',
                width: 60,
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        template: '<input type="text" class="k-textbox" autocomplete="off" />',
                        inputWidth: 90
                    }
                }
            },
            {
                field: "InitiatorID",
                values: theSysUsers,
                title: 'Inititator',
                width: 100,
                filterable: {
                    extra: false,
                    cell: {
                        showOperators: false,
                        operator: "eq",
                        width: 75,
                        template: function (options) {
                            options.element.kendoDropDownList({
                                autoBind: false,
                                dataTextField: "text",
                                dataValueField: "value",
                                valuePrimitive: true, //just defaults back to (none) without this
                                dataSource: theSysUsers,
                                text: ' (none)'
                            });
                        },
                        inputWidth: '75%'
                    }
                }
            },
            {
                field: "SpclEngnrID",
                title: 'Spcl. Eng',
                values: theSpclEngrs,
                width: 100,
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "eq",
                        width: 75,
                        template: function (options) {
                            options.element.kendoDropDownList({
                                autoBind: false,
                                dataTextField: "text",
                                dataValueField: "value",
                                valuePrimitive: true,
                                dataSource: theSpclEngrs,
                                text: ' (none)'
                            });
                        },
                        inputWidth: '75%'
                    }
                }
            },
            {
                field: "DateRequested",
                title: 'Dt. Requested',
                width: 100,
                format: "{0:MM/dd/yyyy}",
                filterable: {
                    cell: {
                        enabled: false
                    }
                }
            },
            {
                command: ["edit"], title: " ", width: "80px"
            }
        ],
        dataSource: {
            serverSorting: true,
            serverPaging: true,
            serverFiltering: true,
            pageSize: 200,
            schema: {
                data: 'd.Data',
                total: 'd.Total',
                model: {
                    id: 'idx',
                    fields: {
                        idx: { type: "number", editable: false },
                        isInstr: { type: 'string', validation: { required: false } },
                        Description: { type: "string", validation: { required: false } },
                        Qty: { type: "number", validation: { required: false } },
                        SpecialAssociation: { type: "string", validation: { required: false } },
                        MarketngEngnrID: { type: "number", validation: { required: false } },
                        InitiatorID: { type: "number", validation: { required: false } },
                        SalesEngnrID: { type: 'number', validation: { required: false } },
                        SpclEngnrID: { type: "number", validation: { required: false } },
                        DateRequested: { type: "date", validation: { required: false } },
                        ProdFam: { type: "number", validation: { required: false } },
                        CustomerID: { type: "number", validation: { required: false } }
                    }
                }
            },
            batch: true,
            transport: {
                create: {
                    url: "SpecialsSystems.asmx/Create", //specify the URL which should create new records. This is the Create method of the Products.asmx service.
                    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                read: {
                    url: "SpecialsSystems.asmx/Read", //specify the URL which data should return the records.
                    processData: false,
                    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                update: {
                    url: "SpecialsSystems.asmx/Update", //specify the URL from which should update the records. This is the Update method of the Products.asmx service.
                    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                //destroy: {
                //    url: "SpecialsSystems.asmx/Destroy", //specify the URL which should destroy records. This is the Destroy method of the Products.asmx service.
                //    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                //    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                //},
                parameterMap: function (data, operation) {
                    if (operation.toString().toLowerCase() !== 'read') {
                        // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "spclReqs" parameter.
                        return JSON.stringify({ spclReqs: data.models });
                    } else {
                        // web services need default values for every parameter
                        data = $.extend({ sort: null, filter: null }, data);
                        return JSON.stringify(data);
                    }
                }
            },
        }
    });
}

I've already tried making sure *every* field in the JSON is represented in the schema model, but that fixed nothing.

Hopefully someone will better be able to see what is wrong or if there is a bug in the grid.

Bob

[Robert]

Answered my own issue...

In ASP.Net I always add this section in web.config:

<system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="2147483644" />
      </webServices>
    </scripting>
  </system.web.extensions>

If you don't, any JSON query response exceeding a certain length will fail. I had forgotten to include this in the app in question.

Bob Graham