jqxGrid addrow is not adding any row

Question

The issue here is addrow is not working, I am sure mailQuestionsGridSpec exists.

$(document).on("click", "#BtnSendQuestion", function (e) {
    e.preventDefault();
    var privateValue=true;
    var prodData = {
        Rel: parseInt($("#InputRec").val()),
        Rec: true,
        Dep: $("#InputDep").val() == "-1" ? null : $("#InputDep").val(),
        Mai: $("#InputAdd").val(),
        Rece: $("#InputAddQuestionTo").val(),
        Sub: $("#InputAddQuestionS").val(),
        Pri: privateValue
    };
    if (prodData.Dep==null)
    {
        try {
            $("#mailQuestionsGridSpec").jqxGrid('addrow', null, prodData);
        } catch (error) {
            console.error('Error adding row:', error);
        }
    }
});

I am binding the table here:

gridBindAll({ id: $('#InputRec').val() }, $('#mailQuestionsGridSpec'), "/Sp/GetSp/");

And the grid bind function datafields are:

var gridBindAll = function (data, gridInput,url) {
    var gridData = Send(data, url);
    var source =
    {
        totalrecords: gridData.Response.length,
        localData: gridData.Response,
        datafields:
            [
                { name: 'Rec', type: 'int' },
                { name: 'Rel', type: 'int' },
                { name: 'Dep', type: 'int' },
                { name: 'Mai', type: 'string' },
                { name: 'Sen', type: 'string' },
                { name: 'Rece', type: 'string' },
                { name: 'Sub', type: 'string' },
                { name: 'Ans', type: 'string' },
                { name: 'Who', type: 'string' },
                { name: 'Upd', type: 'date' }
            ],
        datatype: "array",
    };

....

What could be the reason why? Anything about the data I send, or the way I use the binding function? No errors on the console.

Answer 1

It seems if (prodData.Dep==null) is blocking your add row action. Comment line below.

// if (prodData.Dep==null)
// {
      try {
          $("#mailQuestionsGridSpec").jqxGrid('addrow', null, prodData);
      } catch (error) {
          console.error('Error adding row:', error);
      }
// }

Example: https://jsfiddle.net/g41jvo9c/ (You need to modify it to fit your case!)

html code:

<button id="BtnSendQuestion">Add Row</button>
<div id="mailQuestionsGridSpec"></div>

JavaScript + jQuery code:

$(document).ready(function () {
    // Initialize the jqxGrid
    $("#mailQuestionsGridSpec").jqxGrid({
        width: 600,
        source: new $.jqx.dataAdapter({
            localdata: [],
            datafields: [
                { name: 'Rec', type: 'int' },
                { name: 'Rel', type: 'int' },
                { name: 'Dep', type: 'int' },
                { name: 'Mai', type: 'string' },
                { name: 'Sen', type: 'string' },
                { name: 'Rece', type: 'string' },
                { name: 'Sub', type: 'string' },
                { name: 'Ans', type: 'string' },
                { name: 'Who', type: 'string' },
                { name: 'Upd', type: 'date' }
            ],
            datatype: "array"
        }),
        columns: [
            { text: 'Rec', datafield: 'Rec' },
            { text: 'Rel', datafield: 'Rel' },
            // Add more columns as needed
        ]
    });

    // Button click event
    $(document).on("click", "#BtnSendQuestion", function (e) {
        e.preventDefault();
        var privateValue = true;
        var prodData = {
            Rel: 1,       // Replace with actual value
            Rec: true,
            Dep: 2,       // Replace with actual value
            Mai: "test",  // Replace with actual value
            Rece: "test", // Replace with actual value
            Sub: "test",  // Replace with actual value
            Pri: privateValue
        };
        
        // This if statement blocking your add row action
        //if (prodData.Dep==null){
          try {
              $("#mailQuestionsGridSpec").jqxGrid('addrow', null, prodData);
          } catch (error) {
              console.error('Error adding row:', error);
          }
        //}
    });
});