new with jqxGrid – how can i set class from bootstrap to button in cell ?

[ahmed.mo.aminParticipant]

Hi

i new with your very nice tools, i have a=add the jqxGrid and it works fine and add Edit button on it but i need to set bootstrap css class to it like “btn btn-primary” but i don’t know how can i do that so can you please help me with that ?

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source = {
                datatype: "json",

                datafields:
                [
                    { name: 'Acc_NO' },
                    { name: 'Acc_Nm_AR' },
                    { name: 'attn' }
                ],

                url: '/TaxMid/GetCustomers',
            };

            $("#jqxgrid").jqxGrid({
                source: source,
                rtl: true,
                pageable: true,
                theme: 'bootstrap',
                width: '100%',
                columns:
                    [
                        {
                            text: 'كود العميل', dataField: 'Acc_NO', align: 'center',
                            cellsrenderer: function (row, column, value) {
                                return '<div style="height: 35px; padding-top:3px; text-align:center; font-weight:bold; font-size:large; vertical-align:middle;">' + value + '</div>';
                            },
                        },

                        {
                            text: 'إسم الصيدلية', datafield: 'Acc_Nm_AR', align: 'center', columntype: 'textbox',
                            cellsrenderer: function (row, column, value) {
                                return '<div style="height: 35px; padding-top:3px; padding-right:3px; text-align:right; font-weight:bold; font-size:large; vertical-align:middle;">' + value + '</div>';
                            },
                        },

                        {
                            text: 'إسم العميل', datafield: 'attn', align: 'center', columntype: 'textbox',
                            cellsrenderer: function (row, column, value) {
                                return '<div style="height: 35px; padding-top:3px; padding-right:3px; text-align:right; font-weight:bold; font-size:large; vertical-align:middle;">' + value + '</div>';
                            },
                        },

                        {
                            text: '', datafield: 'Edit', columntype: 'button', width: 50, cellsrenderer: function () {
                                return "تعديل";
                            }, buttonclick: function (row) {
                                editrowindex = row;
                                var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Acc_NO");
                                window.location = '/Customers/Edit/' + id;
                            }
                        },

                        {
                            text: '', datafield: 'Details', columntype: 'button', width: 50, class: 'btn btn-primary', cellsrenderer: function () {
                                return "عرض";
                            }, buttonclick: function (row) {
                                editrowindex = row;
                                var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Acc_NO");
                                window.location = '/Customers/Details/' + id;
                            }
                        }
                    ]
            });
        });
    </script>

Note: vertical-align:middle; not working so i use padding-top:3px; to make text center vertically in cell >> hope to tell me waht not working too.

Thanks a lot

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

By using custom cellsrenderer you define what’s displayed in the cells and how the content is aligned. This does not depend on jqxGrid anymore. The “Edit” button can use only the same theme as jqxGrid i.e btn-primary can’t be applied to it.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

are that mean there is now way to add css class to this part?

                        {
                            text: '', datafield: 'Edit', columntype: 'button', width: 50, cellsrenderer: function () {
                                return "تعديل";
                            }, buttonclick: function (row) {
                                editrowindex = row;
                                var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Acc_NO");
                                window.location = '/Customers/Edit/' + id;
                            }
                        },

if i use jqxDataTable can i make that ?
or by other way
can i add jqxButtons to jqxGrid ?

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

You can probably try with cellclassname property. Ex: http://jsfiddle.net/jqwidgets/rcgsnbbe/. The Buttons in the Button Column are jqxButtons.

Best Regards,
Peter Stoev

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

[ahmed.mo.aminParticipant]

thanks for your concern

last q please: can i use template of jqxButtons in grid and set jqxButtons template ? (HOW ?!)

[Peter StoevKeymaster]

Hi ahmed.mo.amin,

There is no API for that.

Best Regards,
Peter Stoev

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

[Author]

Posts