I'm trying to create a web based app in which the user can edit some information displayed in a grid. I have followed Tom Dykstra's excellent tutorial on MVC with EF6. That presents rows of data, (but not in an editable grid), each row has an 'Edit' button at the end that takes the user away to a separate page/form with edit controls for that row item. My customer wants a grid instead because they like Excel. I settled on SlickGrid to add the grid component so the data could be edited in-place. I'm okayish at C#, and have been getting on fine with that, but I really have very little Javascript experience. (I'm halfway through a course right now). The screen shot shows what I've got so far, I've displayed a grid with some data. However, the header row is not big enough to contain the titles. How do I make this bigger? I've found one way, but it seems to involve changing a hardcoded default in the slick-grid .css, (or overriding it in my own .css). That seems wrong to me, (especially if I later want several grids in my app). I'd rather (expect to) find a call I could make in the .js to change the grid header row height. Is there one? Thanks!
问题:
回答1:
A quick note: in the API HeaderRow
is the extra general-use row for filters etc and Header
is the actual header.
To answer the question, there is no code based way to do this. Perhaps this should be added, but that's another issue!
You can get the header parent element using grid.getHeader()
and use jQuery to tweak the height, or to customise each grid on the page, you could assign a class to each grid and then incorporate that into your CSS.
Each grid is also labelled with a class name incorporating the grid's unique id, eg. slickgrid_501666
. The id can be retrieved with grid.getUID()
, but changing the CSS would have to be done in code because the UID is randomly assigned when the grid is initialised.
The approach I use is simply to modify the header height using CSS as you have done. I generally try for a consistent grid look and feel across my application.