a Sample application to display rows in a JQuery Grid

See more:

C#

C#4.0

MVC4

Hi,

Can any one help me please. I'm struck in the middle of implementing JQueryGrid with Editable operation. At present I can able to display the records in grid but I need to perform Editable operations.

this is my script code to display records:

 <script type="text/javascript">

        var jqDataUrl = "MyGrid/LoadGrid";
        //var jqDataUrl = "jQGrid/LoadjqData";
        $(document).ready(function () {

            // Set up the jquery grid
            $("#jqTable").jqGrid({
                // Ajax related configurations
                url: jqDataUrl,
                editurl: "MyGrid/PerformCRUDAction",
                datatype: "json",
                mtype: "POST",

                // Specify the column names
                colNames: ["Album", "Quantity", "Price (each)"],

                // Configure the columns
                colModel: [
            { name: "Album", index: "Album", width: 40, align: "left" },
            { name: "Quantity", index: "Quantity", width: 100, align: "left" },
            { name: "Price (each)", index: "Price (each)", width: 200, align: "left" }],
                //            { name: "Enrollment", index: "Enrollment", width: 200, align: "left"}],

                // Grid total width and height
                width: 550,
                height: 200,

                // Paging
                toppager: true,
                pager: $("#jqTablePager"),
                rowNum: 5,
                rowList: [5, 10, 20],
                viewrecords: true, // Specify if "total number of records" is displayed

                // Default sorting
                sortname: "Price",   //it should be the column ( (or) Property) present in the respective Class
                sortorder: "asc",

                // Grid caption
                caption: "A Basic jqGrid "
            }).navGrid("#jqTablePager",
            { refresh: true, add: true, edit: true, del: true },
                { closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300, editCaption: ["Edit Record"]}, // settings for edit
                { closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 }, // settings for add
                { closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 }, // settings for delete
                { sopt: ["cn"] } // Search options. Some options can be set on column level
         );
        });
</script>

I have a problem here - when I click on the edit button it displays a popup with submit and cancel button but I couldn't able to add controls to this popup the reason is it is a predefined popup came with in jqgrid .js.

Please help me.
Thanks in Advance.

With Regards,
Rohith.