FlexiGrid - Breite des Gitters im Code festlegen

Question

Ich probiere aus Flexigrid für eine neue App - ich bin wirklich beeindruckt davon, aber ich kann keine Möglichkeit finden, die Breite im Code einzustellen.

Der Hauptgrund dafür ist, dass das GITTER (nicht die Spalten innerhalb des Gitters) vollständig an die Größe des Fensters angepasst werden soll. Ich weiß, es macht eine Verhöhnung der horizontalen Resizer, aber das ist, was ich zu tun habe!

FYI meine Einrichtung ist die folgende:

$(document).ready(function() {
    $("#flex1").flexigrid
    (
    {
        url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
        dataType: 'json',
        colModel: [
        { display: '', name: 'view', width: 20, sortable: true, align: 'center' },
        { display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
        { display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
        { display: '', name:'Actions', width:30, sortable: false, align: 'center' }
        ],
        sortname: "Street",
        sortorder: "asc",
        usepager: true,
        title: 'Streets',
        useRp: true,
        rp: 15,
        showTableToggleBtn: false,
        width: 800,
        height: 200
    }
    );
});

aber die folgende Funktion funktioniert nicht:

function ResizeGrid() {
    $('#flex1').flexOptions({ width:1000 }).flexReload();
}

Dadurch wird das Raster aktualisiert, aber mehr nicht.

Answer 1

Obwohl ich 20 Minuten lang KEIN GLÜCK bei Google hatte, bevor ich diesen Beitrag geschrieben habe, führte Murphys Gesetz dazu, dass ich kurz danach eine weitere schnelle Suche startete und die Antwort fand.

Es stellte sich heraus, dass "width" auf "auto" gesetzt werden sollte (die Anführungszeichen sind wichtig).

$("#flex1").flexigrid
(
{
    url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
    dataType: 'json',
    colModel: [
    { display: '', name: 'view', width: 20, sortable: true, align: 'center' },
    { display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
    { display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
    { display: '', name:'Actions', width:30, sortable: false, align: 'center' }
    ],
    sortname: "Street",
    sortorder: "asc",
    usepager: true,
    title: 'Streets',
    useRp: true,
    rp: 15,
    showTableToggleBtn: false,
    width: 'auto',
    height: 200
}
);

Ich hinterlasse diesen Beitrag für alle anderen, die dieses Problem haben.