Making a column of buttons and passing a value to that button?

[MatthewVParticipant]

I need to make a column in my grid nothing but buttons and when that button is clicked it redirects to a page passing in the value of “id” which is contained in the JSON result that propagates the grid. The problem is that when I try to read “ID” I only get “0” for the value. I based my code off an example from http://www.jqwidgets.com/custom-grid-cells-rendering/.

<script type="text/javascript">
        $(document).ready(function ()
        {
            var Source =
                {
                    datatype: "json",
                    datafields: [
                        { name: "ApprovalStatus", datatype: "string" },
                        { name: "ApprovedBy", datatype: "string" },
                        { name: "AssignedTo", datatype: "string" },
                        { name: "CurrentStatus", datatype: "string" },
                        { name: "DateApproved", datatype: "date" },
                        { name: "DateCompleated", datatype: "date" },
                        { name: "DateStarted", datatype: "date" },
                        { name: "EstimatedEndDate", datatype: "date" },
                        { name: "EstimatedStartDate", datatype: "date" },
                        { name: "ID", datatype: "int" },
                        { name: "Impact", datatype: "string" },
                        { name: "Name", datatype: "string" },
                        { name: "Priority", datatype: "string" },
                        { name: "Reason", datatype: "string" },
                        { name: "Type", datatype: "string" }
                    ],
                    url: '@Url.RouteUrl("GetChangeOrders")'
                };

            var dataAdapter = new $.jqx.dataAdapter(Source);

            var RenderNotesPage = function (ID)
            {
                return '<input type="button" class="gridButton" value="View Notes" onclick="window.open(\'' + '@Url.RouteUrl("ChangeOrderNotes", new { ChangeOrderID = -1 })'.replace("-1", ID) + '\', \'\', \'toolbars=0,width=400,height=400,left=200,top=200,scrollbars=1,resizable=1\'), event.preventDefault();" />';
            }

            $("#jqxgrid").jqxGrid(
                {
                    width: "100%",
                    source: dataAdapter,
                    pageable: true,
                    ready: function ()
                    {
                        var button = $('<input type="button" value="Add New Change Order" id="myButton" />');
                        button.click(function ()
                        {
                            location.href = '@Url.RouteUrl("AddChangeOrder")'
                        });
                        $(".jqx-grid-pager > div:first").append(button);
                    },
                    columns: [
                        { text: "Change Order", datafield: "Name" },
                        { text: "Notes", datafield: "ID", cellsrenderer: RenderNotesPage },
                        { text: "Change Type", datafield: "Type" },
                        { text: "Priority", datafield: "Priority" },
                        { text: "Impact", datafield: "Impact" },
                        { text: "Assigned To", datafield: "AssignedTo" },
                        { text: "Estimated Start Date", datafield: "EstimatedStartDate", cellsformat: "dddd, MMMM dd, yyyy h:mm tt" },
                        { text: "Estimated End Date", datafield: "EstimatedEndDate", cellsformat: "dddd, MMMM dd, yyyy h:mm tt" },
                        { text: "Date Actually Started", datafield: "DateStarted", cellsformat: "dddd, MMMM dd, yyyy h:mm tt" },
                        { text: "Reason for Change", datafield: "Reason" },
                        { text: "Approval Status", datafield: "ApprovalStatus" },
                        { text: "Approved By", datafield: "ApprovedBy" }
                    ]
                });
        });
    </script>

[DimitarParticipant]

Hello MatthewV,

Please consider using columntype: 'button', as shown in the demo Popup Editing. For such a column, you can set the buttonclick callback function and implement your required logic there.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[MatthewVParticipant]

Thanks that makes the button appear easily but I still can’t get the value.

[MatthewVParticipant]

Here is my new code:

    <script type="text/javascript">
        $(document).ready(function ()
        {
            var Source =
                {
                    datatype: "json",
                    datafields: [
                        { name: "ApprovalStatus", type: "string" },
                        { name: "ApprovedBy", type: "string" },
                        { name: "AssignedTo", type: "string" },
                        { name: "CurrentStatus", type: "string" },
                        { name: "DateApproved", type: "date" },
                        { name: "DateCompleated", type: "date" },
                        { name: "DateStarted", type: "date" },
                        { name: "EstimatedEndDate", type: "date" },
                        { name: "EstimatedStartDate", type: "date" },
                        { name: "ID", type: "int" },
                        { name: "Impact", type: "string" },
                        { name: "Name", type: "string" },
                        { name: "Priority", type: "string" },
                        { name: "Reason", type: "string" },
                        { name: "Type", type: "string" }
                    ],
                    url: '@Url.RouteUrl("GetChangeOrders")'
                };

            var dataAdapter = new $.jqx.dataAdapter(Source);

            var RenderNotesPage = function (ID)
            {
                return '<input type="button" class="gridButton" value="View Notes" onclick="window.open(\'' + '@Url.RouteUrl("ChangeOrderNotes", new { ChangeOrderID = -1 })'.replace("-1", ID) + '\', \'\', \'toolbars=0,width=400,height=400,left=200,top=200,scrollbars=1,resizable=1\'), event.preventDefault();" />';
            }

            $("#jqxgrid").jqxGrid(
                {
                    width: "100%",
                    source: dataAdapter,
                    pageable: true,
                    enablebrowserselection: true,
                    ready: function ()
                    {
                        var button = $('<input type="button" value="Add New Change Order" id="myButton" />');
                        button.click(function ()
                        {
                            location.href = '@Url.RouteUrl("AddChangeOrder")'
                        });
                        $(".jqx-grid-pager > div:first").append(button);
                    },
                    columns: [
                        { text: "Change Order", datafield: "Name" },
                        {
                            text: "Notes", datafield: "ID", width: 95, columntype: "button", cellsrenderer: function () { return "View Notes" },
                            buttonclick: function (value)
                            {
                                window.open('@Url.RouteUrl("ChangeOrderNotes", new { ChangeOrderID = -1 })'.replace("-1", value), "", "width = 400, height = 400, left = 200, top = 200, scrollbars = 1, resizable = 1");
                            }
                        },
                        { text: "Change Type", datafield: "Type", width: 185 },
                        { text: "Priority", datafield: "Priority", width: 60 },
                        { text: "Impact", datafield: "Impact", width: 60 },
                        { text: "Assigned To", datafield: "AssignedTo", width: 185 },
                        { text: "Estimated Start Date", datafield: "EstimatedStartDate", width: 170, cellsformat: "MMM dd, yyyy h:mm tt" },
                        { text: "Estimated End Date", datafield: "EstimatedEndDate", cellsformat: "MMM dd, yyyy h:mm tt" },
                        { text: "Date Started", datafield: "DateStarted", cellsformat: "MMM dd, yyyy h:mm tt" },
                        { text: "Date Compleated", datafield: "DateCompleated", cellsformat: "MMM dd, yyyy h:mm tt" },
                        { text: "Reason for Change", datafield: "Reason" },
                        { text: "Approval Status", datafield: "ApprovalStatus" },
                        { text: "Approved By", datafield: "ApprovedBy" }
                    ]
                });
        });
    </script>

[DimitarParticipant]

Hi MatthewV,

buttonclick is passed the row’s index, so I think your code should be modified as follows:

buttonclick: function(row) {
    var value = $('#jqxgrid').jqxGrid('getcellvalue', row, "ID");
    window.open('@Url.RouteUrl("ChangeOrderNotes", new { ChangeOrderID = -1 })'.replace("-1", value), "", "width = 400, height = 400, left = 200, top = 200, scrollbars = 1, resizable = 1");
}

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts