Click here to Skip to main content
14,326,728 members
Rate this:
Please Sign up or sign in to vote.
See more:
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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100