Bootstrap jtable

[dasguptahirak]

Is it possible to apply bootstrap css properties in jtable? i.e if I open jtable in small screen device it will auto adjust accordingly.

[DiomedesDominguez]

You can, but you will need to rewrite the library. For example, in my version not only you can apply css to the table but also to the forms thanks to the fact that I'm using bootstrap classes and modal, https://github.com/DiomedesDominguez/jtable/blob/master/jquery.jtable.js

[dasguptahirak]

@DiomedesDominguez Thanks for your prompt reply. Can you provide an example usage of your jtable version?

[DiomedesDominguez]

The usage is the same as the original version. Some of the main differences are:

• In the toolbar, the item's icon is based on glypicon and

• you can establish the size of each control in the form.

 $("#MainTableContainer").jtable({
            defaultSorting: "Nombre ASC",
            actions: GetjTableActions(baseUri),
            toolbar: {
                items: [
                    {
                        tooltip: "Haga clic aquí para importar sus propios datos.",
                        icon: "glyphicon-import",
                        text: "Importar",
                        click: function () {
                            $("#fArchivo").fileinput("refresh");
                            $("#MainModalImportar").modal("show");
                        }
                    },
                    {
                        icon: "glyphicon-refresh",
                        text: "Refrescar",
                        click: function () {
                            $("#MainTableContainer").jtable("reload");
                        }
                    }
                ]
            },
            fields: {
                Id: {
                    key: true,
                    list: false
                },
                Codigo: {
                    title: "Código",
                    inputClass: "validate[required]",
                    divClass: "col-md-3"
                },
                Nombre: {
                    title: "Nombre",
                    inputClass: "validate[required]",
                    divClass: "col-md-4"
                },
                Descripcion: {
                    title: "Descripción",
                    list: false,
                    type: "textarea",
                    inputClass: "",
                    divClass: "col-md-5"
                },
                EstadoId: {
                    title: "Provincia",
                    divClass: "col-md-3",
                    //list: false,
                    inputClass: "validate[required] selectpicker LiveSearch",
                    options: GetCombos("/Provincias/"),
                    display: function (data) {
                        return data.record.EstadoNombre;
                    }
                },
                CiudadId: {
                    title: "Municipio",
                    dependsOn: "EstadoId",
                    divClass: "col-md-3",
                    //list: false,
                    inputClass: "validate[required] selectpicker LiveSearch",
                    options: function (data) {
                        return GetCombos("/Municipios/") + "?Id=" + data.dependedValues.EstadoId;
                    },
                    display: function (data) {
                        return data.record.CiudadNombre;
                    }
                },
                Direccion: {
                    title: "Dirección",
                    width: "20%",
                    type: "textarea",
                    inputClass: "validate[required]",
                    divClass: "col-md-3"
                },
                Referencia: {
                    title: "Referencia",
                    divClass: "col-md-3",
                    list: false,
                    inputClass: "",
                    type: "textarea"
                },
                Latitud: {
                    title: "Latitud",
                    list: false,
                    divClass: "col-md-3",
                    inputClass: "validate[required,custom[number]]"
                },
                Longitud: {
                    title: "Longitud",
                    list: false,
                    divClass: "col-md-3",
                    inputClass: "validate[required,custom[number]]"
                },
                EstadoRegistro: {
                    title: "Estado",
                    width: "5%",
                    options: function (data) {
                        return GetCombos("/Estados/");
                    },
                    inputClass: "validate[required] selectpicker",
                    divClass: "col-md-3"
                },
                LastModifiedAt: {
                    title: "Modificado",
                    width: "5%",
                    create: false,
                    edit: false,
                    display: function (data) {
                        return moment(data.record.LastModifiedAt).format("YYYY-MMM-DD hh:mm:ss A");
                    }
                }
            },
            formCreated: function (event, data) {
                jTableFormCreatedOverload(event, data);
                $("#Edit-EstadoId").on("changed.bs.select", function () {
                    $("#Edit-CiudadId").selectpicker("refresh");
                });
            }
        });
        $("#MainTableContainer").jtable("load");

[dasguptahirak]

Thanks a lot for your reply. So I have to use your version of jquery.jtable.js for using divClass in fields?

[DiomedesDominguez]

Thanks a lot for your reply. So I have to use your version of jquery.jtable.js for using divClass in fields?

Yes.