You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Nick Pratt <nb...@gmail.com> on 2012/11/27 03:53:02 UTC
Adding Components to fit markup
If I create an empty element (a <div>) in HTML (via jQuery), and assign it
an ID, is it possible to
create a Wicket Panel (via an Ajax callback) to replace that element?
N
Re: Adding Components to fit markup
Posted by Sebastien <se...@gmail.com>.
Hi all,
I also started integrating the Kendo UI's datagrid widget (which is a
DataTable actually), you have a prime sample here:
http://www.7thweb.net/wicket-jquery-ui/kendo/datatable/DefaultDataTablePage
It is using a IDataProvider to load data.
Column's-buttons are also handled, but the corresponding sample is not yet
deployed. (probably tonight or tomorrow)
Bojidar, you can have a look at the code if you need some inspiration:
https://github.com/sebfz1/wicket-jquery-ui/tree/master/wicket-kendo-ui/src/main/java/com/googlecode/wicket/jquery/ui/kendo/datatable
Best regards,
Sebastien.
On Mon, Jun 24, 2013 at 1:42 PM, bojidar <dc...@gmail.com> wrote:
> Ok, I see, good luck with that development. Can you give me something
> like a
> rule of thumb on how I should proceed with such JS/Wicket integration
> challenges. The part that I don't understand clearly is how to synchronize
> the state between the two systems. If I use Datatables functions to
> manipulate the table , this will create or delete some markup , my
> questions
> is how to notify wicket about such changes , in order it synchronize model
> or replace components ? The reverse scenario where Wicket initiates changes
> in model is also interesting to me , but for now my goal is to make
> Datatables the initiator of any action, so this scenario is not so
> important
> for now (I guess a little bit of magic JS/JQuery code in the response will
> do the trick).
> These relates to the problem I described in the other thread.
> I used only standard, widely used components till now and this is a little
> bit of challenge.
>
>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Adding-Components-to-fit-markup-tp4654246p4659729.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Adding Components to fit markup
Posted by bojidar <dc...@gmail.com>.
Ok, I see, good luck with that development. Can you give me something like a
rule of thumb on how I should proceed with such JS/Wicket integration
challenges. The part that I don't understand clearly is how to synchronize
the state between the two systems. If I use Datatables functions to
manipulate the table , this will create or delete some markup , my questions
is how to notify wicket about such changes , in order it synchronize model
or replace components ? The reverse scenario where Wicket initiates changes
in model is also interesting to me , but for now my goal is to make
Datatables the initiator of any action, so this scenario is not so important
for now (I guess a little bit of magic JS/JQuery code in the response will
do the trick).
These relates to the problem I described in the other thread.
I used only standard, widely used components till now and this is a little
bit of challenge.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Adding-Components-to-fit-markup-tp4654246p4659729.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Adding Components to fit markup
Posted by Martin Grigorov <mg...@apache.org>.
Hi Bojidar,
I plan to make an integration of some good JS table widget for
https://github.com/l0rdn1kk0n/wicket-bootstrap.
For now I have bookmarked http://wootapa-watable.appspot.com/ but I see
that Datatables also provide some kind of integration with TB (
http://www.datatables.net/blog/Twitter_Bootstrap_2), so I'll take it into
account when I start on this.
But for now I cannot help you much. I have no experience with Datatables at
all.
On Mon, Jun 24, 2013 at 1:26 PM, bojidar <dc...@gmail.com> wrote:
> Hi Martin,
> Can you give me some guidelines how to make better integration between
> JQuery Datatables and Wicket ?
>
> You can see that in another thread
> <
> http://apache-wicket.1842946.n4.nabble.com/Model-changes-are-not-saved-when-component-markup-is-externally-removed-from-DOM-td4659725.html
> >
> I used your approach about the Details Panel and further developed your
> quickstart project, but I'm facing some problem with it.
> I want to make more comprehensive integration between my Wicket components
> and Datatables events, because now on every model change (adding a row or
> deleting a row in the table) - the Datatable is destroyed and
> re-initialized. I'll much like to implement adding of single row , deleting
> it, editing it and all that while keeping table state (sorting,
> expanded/collapsed rows).
>
> Regards,
> Bojidar
>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Adding-Components-to-fit-markup-tp4654246p4659726.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Adding Components to fit markup
Posted by bojidar <dc...@gmail.com>.
Hi Martin,
Can you give me some guidelines how to make better integration between
JQuery Datatables and Wicket ?
You can see that in another thread
<http://apache-wicket.1842946.n4.nabble.com/Model-changes-are-not-saved-when-component-markup-is-externally-removed-from-DOM-td4659725.html>
I used your approach about the Details Panel and further developed your
quickstart project, but I'm facing some problem with it.
I want to make more comprehensive integration between my Wicket components
and Datatables events, because now on every model change (adding a row or
deleting a row in the table) - the Datatable is destroyed and
re-initialized. I'll much like to implement adding of single row , deleting
it, editing it and all that while keeping table state (sorting,
expanded/collapsed rows).
Regards,
Bojidar
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Adding-Components-to-fit-markup-tp4654246p4659726.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Adding Components to fit markup
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
Here is your project with some modifications that return the markup of
DetailsPanel like:
<?xml version="1.0" encoding="UTF-8"?><ajax-response><component id=
"id78_details" ><![CDATA[<div wicket:id="details" id="id78_details"><
wicket:panel>
<span wicket:id="label">This is the label for ID: details</span>
</wicket:panel></div>]]></component></ajax-response>
wicket-ajax.js will use the markup to replace the old (the placeholder)
element with id id78_details.
I think you can continue from here.
On Tue, Nov 27, 2012 at 3:51 PM, Nick Pratt <nb...@gmail.com> wrote:
> I created a Quickstart with what Im trying to do - this may not be the best
> way, and my approach might be way off the mark:
>
> https://dl.dropbox.com/u/107816727/quickstart.tar.gz
>
> A couple of points:
>
> 1. I'd really like to use Datatables JS lib - it works well on all the
> platforms Ive tested in on
> 2. When applying a Datatable() on top of an existing <table>, the table
> cannot contain any <td> elements with colspan attributes - it breaks
> Datatables. This is why I'm using the fnOpen and fnClose functions of
> Datatables, and invoking a callback.
>
> There maybe a simpler/better way than Ive coded up here - Im open to
> suggestions.
>
> The end result of this will be a reusable Component that leverages
> Datatables to provide client side filtering, pagination and sorting, with
> dynamically loaded expandable Panels (obtained through an interface
> callback on the server side). Ive achieved similar functionality in the
> past by using a Repeater that repeated 2x <tr>, with the second <tr> being
> an EmptyPanel until the user clicked an AjaxLink, then I did a
> addOrReplace( new DetailsPanel() ) on the server side, rerendering the
> repeated group. In this scenario, the second <tr> was structured as:
> <tr><td colspan="n"><div wicket:id="foo"></div></td></tr>. However, that
> colspan breaks Datatables - see #2 above.
>
> N
>
>
> On Tue, Nov 27, 2012 at 2:40 AM, Martin Grigorov <mgrigorov@apache.org
> >wrote:
>
> > Hi,
> >
> > Since the markup is added dynamically it looks like
> > MarkupContainer#autoAdd() is the best match.
> > You'll need to create the MarkupStream yourself.
> >
> >
> > On Tue, Nov 27, 2012 at 3:53 AM, Nick Pratt <nb...@gmail.com> wrote:
> >
> > > If I create an empty element (a <div>) in HTML (via jQuery), and assign
> > it
> > > an ID, is it possible to
> > > create a Wicket Panel (via an Ajax callback) to replace that element?
> > >
> > >
> > > N
> > >
> >
> >
> >
> > --
> > Martin Grigorov
> > jWeekend
> > Training, Consulting, Development
> > http://jWeekend.com <http://jweekend.com/>
> >
>
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com <http://jweekend.com/>
Re: Adding Components to fit markup
Posted by Nick Pratt <nb...@gmail.com>.
I created a Quickstart with what Im trying to do - this may not be the best
way, and my approach might be way off the mark:
https://dl.dropbox.com/u/107816727/quickstart.tar.gz
A couple of points:
1. I'd really like to use Datatables JS lib - it works well on all the
platforms Ive tested in on
2. When applying a Datatable() on top of an existing <table>, the table
cannot contain any <td> elements with colspan attributes - it breaks
Datatables. This is why I'm using the fnOpen and fnClose functions of
Datatables, and invoking a callback.
There maybe a simpler/better way than Ive coded up here - Im open to
suggestions.
The end result of this will be a reusable Component that leverages
Datatables to provide client side filtering, pagination and sorting, with
dynamically loaded expandable Panels (obtained through an interface
callback on the server side). Ive achieved similar functionality in the
past by using a Repeater that repeated 2x <tr>, with the second <tr> being
an EmptyPanel until the user clicked an AjaxLink, then I did a
addOrReplace( new DetailsPanel() ) on the server side, rerendering the
repeated group. In this scenario, the second <tr> was structured as:
<tr><td colspan="n"><div wicket:id="foo"></div></td></tr>. However, that
colspan breaks Datatables - see #2 above.
N
On Tue, Nov 27, 2012 at 2:40 AM, Martin Grigorov <mg...@apache.org>wrote:
> Hi,
>
> Since the markup is added dynamically it looks like
> MarkupContainer#autoAdd() is the best match.
> You'll need to create the MarkupStream yourself.
>
>
> On Tue, Nov 27, 2012 at 3:53 AM, Nick Pratt <nb...@gmail.com> wrote:
>
> > If I create an empty element (a <div>) in HTML (via jQuery), and assign
> it
> > an ID, is it possible to
> > create a Wicket Panel (via an Ajax callback) to replace that element?
> >
> >
> > N
> >
>
>
>
> --
> Martin Grigorov
> jWeekend
> Training, Consulting, Development
> http://jWeekend.com <http://jweekend.com/>
>
Re: Adding Components to fit markup
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
Since the markup is added dynamically it looks like
MarkupContainer#autoAdd() is the best match.
You'll need to create the MarkupStream yourself.
On Tue, Nov 27, 2012 at 3:53 AM, Nick Pratt <nb...@gmail.com> wrote:
> If I create an empty element (a <div>) in HTML (via jQuery), and assign it
> an ID, is it possible to
> create a Wicket Panel (via an Ajax callback) to replace that element?
>
>
> N
>
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com <http://jweekend.com/>