All About the Vaadin Grid Webinar

hello one in five fans fans fans boys and girls this is a villain from the devalue studios from Finland and today I'm here with the crime master of voting framework at the moment laid all strands hello nice to have you here and today I think we're going to have a really important webinar so our really important stuff where we're able to speak about only the new things pretty much the latest arrivals to the body framework right so what what do we have live what are we going to go through today we're going to go through the grid component that we added in value 7.4 yes so we're going to look at some basically all the basic use cases for how you might want or all the features you might want to use with grid of course you can't cover everything but we'll try to get the most important ones all right definitely so this is this is the thing that all the volume developers should know about the bottom grid exactly yeah so this is this is the right place to be but before we go to details life so this is I think the voting creed was the component that has been waiting for for for the most in all the components in the void in history the grid has been waited for for a long time and by many people have been asking us you know when is it coming out in a why isn't coming up already so what actually why he didn't come earlier yeah so they had actually been like talks about rewriting the table component for like four or five years maybe I don't know least yeah but we actually for real started considering it like two years ago yeah something like that yeah and then we were quite optimistic this shouldn't be too hard right yeah exactly yet let's just feel the best the best great component in the world and it should be peace okay yes okay we can do it in ok maybe not one month but two three maybe four yeah yeah sounds familiar yeah but then actually of course turned out that there are lots of things to to keep track of there so so we where we just accepted that yes this will probably take some time but let's hope it's worthwhile in the end yeah yeah and so I think that's that's something we're realizing that in pretty pretty sure that okay we're actually working on a foundation yeah of a new grid component so that's that's basically will be the basis for for a long time yeah as we introduce new features and keep up with the market I'll then what is actually required yeah we spend spent lots of time just like finding out a good good way of structuring everything so that it should be flexible to be be change changed while still also like having good enough performance on all devices and that kind of stuff so yeah so it's really uh it's really like a foundation to build new stuff upon because there's still lots of ideas for features that we would like to add but that we have not yet had time to implement basically yeah and I think that's a you know when you look at the world includes API there's actually quite a lot of kind of new concepts you know new terminology you know things that are not really you know that familiar from from the from the start for long to involved in and like me for example so there was quite a lot of new things so that's kind of you know proves that there's been some thinking happening yep behind the scenes but anyway I think now it's time to actually dig into the whole thing and start looking what are these new concepts and how you should use dividing great component so this is it's all yours yes so let's say let's see what you have what do you have for us today all right so I have this really starting from from the beginnings here just what you got here into this method we will add more and more features to this grid instance but now we just have like created a new grid and it just looks like this so it's there's nothing there yet so let's get something there really quickly we'll add two columns and then add two rows so for each row within that like one item per column so if we do this go back to the browser and refresh then we have now like color one column two and some date and another oh yeah right so the basic building blocks it just saw some great so yeah just to verify that it's actually agreed we have here yeah but in practice most times not all times but most most times you don't want to do it this way but instead you would want to use about in container so basically a bunch of rows that have predefined properties so here we're using I'm creating a by our own being item container with orders because we work to be like an order management system here right right and then we just set this container implementation as the data source so what happens then is that here we have like lots of lots of data and here we now have just like the properties from the bean item container yeah and just like in whatever order the bean item container defined them which in this case it's not the order we would want but we still have with it still a quite quite good or so to go just from like setting the container and nothing else yeah this is this is just basic modern programming still sauce and same data binding API yes it's exactly the same container an interface that also for instance table uses okay so the next thing we want to do will start by changing the order of these columns so that they are like some kind of logical order actually the way we do this just like put all the property IDs in the right in the order you want them to appear and then if you leave some property IDs out they will remain in the end so if you forget something it's not the end of the world okay for now just with this change actually just three are already refreshed let me now have like first that ID of the order then the customer that it sold that has made the order the product name the amount the disorder and so on yeah okay the next thing we could do because now the like the captures here come down clip from the property names in the data source so this is actually like older about camel cased in the data source and we might want to show some some different names so we will do just a couple of examples here sorry like this so like this order amount is the name of the property we find the column corresponding to that and then we set the hack header caption to just ordered instead and then similar for a couple of other properties so now we have a slightly more compact naming here for for our columns yeah so this is the way to do localization as well right if you want to do yes you can yes that's completely true yeah he yeah of course the data you still need to localize in some other way but close button by a basic representation yes this is this is the way to go actually now just to keep these examples simple I always do like get column for a property ID in most cases what you want to do is that you create that one variable for each column in stuffs because you will do many different things with the same column right so let's go on with another thing quite often you have some stuff for instance if your property comes straight from your database you have some stuff that you don't want to be shown maybe not maybe hide it in some cases maybe never show it because it's just some technical details that that are not needed in the user interface so then you can also remove columns like this so Lobeck like removed custer and customization and priority and order time so now when we refresh we just have all the other columns basically okay okay so so what should I do if I have a case where I have to you know sometimes I need nature so a column and sometimes I don't so systems to what to change it on the fly yeah I'm based on the new that I so what you have to remove actually I got to do what the remove does is that it removes all information about that column from grid it's still honking it's still there in the container okay what grid doesn't know anything about it so there's actually two approaches you can take one is that you can just do grid add column and then give it the property ID from the container then you get a completely new column in stem so it has forgotten anything you have configured for it but in that way you can get it back and then you need to put it on the right place in the order and and do all the configuration again okay then another thing you can do starting with body 7.5 which we are which we are still working on we'll get back to that later that also adds like a way of hiding a column in that case all the configuration is remembered but then all the data is also sent to the client because the idea is that the user can like put it there make it visible if they want to see that data so like if it's sensitive data that some user should not have access to it and that's not the way to go but if you just want to customize like basically keep the information overload in check then then you can use this hiding that we are adding ok ok so basically at the moment if you just remove a column that basically empties the well from inside the grid so it doesn't exist in CI agreed any more yeah grid doesn't know anything about it ok so you have to remember that so if you have some adjustments for the column they'll also removed as well and maybe this use case I mentioned probably the height API from 7.5 this might be even better it depends on the case of course yeah yeah all right ok good but let's go on with the next feature yeah what do we have here yeah so column sizes now all the columns are just like here in this case when this room to spare they are just like all the extra space is added like equal amount to each column which like okay in this case for instance this ID column is visually doesn't look that good it's a bit too wide yeah and also we might want to for instance this product name column slightly wider because you might have some quite long product names because grid only sees what's on the like first page full of data and based on that it sets the columns it can't know what will come from the database later on okay right but actually we first put back these colors because we will need be needing them so here we for instance set like maximum width of the ID column to be 70 pixels yeah so this means that if there is even less or if there's too little space then it will get even smaller up until the width of the contents but then if if we even if there's lots of lots of space it will it will not be wider than 770 columns the 70 pixels and then correspondingly here for both the customer name and the product name we do the opposite we set the minimal width so that it will get at least that amount of space but if there's lots of extra space then it it will be allowed to grow okay you can also if you want to set the exact width so that it never changes actually no we don't have those changes there because that one is not 200 pixels well let's go on yeah I think it might be the customer product should be equal width I must have some silly mistake in my code but anyway once again have like all the columns back and now this ID is limited for instance right next feature we have this is a new one and this is something that many many users have been asking for yeah they want to want that for for the table component yeah it just wasn't feasible to do so we call it frozen columns so the idea is that some of the columns are kept in view all the time even when you scroll sideways so here now I say that like product name column is the last one that is frozen so all columns to the left of the of that one will also be frozen so what happens now is that when I scroll to the side we actually have so that these three columns are always there and then of course crawling in the other direction doesn't change yeah but this is like for giving context because then if I look like Oh which one is this then it's really good to see okay it's that one okay next feature actually if we see look at this data now it's like this is not like three and then a small fraction on top of that but this is actually like 3,800 yeah and then in some countries you want to have a dot to separate thousands and in some countries you want to have a comma and then also like this date is now really the like American way of showing dates with first the month name and then the name of the day or number of name so what we can do is actually change everything related the grid to use German like standards instead so now if i refresh this we see that now we have dot as the thousand separator and and comma here instead for the fractions and then also the time now uses a different format so now we have like date dot month dot year instead so it looks more familiar to me at least yeah because you're almost German only nobody actually use the same same format in Finland as well yeah exactly alright what more let's continue customizing the data or the way the data shown actually the next thing we will do is that we will set a renderer for a column this is something something new this is really new yet so the idea is that for each column you can put a renderer and what the renderer is does is that it gets the data from your database basically from your actually from the container and then the renderer gets just like the data of one cell and then it should choose how that data is actually shown in the browser so here for instance we have a number renderer it takes any number from the data source and then then you give it just a like standard Java number format so this is a decimal format and what this does now is that suddenly we show the order numbers in this kind of way mmm and that's just like one line of code and this ID format is probably something that you use in 15 different places in your application as well because you want to show those IDs in the same way everywhere yeah so it is a renderer always returning a text can it return something else as well it depends on the render so like this number render always shows data as text so it's like it's these four characters but to will just in a while we will see how regular that does something completely - I'm just keen to see all of it yeah it's a quite cool feature so another one this is again kind of the same thing for this complete percentage which is like how many of the ordered units have already been reserved for this order so it's a percentage so let's actually once again a number and/or now we use a built in renderer like one of the Java standard ones a percent incidence so now suddenly we have like percentages all the way here okay but actually we can do even cooler thing for this column so instead of showing a number it will show a visual representation because and now we will show like a progress bar what's the progress of this order so now we see that okay this one is almost done this one is like about 1/5 1/4 maybe and this is the end an example of a renderer that that doesn't show the data as text but instead like use has some custom custom HTML to do it stuff okay okay and what this does it it just gets a number between 0 and 1 if your data is in a different range you might need that a converter will actually see a different converter in action here so for this like this custom is this an order that should be customized because the customer one wants to pay for customization now we just have like to enforce its just buland's common straight from the database you want to do something nicer to it so what I do here is that I have this custom converter which changes the data to be instead of a bool and true/false text it changes is to be a font icon HTML snippet so how this is implemented is here convert the presentation if it's true then we use from the body font icon support the check square oh one write for or icon and then if it's for we use the square or without a check and then just get like HTML for that so if we save and reload this one what we see now is that we actually see the HTML yeah which might not be what you wanted progra not this is of course to avoid accidentally getting HTML new your data because it can really have like security implications and make things ugly if not wanted so we actually want to tell you that okay in this column it's ok to show to interpret the HTML as HTML instead of as plain text so what we do then is that for this same column we set it to use an HTML render instead of the default text renderer right right so now when reloading we have these these icons showing the state instead of just printing out true or false which was the default behavior okay I think true and false is something and all the IT IT people actually understand probably yeah one last thing with customization of how that data is represented we can also change the like styles for specific cells or rows or columns or whatever the way this is done is using a cell style generator is also a roast I'll generate that works in the same way so this is again it's a callback interface whenever a row is about to be sent to the client grid we'll check that should this sell schoolchildren a cell in this row have custom styles right right so what we do here is we see that if the sale in question is in the priority column then we actually like give priority - and then the actual value like the priority this priority is just an atom so it's like high normal low okay so then this will be actually too low okay so this will be like priority low priority normal or priority high okay and then this comes oh that's not what I wanted this comes as CSS style names so you can jet then in your theme yeah define it so that depending on the style name different things are shown and so here I know how so that flow priorities show just just as default normal has bold font and high has bold font and red right now so in that way that's one way on Oh like customizing how the data shown okay so this is basically the way when you want to hook up with CSS styling or ESS styling to the actual data as it is yeah one quite popular thing you can do here is that you can just have different styles or a custom style name that does like right alignment for instance yeah so in this way you can you can just like actually don't need to say that hey this should be right aligned you just said hey this is the priority column and then the one doing the theme for the application can see that okay this is the priority column now let's make the CSS that makes it right aligned if the one doing the team thinks that right alignment is a good thing on a priority column yeah so that way you also like get separation of concerns which is usually a good thing yeah that's a good way to go so what do we have a as the next feature okay let's add some more headers so a table only let you have like one in a row which shows like the name of each column there's quite many use cases where you want to have yeah have more more headers or more footers so what I have here is at first I like add a header row I can either prepend or appended putting it like first or last or then I could also add it at any like specific index if I want to put one into the middle or something tarah prepended so it goes like on top of all the others and then what I do actually show it like this first so here I like okay now we just have a completely empty header here nothing in it let's put some some stuff here so one use case for having multiple headers is that you want to like show that these columns belong together for instance like if you have financial results and one quarter for each column and then you have like on top of those four columns or each four columns you have like the year for instance yeah and then okay here I'm just like on top of these order and reserve I show that okay both of these are quantities and then then that tastes like status of this order right yeah yeah this was pretty pretty loudly asked for yes it was about in table component yep yeah then we can also do the same for footers right now we don't have any footers here we can add a footer and then actually I will show three different things that you can put in there the same also applies to headers okay so the first two the API is identical for every one header yes only like footer row and header row differences because this one difference headers always have one row as the default one okay which is the one for instance where the sorting indicators will show up but otherwise they are identical so yeah what I'll do here is that for that these order and reserved columns I will add up the total amount like some all all these rows okay pretty typical useless yeah so here I just get the number from somewhere and then I just set it set it as text the other thing I can do is that I can set it as HTML so American for instance add formatting to it so here I will show this let's not drag it here I will show show this as like bolded text doesn't make sense here but just for the example yeah and then the last thing I can do in header and footer cells anywhere in grid is that I can add or you can add volume components so here I will add a progress bar component to the header so this what this does it just that it shows the ratio for for like the total yeah so I would say that finally finally I can put components yeah there yeah we have it yes so now we have like basic text HTML and then this like anybody in component 10 awesome you actually said that there have been lots of requirements for components in this yeah surprisingly a lot yeah surprisingly lot four four four four what kind of stuff I think I think the people when when they start then when they start you know customizing the overall look and feel of the data in a table they are already familiar with wiring components and how they actually can start wiring components most people won't want to reuse the that way within a grid like component as well yeah so that's you know really really typical yeah that's quite typical another quite typical thing that we see quite often is that you want to add filtering to your oh yeah the data grid or your definitely I think one of the most the most popular add-ons from the valen directory was for something filtered tell you 50 filtering tables is doing table was the nice it's like top five five in the download chart I think yeah something like that yeah so what you could do then is that's like you append a header row because you usually want to have the filtering but below that the header texts and then for each column you add like one text field or for instance for this priority it's just like three different well you saw a drop-down right and then then you just hook those up so that they modify the filtering of the container yeah yeah but this is something that you usually want to customize exact data is quite much there so we have chose to instead of adding like direct filtering functionality that would be probably quite limited because we can take all use cases into account we just let you put components in there and then you are free to do whatever you want with them yeah so so if you do filtering the best practices like you said take the values from the text fields and just apply ursa filters to the container itself yeah actually I think no there's not an add-on about it yet but I talked with one guy who had made like quite quite generic way that you just say like here's my data and then it tries to figure out how to do everything so that one might actually show up in the directory quite soon I'm sure and so there will be a lot of items coming out for the grid component yeah but can really continue maybe yes definitely thank you the next feature that we have a editing of data in grid there's basically two different ways because for instance this data here is really like something that you might want to edit like change some status or whatever yeah so there's two basic concepts either you want to have it so that when you select a row oh session of five bits you know that when you select a row there's like form for instance like below the grid or on the side or something right or you can edit everything and then press save the other thing you might want have is that it's actually like inside the grid that's actually what we have here so now when i yeah i enabled editing and then i also needed to disable color freezing because those are not yet fully compatible it's something that we should fix but not yet done yet so that that's a small limitation but now when I double-click this row I get here so I can edit like as we go right and save it and then it's like then if your container is hooked up to a database then it would also go to the database right there still like the default behavior here is quite good there's some some nasty stuff one is that these are read-only but we still think that we might be able to edit them so we might want to disable anything for those yeah this automatically gets dropped down but here it's too small that's not anything we can do anything about here unfortunately just need to make I don't need to make the column wider or then just disable editing of this one or something here in this we actually get like as the this is a body component a checkbox and as caption it gets the property ID which here is completely in this case there's no use for it and it also like overflows quite badly yeah so that's what we could disable and also this also once again we automatically get a date popup and it actually uses the German language here as well so it's a them but here it's now the default configuration is to just edit date but not x and that's something that grid can't know what kind of date you have you just see there it's a Java date okay so those those who need to customize here you need to do some yelling of course yeah so the first thing we do is that we set the column and the complete percentage as not edit editable at all then for the customized column we get the column instance once again and from that we can find the editor field that will be used this is just a like normal bahding field component it's created by a field factory you can customize the field factory if you want so that all fields for some specific condition are the same or then you can also put your own field instance there but then we just get the like default instance and just set the caption to be empty yeah okay and then for the last one the order time here we do the opposite we set the editor field to our own order time field component that you create no time yeah so putting all these together refreshing now when editing we have nothing here nothing there so that we know that we're not supposed to edit it then we have no text there in that in this drop-down and then now we have a slightly bigger yeah the date picker that also lets us select minutes and and hours and so on okay right right so when we save this everything works one last thing with or actually second last thing with the editor is that now for instance this field only accepts numbers so what happens if I write some text here press save okay I get a that's validation error that's nice that's good I can customize these if I want but what I was wanted to show it is that by default you can also like empty a field so now we forgot to whose order this was that's not really good so what we can do here is once again to use standard wording field features so we get the field for the customer this is something you might want to do for multiple fields but just show you a third one now and then we set this set it as required and then we also need to set a text to show if if it's empty when you try to save it so now actually if I clear this out and hit save then it will say that customer column and value is require distance error so that's about that one last thing with editing so this all editing here is actually implemented using field group which is the same thing that you use when making like form components for binding data to it yeah that's all that started to actually look familiar inside the field crew yeah so it's actually you can actually get the field group instance and you might want to do some customization one thing that is quite good to do is that you can you can add a like commit event listener to the field group to get get noticed when the user actually saves something of course the container the backing container also gets to know that has new data which you might also on the UI layer want to do something okay so I'll show that next this is a bit of boilerplate unfortunately but not too much so we get the field group instance we add a commit handler to it this commit handler has two phases one pre-commit which is like before after getting the values from the fields but before putting them to the data source and then the other post commit is when data has been sent to the data source as well so what we do here just simple example we just show a notification saying that changes have been saved and cool so now if you just change something and save we get a notification there on the middle of the screen saying that that now something happened yeah so will be some validation related stuff that would be place for the pre commit or what's in typical use case for the pre commit a pre commit is usually for doing more expensive validation because you can still use like standard voting voting field feature to have validator on a separate field but then if you like because those are triggered like immediately when changing something but then if you if you have some more expensive operation that you don't want to trigger just when use a moose for one field to another then you can save that until the save button is clicked okay okay good let's actually all the features we have right now I will also show a couple of new features that you are working and this is also interesting you know always good to see what you guys are working on at the moment so this is yeah good stuff so this is a really simple one it has almost no API but lots of user interface hmm so you can just set column reordering allowed by default it's false but you can enable it if if you want the users to be able to change the order of the columns okay and then obviously what happens is that you can grab a column and then you can drag it to some other location right then this also for instance supports like dragging this one that is inside this quantity group doesn't let you drag it outside up or that group but you can drag the entire group like this nice and then you also get events to the server whenever the order changes so you can do whatever you want to do if you want to do something okay we are also working on column hiding so that you will get a drop down or you can choose that okay now I will to hide this and this and this column or then get them back to be shown again that one is still slightly in progress so I will not show that one mm-hmm but I will actually also show quite big one this has once again required some really core core changes to how grid works yes this is this is this is the big one actually yeah if we call it row details so actually I will I will enable all the code yeah so just so so what you should show what in the US and then we will see how its implemented so there everything is enabled so now what I've done is that when you double-click a row you get expanded like details about that row and this is actually this is avoiding component in here so you can put anything you want there yeah and these are like lazy loaded only created for the roles that you actually expand it for and if I double click it again to hide it then then we like release all member and everything and also even like if I open it scroll it out of view then it also gets cleaned away and then scroll back here again it's recreated so we already have really optimized this one so the thing you can do here is for instance to show additional information that doesn't fit yeah you can also add like buttons for like editing something activating toggling deleting whatever so here just like as an example I haven't really hooked it up but here we have a delete order button and when I click it now I just get a similar notification but still you can then make this do whatever you want yeah exactly and then we can have multiple of these open at the same time if you want and all kind of stuff hmm yeah so but anyways let's show some code a bit yeah well it is it is gonna look like this is a quite complex feature it requires a bit of coding but not too much so actually here we have the like D test generator which is the callback that creates component for a row or then you can return note to say that there's no details for this for okay so it gets a row reference and then from that you can for instance get the item ID and here since I'm using a bean item container I know that the item ID is the same as the actual like being that I'm using so here what I'm doing is that I'm creating this message that you saw this government uses label to a blah blah and add that as I'm able to a layout and then to the layout I also add this really basic button and then just like I said hook bundle this together in a model a playout component configure the layout if I want to and then just return that instance and okay planned off it goes you know that's plain world in programming innocence yeah it's on a layout that will be done yeah the thing is that there are many different use cases for this so we have not made it so that like by default the user can't open these details you need to add some kind of listener for doing it there are basically two different concepts I think one is the one that I implemented by hand that when you double-click a row then it's expanded or collapsed okay that would be my question I would like to do double-clicking on a website so can I do it some other way yes yes basically you have to declare yeah you are in full control oh yeah how it's open so here I have added an item click listener to grid this is a standard grid feature and then what I do is just that I if it's a double click right then I find the item ID that was clicked and then I I basically toggle the visibility status mmm and then also because the editor that one actually by default or is hard-coded to use the double click gesture on desktop devices so I need to disable this one to not get conflicts but also they use the same space so it would be quite confusing to have both in use at the same time yeah true true yeah the other thing I think many users will want to do is to add column for instance leftmost column showing like for instance plus sign yeah and then when you click that plus sign then it changes the minus sign and it expands so then you have like kind of three function with it there okay okay alright so you can actually do well you can do pretty much anything with this approach yes we get there's lots of things you can do with it awesome this is people have been waiting for this but it's coming ten point five seven point one is it coming seven point five we are doing our very very best to have it out in June all right so there's we're actually like now on the last sprint actually adding features after that we will call things down get get everything tested properly and make sure that all the like tutorials and that kind of stuff is in shape for for release then in like one and a half months okay okay pretty close already but this there's a lot of lot of good stuff for the grid as well yep all right so did you have some cool stuff for the 7.5 still that's all I have to show for an awesome awesome that's I think that's good stuff coming for there so that was pretty much the part that we had on the other grid itself so we had some questions coming in for them from people who signed up so we go through the questions quickly okay and see what what are the major ones that people been asking about here so if I see here okay there's actually quite a lot of questions that you already gave answers to people you know for example Tardos is asking about components in headers things like that yes supported then we got a question from Barcelona bout tool tips tool tips yes great so so anything you can share about that oh yeah so tool tips is something that we have not yet added support for we will do it eventually but it's not really like it's not the next one right in the backlog hider but it we know it's missing and we want to do something about it right now you can get almost there for like headers and footers you can you can add for instance instead of just putting it the text as text you can put it as a label component and then add a tool tip the label component and then it will work that way okay so you can actually use the volume tool tips yeah we just play around with components yeah and then for the datum you can actually like add the HTML because there's this this HTML tooltip support it doesn't look exactly exactly as the body to a lip but it's still really lightweight approach for getting tooltips for your data okay okay so that's pretty much the workaround for tooltips yeah for that time thing okay all right but now you know people are asking about yeah I knew previously as well but yeah good to get it confirmed yeah okay all right so and then then actually that's quite a quite a lot of questions for example from Marita concerning you know there's this stuff missing from the grid component that that table actually has yep so what's the best way to actually track the you know the progress of the great there's examples you know like you know the reorder we already go yep collapsing and resize of columns well this collapsing is on the way resizing is also really there's a small small chance we will get it into 7.5 otherwise I'm quite certain we will get it into 7.6 yeah so but I guess we can expect to have little enhancements coming to create will with all voiding big avoiding releases he absolute the whole year for example a student just saw the 7.5 what it actually has this new concept again coming out the road details we are example so a lot of good stuff is coming yeah all the time so be patient creation ok so let's see if there's something else here I think there's actually quite a few good coverage in the talk already for the question we got in and and of course you know don't be offended if I miss one of your important questions please ask them for example dividing forum at the baby nut rate that's that's a good place to get answers after this webinar as well ok this is the one thing that is obvious the three table three table yes yeah so are we gonna have a three grid eventually eventually yeah all right yes so what's the plan on that at the moment what's the what I have thought basically the same kind of functionality as three table although experience has shown that the way you like get data from a database is not really compatible with the way three table expects to get data mmm so I don't know exactly what you want to do but something to make it more easy to hook up like here are key data with a database right and that's something it's like it's among our top things to get done but it's not really the most critical ones so yeah I don't even make any guesses but we are aware of the need and and eventually we will get it there I think okay so instead is there something that you could actually expect from the community as a feedback or input for the actual three create type of of teachers and what are the actual requirements for for those use cases would it help you think it might help yes yeah actually this is when we actually start working on making for instance three table support for grade then I think what would make most sense is at that point I should remember to create a thread in the forum asking for write for like specific use cases mm-hmm yeah okay that's a good one so remember to do that I will guide you guys monitor the Foley I remember to remind me yeah okay I remind you thank you all right all right let's see what else we have here okay then we got the questions about from well Estes Mitchell's inkay well shall he is actually asking do we have an add-on for export exporting crude data to volley spreadsheet so I think this is a it's an interesting use case but I think this is pretty much out of our yeah it was an out of our league yeah I'm afraid there's lots of domain-specific things like how you actually want to convert between formulas and and that kind of stuff so I'm afraid that's something you would have to implement yourself it shouldn't be that complicated I hope blossoms well you both still have data in the basic same form what you still probably want to do some customization yeah yeah so you basically have an it will happen suppose is the way how spread seed yeah you just data so I know maybe even our upon Sukhoi container implementation would be the cool one it could be it could be but there's not anything we have any immediate plans for sorry so here you go you got to do it yourself and if you do that so um please publish an add-on yeah please do okay so then there's actually quite a few questions again about variable row height or variable header height yeah okay so those are kind of two different concepts one is that each data row is the same height that's a limitation or restriction in grid it's actually there to keep things performant because if things if different rows have different heights then it's really complicated to calculate like what's the pixel position of the zero yeah so that's something that we are not 100% sure if we will add we might add it at some point but it's very open then the other thing that many people want to have is that like data rows have one height but then you want to show like some some big like use bigger font or something in the header section yeah and that's something that's supported out of the box you just need to give different CSS styles to those and then then grid will will compensate for that so that's that's already supported okay okay that's good that's good okay let's see what else okay then there's a question about from venkata asking if it's possible to remove the checkbox and multi select mode remove the checkbooks um yes I know you can do it with some really low level hacking basically defining your own client-side selection model but that's quite advanced topic this is something that we have received quite very many requests for so I suspect we will add it at some point but but not today okay okay so no plans yet but you guys are aware of this we are aware of that kind of requirement case some people complained about table that hey I want to have checkboxes there and now we we get checkboxes there and then some others will want to get rid of them instead okay right okay so we'll continue them we got if I pronounced dry right the saamiya is asking about drag and drop and create component so what's the status of drag and drop at the moment that's again the same story yeah something we want to have have right bucket not yet okay unfortunately not not yet there mmm then we got that already okay then there's some legacy from the boring table air or the action handler actual handler yeah so basically context context menu yeah yeah we want to have context menu in grid I have already seen a hack or hack customization integrating the excellent context menu add-on from the directory look into grid so that when you can quite easily get there's just one small issue of not getting right-click events in the right way but that's just a bug that we will fix okay so using that you can get same functionality as for from actual handlers in grid today and then we also want to add like official context menu support but that's again soon ish but not really in the but probably immediate problems you're not going to be identical with the action and no we oppose probably not we might want to do it in in a slightly different way this time okay but still the same context you get events when someone clicks something mmm okay let's see hmm okay now just give me a second dollar look at that and there's actually actually one question coming in to us now so I'll be nervous acts as asking is there any property to drill down the report to another level so come I guess it's basically drill down user experience when showing day Dynacraft so you can click and then go deeper so more I think this is a it's kind of the same as the details wrote us kind of the same that three table this report would do yeah that's at least the only things that come to mind for me right now yeah so I guess this is there's nothing built in out of the box know what this drill drilling type of things but you basically these tools that you just showed that's the way how to mimic probably a mimic the you sketch what you have there okay then this link cada is asking can I use hierarchy hi freaky this is almost impossible it is a tricky of hierarchy hierarchical hierarchical containers in the volume rate so can you use them you can use them but you don't have any you don't get anything for doing it because greener will just use it as a like non hierarchical container today okay so that's what that three table each support that we are about to do and later on we'll do so that actually grid would do something special if it gets a container with weight hierarchy okay let's see if there's something there's quite a lot of big questions let's see if I can pick up something still here okay there's actually Mario is asking about it is possible to do kind of mimic the iPhone create or menus somehow you know weathers for example the address book has the initial letter there and then when you scroll you basically you know that fades away and the next year I'm seeing you know that mimic these kind of things pretty prettier yeah hard yeah I that was actually something that we consider doing at some excuse me consider doing at some point yeah life still has a little blue left so uh yeah consider doing but but it towards again turned out to be so complex so many different things to get taken to amount that time that we left it out so I really don't have any good good answer to that question okay okay alright okay unfortunately not building I said this so that's that has to be a solved some other way yeah maybe entirely costing component even if that's the only thing needed yeah okay I think we are we are running out of time we actually you know went over the time that we actually thought we were going to have for this one so a lot of work a lot lots of questions yeah so if your question wasn't answered during the session please you know put it to the volume forum thread for the webinar and we'll try to be there and monitor one each all the questions so that's the place to discuss this further give feedback give you know any hints or needs that you might have for the Beinecke rib lake is the guy too you know persuade yeah that's right yeah so that's the way to get things to the grid component I'd say yeah otherwise than that thank you life taking good stuff this is something that all bard in programmer should know and now we now we know that I mean I learned quite a lot of things here that's that's always amazing so price mess up yeah I think I also learned something oh cool yeah we all learned yes awesome anyways thank you for watching and I will see you at the next webinar later so now happy coding with the lighting grid bye bye bye

Channel: vaadinofficial

Views: 12,582

Rating: 5 out of 5

Keywords: Vaadin, Webinar, Grid

Id: BEnm9vG6eow

Length: 57min 17sec (3437 seconds)

Published: Tue Apr 07 2015