locked
How to pass stored procedures parameters to JQgrid for paging, sorting and searching in asp.net MVC RRS feed

  • Question

  • User1984354752 posted

    Hi folks;

    I have a stored procedure in my sql server doing the searching, sorting and paging. I want to pass all the parameters into the JQgrid in order to perform the functions . I think that I must pass the parameters value to the Json reader as below, but I don't know how to do it in the controller …..I know how to access the stored procedure via Entity framework but I don't know how to handle the parameters and pass them to the JQGRID.

    jsonReader:
    {
    root: "rows",   ====> are these the stored procedure parameters??? 
    page: "page",
    total: "total",
    records: "records",
    repeatitems: false,
    Id: "0"
    },

    The stored Procedure: 

    ALTER PROCEDURE [dbo].[Contracts_list_stadistics]
    @SearchTerm VARCHAR(50),
    @SortColumn VARCHAR(50),
    @SortOrder VARCHAR(50),
    @PageNumber INT,
    @PageSize INT
    AS
    BEGIN

    SET NOCOUNT ON;

    DECLARE @StartRow INT
    DECLARE @EndRow INT

    --Calculate the starting and ending of records

    SET @SortColumn =lower(isnull(@SortColumn, ''))
    SET @SortOrder =lower(isnull(@SortOrder, ''))
    SET @StartRow = ( @PageNumber-1) * @PageSize

    SET @EndRow= (@PageNumber*@PageSize)+1

    ; with CTEResult AS (
    select ROW_NUMBER () OVER (ORDER BY
    CASE WHEN ( @SortColumn ='Company' AND @SortOrder ='asc')THEN Company END ASC,
    CASE WHEN ( @SortColumn ='Company' AND @SortOrder ='desc')THEN Company END DESC ,
    CASE WHEN ( @SortColumn ='invoice' AND @SortOrder ='asc')THEN Invoice END ASC,
    CASE WHEN ( @SortColumn ='invoice' AND @SortOrder ='desc')THEN Invoice END DESC ,
    CASE WHEN ( @SortColumn ='description' AND @SortOrder ='asc')THEN [Description] END ASC,
    CASE WHEN ( @SortColumn ='description' AND @SortOrder ='desc')THEN [Description] END DESC ,
    CASE WHEN ( @SortColumn ='financial year' AND @SortOrder ='asc')THEN [Financial year] END ASC,
    CASE WHEN ( @SortColumn ='financial year' AND @SortOrder ='desc')THEN [Financial year] END DESC) AS RowNumber
    ,COUNT(*) OVER () AS TotalCount
    ,[ID]
    ,[Company]
    ,[Invoice]
    ,[Financial year]
    ,[Description]
    FROM dbo.Contracts_Expenditure
    WHERE (ISNULL(@SearchTerm, '')= '' OR Company LIKE '%' + @SearchTerm + '%')

    OR (ISNULL(@SearchTerm, '')= '' OR [Description] LIKE '%' + @SearchTerm + '%'))

    SELECT RowNumber,TotalCount, [ID],[Company],[Invoice],[Financial year],[Description]
    FROM CTEResult
    WHERE RowNumber>@StartRow AND RowNumber< @EndRow
    ORDER BY RowNumber

    END

    Thank you in advance 

    Monday, February 24, 2020 10:48 PM

Answers

  • User1535942433 posted

    Hi 9peculiar,

    Accroding to your description,as far as I think,jqgrid is a packaged plugin and it could paging automatically.So,you could add a table and set pager.

    More details,you could refer to below codes:

    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jgrid").jqGrid({
                url: "/Combolist/Companies",
                datatype: 'json',
                mtype: 'Get',
                colNames: ['ID', 'Student Name', 'Father Name',],
                colModel: [
                    { key: true, hidden: true, name: 'ID', index: 'ID', editable: true },
                    { key: false, name: 'Name', index: 'Name', editable: true },
                    { key: false, name: 'FatherName', index: 'FatherName', editable: true },
                ],
                pager: jQuery('#jgrid'),
                rowNum: 5,
                rowList: [10, 20, 30, 40],
                height: '100%',
                viewrecords: true,
                loadonce: true,
                caption: 'Students Records',
                emptyrecords: 'No Students Records are Available to Display',
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },
                autowidth: true,
                multiselect: false,
            })
    
        });
    </script>
    
    <h2>Index</h2>
    <div>
        <table id="jgrid"></table>
        <div id="jqControls"></div>
    </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 27, 2020 8:49 AM

All replies

  • User-474980206 posted

    The reader knows nothing of the parameters. Your controller should return a json result with the grid values. The root, lets you specify the json path to the array of rows.

    Note: the grid was designed for xml, but json support was added via the json reader.

    Tuesday, February 25, 2020 6:01 AM
  • User1535942433 posted

    Hi 9peculiar,

    Accroding to your description,I suggest you could add an Action Method for handling Ajax Get Request for Getting Data and binding it to jqGrid.It will be returned a  JSON object.

    In the view,the ajax url  specified jqGrid request to get data from the server.The jsonReader is used to set how to parse the json data sent back from the server.

    More details,you could refer to below codes:

    CombolistController:

    public ActionResult Index()
            {
                return View();
            }
            public JsonResult Companies()
            {
                var songs = new List<CRUD>
                {
                    new CRUD { ID="1",Name="A",FatherName="AA"},
                    new CRUD { ID="2",Name="B",FatherName="BB"},
                   new CRUD { ID="3",Name="C",FatherName="CC"},
                };
                var d = songs.ToList();
                return new JsonResult { Data = d, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }

    View:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jgrid").jqGrid({
                url: "/Combolist/Companies",
                datatype: 'json',
                mtype: 'Get',
                colNames: ['ID', 'Student Name', 'Father Name', ],
                colModel: [
                    { key: true, hidden: true, name: 'ID', index: 'ID', editable: true },
                    { key: false, name: 'Name', index: 'Name', editable: true },
                    { key: false, name: 'FatherName', index: 'FatherName', editable: true },
                ],
                pager: jQuery('#jqControls'),
                rowNum: 10,
                rowList: [10, 20, 30, 40, 50],
                height: '100%',
                viewrecords: true,
                caption: 'Students Records',
                emptyrecords: 'No Students Records are Available to Display',
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },
                autowidth: true,
                multiselect: false
            })
        });
    </script>
    
    <h2>Index</h2>
    <div>
        <table id="jgrid"></table>
        <div id="jqControls"></div>
    </div>

    More details,you could refer to below articles:

    https://www.c-sharpcorner.com/article/jqgrid-in-an-asp-net-mvc-application-using-entity-framework/

    http://geekswithblogs.net/renso/archive/2009/07/17/asp.net_mvc_with_jqgrid.aspx

    Best regards,

    Yijing Sun

    Tuesday, February 25, 2020 6:04 AM
  • User1984354752 posted

    Hi Bruce:

    I'm afraid I don't understand  your statement : "The root, lets you specify the json path to the array of rows.". Anyway …... I managed to  bind the stored procedure to the JQGrid and the sorting is working which means that the JQGrid passes the  SortColumn   & sortDirection  back to the server and the server in return sort the columns and send back the results to the grid. I'm not a coding guru but the above finding means that the JQGrid can supply  the parameters the stored procedure needs .

    Up to this point this is what I exactly I need excepting that there are still two parameters in the stored procedure (  @PageNumber ,@PageSize ) that I don't figure out how to get them out of the JQGrid like I did for the  two that are working @SortColumn & @sortDirection. The common sense says that if the JQgrid passes the @SortColumn & @sortDirection parameters, surely it should also do it for the @PageNumber ,@PageSize .

    I attached the stored procedure again and the view with the Jqgrid so you can suggest how I can get the page number and page size out of the grid to pass them to the server. 

    I will appreciate if  you can assist me in this .

    public ActionResult storedprocedure()
    {

    //Server side parameters

    string SortColumn = Request["sidx"];
    string sortDirection = Request["sord"];


    var listofbeneficiaries = db.BeneficiarylistRepository.context.Contracts_list_stadistics("", SortColumn, sortDirection, 1,  40) ;=> , I don't want to hard code the PageNumber (1)    and Page size(40) 

    var jsondata =new

    {
    rows= listofbeneficiaries
    };


    return Json(new { rows = listofbeneficiaries }, JsonRequestBehavior.AllowGet);
    }

    Stored procedure 

    ALTER PROCEDURE [dbo].[Contracts_list_stadistics]
    @SearchTerm VARCHAR(50),
    @SortColumn VARCHAR(50),
    @SortOrder VARCHAR(50),
    @PageNumber INT,
    @PageSize INT
    AS
    BEGIN

    SET NOCOUNT ON;

    DECLARE @StartRow INT
    DECLARE @EndRow INT

    --Calculate the starting and ending of records

    SET @SortColumn =lower(isnull(@SortColumn, ''))
    SET @SortOrder =lower(isnull(@SortOrder, ''))
    SET @StartRow = ( @PageNumber-1) * @PageSize

    SET @EndRow= (@PageNumber*@PageSize)+1

    ; with CTEResult AS (
    select ROW_NUMBER () OVER (ORDER BY
    CASE WHEN ( @SortColumn ='Company' AND @SortOrder ='asc')THEN Company END ASC,
    CASE WHEN ( @SortColumn ='Company' AND @SortOrder ='desc')THEN Company END DESC ,
    CASE WHEN ( @SortColumn ='invoice' AND @SortOrder ='asc')THEN Invoice END ASC,
    CASE WHEN ( @SortColumn ='invoice' AND @SortOrder ='desc')THEN Invoice END DESC ,
    CASE WHEN ( @SortColumn ='description' AND @SortOrder ='asc')THEN [Description] END ASC,
    CASE WHEN ( @SortColumn ='description' AND @SortOrder ='desc')THEN [Description] END DESC ,
    CASE WHEN ( @SortColumn ='financial year' AND @SortOrder ='asc')THEN [Financial year] END ASC,
    CASE WHEN ( @SortColumn ='financial year' AND @SortOrder ='desc')THEN [Financial year] END DESC) AS RowNumber
    ,COUNT(*) OVER () AS TotalCount
    ,[ID]
    ,[Company]
    ,[Invoice]
    ,[Financial year]
    ,[Description]
    FROM dbo.Contracts_Expenditure
    WHERE (ISNULL(@SearchTerm, '')= '' OR Company LIKE '%' + @SearchTerm + '%')

    OR (ISNULL(@SearchTerm, '')= '' OR [Description] LIKE '%' + @SearchTerm + '%'))

    SELECT RowNumber,TotalCount, [ID],[Company],[Invoice],[Financial year] ,[Description]
    FROM CTEResult
    WHERE RowNumber>@StartRow AND RowNumber< @EndRow
    ORDER BY RowNumber

    END

    VIEW 

    $(document).ready(function () {
    $("#jgrid").jqGrid
    ({
    url: '/Contracts/storedprocedure',
    datatype: 'json',
    mtype: 'GET',
    colNames: [
    'ID',
    'Company',
    'Invoice',
    'Financial year',
    'Description'],
    colModel: [
    { name: 'ID', index: 'ID', editable: false, key: true },
    { name: 'Company', index: 'Company', editable: true, key: false, search: true, editrules: { required: true } },
    { name: 'Invoice', index: 'Invoice', editable: true, key: false, search: true, editrules: { required: true, number: true } },
    { name: 'Financial_year', index: 'Financial_year', editable: true, key: false, search: true, editrules: { required: true, number: true } },
    { name: 'Description', index: 'Description', editable: true, key: false, search: true, editrules: { required: true, number: true } }],

    pager: jQuery('#jgrid_page'),
    rowNum: 20,
    rowList: [20, 30, 40, 50],
    height: '100%',
    viewrecords: true,
    caption: 'Funding ',

    multiSort: true,
    emptyrecords: 'No records',
    jsonReader:
    {
    root: "rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: false,
    Id: "0"
    },
    autowidth: true,
    multiselect: false
    }).navGrid('#jgrid_page', { edit: true, add: true, del: true, search: true, refresh: true },
    {
    zIndex: 100,
    url: '/BeneficiaryList/Edit',
    closeOnEscape: true,
    closeAfterEdit: true,
    recreateForm: true,
    afterComplete: function (response) {
    if (response.responseText) {
    alert(response.responseText);
    }
    }
    },
    {
    // add options
    zIndex: 100,
    url: "/BeneficiaryList/Add",
    closeOnEscape: true,
    closeAfterAdd: true,
    afterComplete: function (response) {
    if (response.responseText) {
    alert(response.responseText);
    }
    }
    },

    {
    // delete options
    zIndex: 100,
    url: '/BeneficiaryList/Delete',
    closeOnEscape: true,
    closeAfterDelete: true,
    recreateForm: true,
    msg: "Are you sure you want to delete this Beneficiary?",
    afterComplete: function (response) {
    if (response.responseText) {
    alert(response.responseText);
    }
    }
    });

    });

    Thanking you in advance.

    Tuesday, February 25, 2020 10:10 PM
  • User1984354752 posted

    Hi Yij Sum:

    Thanks for your assistance but it seems  you misunderstood my questions or I didn't provide enough information. I know how to bind an stored procedure to a JQGRID  by both the Entity framework and ADO.NET …..my question relates how the JQGrid provides the parameters my stored procedure needs 

    . I managed to bind the stored procedure to the JQGrid and the sorting is working which means that the JQGrid passes the SortColumn & sortDirection back to the server and the server in return sort the columns and send back the results to the grid. I'm not a coding guru but the above finding means that the JQGrid can supply the parameters the stored procedure needs .

    Up to this point this is what I exactly I need excepting that there are still two parameters in the stored procedure ( @PageNumber ,@PageSize ) that I don't figure out how to get them out of the JQGrid like I did for the two that are working @SortColumn & @sortDirection. The common sense says that if the JQgrid passes the @SortColumn & @sortDirection parameters, surely it should also do it for the @PageNumber ,@PageSize .

    I attached the stored procedure again and the view with the Jqgrid so you can suggest how I can get the page number and page size out of the grid to pass them to the server.


    public ActionResult storedprocedure()
    {
    //Server side parameters
    string SortColumn = Request["sidx"];
    string sortDirection = Request["sord"];

    var listofbeneficiaries = db.BeneficiarylistRepository.context.Contracts_list_stadistics("", SortColumn, sortDirection, 1, 40) ;=> , I don't want to hard code the PageNumber (1) and Page size(40)
    var jsondata =new

    {
    rows= listofbeneficiaries
    };

    return Json(new { rows = listofbeneficiaries }, JsonRequestBehavior.AllowGet);
    }

    Stored procedure
    ALTER PROCEDURE [dbo].[Contracts_list_stadistics]
    @SearchTerm VARCHAR(50),
    @SortColumn VARCHAR(50),
    @SortOrder VARCHAR(50),
    @PageNumber INT,
    @PageSize INT
    AS
    BEGIN

    SET NOCOUNT ON;
    DECLARE @StartRow INT
    DECLARE @EndRow INT
    --Calculate the starting and ending of records
    SET @SortColumn =lower(isnull(@SortColumn, ''))
    SET @SortOrder =lower(isnull(@SortOrder, ''))
    SET @StartRow = ( @PageNumber-1) * @PageSize
    SET @EndRow= (@PageNumber*@PageSize)+1
    ; with CTEResult AS (
    select ROW_NUMBER () OVER (ORDER BY
    CASE WHEN ( @SortColumn ='Company' AND @SortOrder ='asc')THEN Company END ASC,
    CASE WHEN ( @SortColumn ='Company' AND @SortOrder ='desc')THEN Company END DESC ,
    CASE WHEN ( @SortColumn ='invoice' AND @SortOrder ='asc')THEN Invoice END ASC,
    CASE WHEN ( @SortColumn ='invoice' AND @SortOrder ='desc')THEN Invoice END DESC ,
    CASE WHEN ( @SortColumn ='description' AND @SortOrder ='asc')THEN [Description] END ASC,
    CASE WHEN ( @SortColumn ='description' AND @SortOrder ='desc')THEN [Description] END DESC ,
    CASE WHEN ( @SortColumn ='financial year' AND @SortOrder ='asc')THEN [Financial year] END ASC,
    CASE WHEN ( @SortColumn ='financial year' AND @SortOrder ='desc')THEN [Financial year] END DESC) AS RowNumber
    ,COUNT(*) OVER () AS TotalCount
    ,[ID]
    ,[Company]
    ,[Invoice]
    ,[Financial year]
    ,[Description]
    FROM dbo.Contracts_Expenditure
    WHERE (ISNULL(@SearchTerm, '')= '' OR Company LIKE '%' + @SearchTerm + '%')

    OR (ISNULL(@SearchTerm, '')= '' OR [Description] LIKE '%' + @SearchTerm + '%'))
    SELECT RowNumber,TotalCount, [ID],[Company],[Invoice],[Financial year] ,[Description]
    FROM CTEResult
    WHERE RowNumber>@StartRow AND RowNumber< @EndRow
    ORDER BY RowNumber

    END


    VIEW
    $(document).ready(function () {
    $("#jgrid").jqGrid
    ({
    url: '/Contracts/storedprocedure',
    datatype: 'json',
    mtype: 'GET',
    colNames: [
    'ID',
    'Company',
    'Invoice',
    'Financial year',
    'Description'],
    colModel: [
    { name: 'ID', index: 'ID', editable: false, key: true },
    { name: 'Company', index: 'Company', editable: true, key: false, search: true, editrules: { required: true } },
    { name: 'Invoice', index: 'Invoice', editable: true, key: false, search: true, editrules: { required: true, number: true } },
    { name: 'Financial_year', index: 'Financial_year', editable: true, key: false, search: true, editrules: { required: true, number: true } },
    { name: 'Description', index: 'Description', editable: true, key: false, search: true, editrules: { required: true, number: true } }],

    pager: jQuery('#jgrid_page'),
    rowNum: 20,
    rowList: [20, 30, 40, 50],
    height: '100%',
    viewrecords: true,
    caption: 'Funding ',
    multiSort: true,
    emptyrecords: 'No records',
    jsonReader:
    {
    root: "rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: false,
    Id: "0"
    },
    autowidth: true,
    multiselect: false
    }).navGrid('#jgrid_page', { edit: true, add: true, del: true, search: true, refresh: true },
    {
    zIndex: 100,
    url: '/BeneficiaryList/Edit',
    closeOnEscape: true,
    closeAfterEdit: true,
    recreateForm: true,
    afterComplete: function (response) {
    if (response.responseText) {
    alert(response.responseText);
    }
    }
    },
    {
    // add options
    zIndex: 100,
    url: "/BeneficiaryList/Add",
    closeOnEscape: true,
    closeAfterAdd: true,
    afterComplete: function (response) {
    if (response.responseText) {
    alert(response.responseText);
    }
    }
    },
    {
    // delete options
    zIndex: 100,
    url: '/BeneficiaryList/Delete',
    closeOnEscape: true,
    closeAfterDelete: true,
    recreateForm: true,
    msg: "Are you sure you want to delete this Beneficiary?",
    afterComplete: function (response) {
    if (response.responseText) {
    alert(response.responseText);
    }
    }
    });
    });

    Thanking you in advance.

    Tuesday, February 25, 2020 10:16 PM
  • User1535942433 posted

    Hi 9peculiar,

    Accroding to your description,as far as I think,jqgrid is a packaged plugin and it could sort automatically.

    More details,you could refer to below articles:

    Jqgrid sorting automatically:

    https://stackoverflow.com/questions/37652063/how-to-do-sorting-paging-in-jqgrid-in-asp-net-mvc

    Pass parameter values in stored procedure:

    https://forums.asp.net/t/1803441.aspx?How+to+pass+parameter+values+in+stored+procedure+in+asp+net+mvc3

    Best regards,

    Yijing Sun

    Wednesday, February 26, 2020 11:18 AM
  • User1984354752 posted

    Dear Yig Sun:

    Thanks again. the first link is what I was looking for but unfortunately  it's not o a great help as  there are some missing part in the code …....for instance RequestNavigation data = edb.RequestGetParam(page, rows, sidx, sord);  is assumed  to be the call for the stored procedure  right? …..but int totalRecords = data.totalRecords is a property  that it doesn't have any reference . I assume that this property is calculated by counting all the records in the underlying table which means that this property is calculated by another stored procedure  ( I don't think another way )  ….if this is the case the action method hit the database twice or only one ? 

    It's of a great help that we  post the whole coding part so we  can share our  problem/solution with the rest …….can you perhaps send me a complete example or to answer my questions? 

    Thanking you in advance.  

    Regards  

    Wednesday, February 26, 2020 2:00 PM
  • User-474980206 posted

    The the grid to do paging, it need the page size, the current page number , and total number of pages which is derived from the total records count. It cares not now you determine these values.

    note - jqGrid far from my favorite grid and I haves used it in years.

    Wednesday, February 26, 2020 7:19 PM
  • User1535942433 posted

    Hi 9peculiar,

    Accroding to your description,as far as I think,jqgrid is a packaged plugin and it could paging automatically.So,you could add a table and set pager.

    More details,you could refer to below codes:

    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jgrid").jqGrid({
                url: "/Combolist/Companies",
                datatype: 'json',
                mtype: 'Get',
                colNames: ['ID', 'Student Name', 'Father Name',],
                colModel: [
                    { key: true, hidden: true, name: 'ID', index: 'ID', editable: true },
                    { key: false, name: 'Name', index: 'Name', editable: true },
                    { key: false, name: 'FatherName', index: 'FatherName', editable: true },
                ],
                pager: jQuery('#jgrid'),
                rowNum: 5,
                rowList: [10, 20, 30, 40],
                height: '100%',
                viewrecords: true,
                loadonce: true,
                caption: 'Students Records',
                emptyrecords: 'No Students Records are Available to Display',
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },
                autowidth: true,
                multiselect: false,
            })
    
        });
    </script>
    
    <h2>Index</h2>
    <div>
        <table id="jgrid"></table>
        <div id="jqControls"></div>
    </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 27, 2020 8:49 AM