Jq grid on button click

Question

Jq grid on button click

Guhananth S 1

I have sample output to be shown in grid.

Sample output I need
Sample. 100. 0 - -

      184    -    6. - -

Sample1. 11 - -sob2*

How to display in mvc razor

1 answer

Your answer

Answer 1

Hi @Guhananth S ,
Your needs and sample output data are not very clear. I made a demo about clicking the button to display the jq grid. I hope it can help you.
jqGridView.cshtml

<body>  
    <Button id="btnSubmit">button</Button>  
    <div>  
        <table id="grid"></table>  
        <div id="pager"></div>  
    </div>  
</body>  
</html>  
<scr ipt>  
    $(document).ready(function () {  
        $('#btnSubmit').click(function () {  
        $("#grid").jqGrid({  
  
            url: '/jqGrid/jqGridViewjson',  
            contentType: "application/json",  
            datatype: "json",  
            jsonReader: { repeatitems: false, id: "Id", root: function (obj) { return obj; } },  
            colNames: ['Company Name', 'Rooftop Name', 'Updated By', 'UpdatedDate'],  
            colModel: [  
                { name: 'CompanyName', index: 'CompanyName', width: 150 },  
                { name: 'RooftopName', index: 'RooftopName', width: 150 },  
                { name: 'UpdatedBy', index: 'UpdatedBy', width: 150 },  
                { name: 'UpdatedDate', index: 'UpdatedDate', width: 150 }  
            ],  
            rowNum: 10,  
            mtype: "GET",  
            rowList: [10, 20, 30],  
            pager: '#pager',  
            loadonce: true,  
            viewrecords: true,  
            sortorder: "desc",  
            autoencode: true,  
            caption: "Company approval"  
        });  
            $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });  
        });  
    });  
</scr ipt>

Controller

public class jqGridController : Controller  
    {  
        public ActionResult jqGridView()  
        {  
            return View();  
        }  
  
        public JsonResult jqGridViewjson()  
        {  
  
            List<jqGridModel> company = new List<jqGridModel>();  
            company.Add(new jqGridModel()  
            {  
                CompanyName = "Ms",  
                RooftopName = "MS",  
                UpdatedBy = "Vivek",  
                UpdatedDate = DateTime.Today.ToString("dd/MM/yyyy")  
            });  
            Console.Write(company);  
            company.Add(new jqGridModel()  
            {  
                CompanyName = "Ms1",  
                RooftopName = "Ms1",  
                UpdatedBy = "Pankaj",  
                UpdatedDate = DateTime.Today.ToString("dd/MM/yyyy")  
            });  
  
            var result = Json(company, JsonRequestBehavior.AllowGet);  
            return result;  
  
        }     
    }

Model

 public class jqGridModel  
    {  
        public string CompanyName { get; set; }  
        public string RooftopName { get; set; }  
        public string UpdatedBy { get; set; }  
        public string UpdatedDate { get; set; }  
    }

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Jq grid on button click

1 answer

Your answer