[Kss-devel] KSS: Inline editing on multiple rows of data

[Brian Gershon]

Hi Jeroen,

I finally posted a blog entry about applying KSS to the task of  
editing multiple rows of data:

<http://www.evolvingbits.com/2008/04/25/inline-editing-of-multi-row-data-in-plone-with-kss/ 
 >

Let me know if you have recommendations or suggestions.

Thanks,
-Bri

On Mar 4, 2008, at 3:15 PM, Jeroen Vloothuis wrote:

> Brian Gershon wrote:
>> When I click, the forms open up for ALL rows.  Each row has a  
>> field  like this, and by default <div class="editform"> is hidden   
>> via .hiddenform style:
>>
>> <div class="action-due-section">
>>    <span class="action-due label">2008/02/25</span>
>>    <div class="editform">
>>       <input class="dueDateField" value="2008/02/25"/>
>>       <input class="change" type="button" value="change"/>
>>       <input class="cancel" type="button" value="cancel"/>
>>    </div>
>> </div>
>>
> You could do something like:
>
>
> /* show edit form when label clicked */
> div.action-due-section span.label:click {
> evt-click-preventdefault: true;
> action-client: toggleClass;
> toggleClass-kssSelector: parentnode("div.editform");
> toggleClass-value: hiddenform;
> }
>
>
> Then you should make your CSS something like:
>
> .hiddenform .editform {
> display: none;
> }
>
>
> The trick here is that you are actually toggling the class name on  
> the outer div but you let the CSS rule apply through that. So after  
> (and you probably want to have this a page load time as well)  
> toggling the HTML would become:
>
> <div class="action-due-section hiddenform">
>   <span class="action-due label">2008/02/25</span>
>   <div class="editform">
> ...
> Now if you look at the CSS snippet above you can see how it first  
> selects .hiddenform and than any node below with the editform class  
> name.