[eluser]paulopmx[/eluser]
[quote author="wish_bear" date="1207230651"]@@Kevin Kietel
Thanks Dude! Problem Solve..
Quote:* What about the ADD and DELETE BUTTON? Do you know on how to enable them?... hehe..
* And the images of the Add and Delete Button are not displaying.
Im trying to look at the scripts but no luck where and how can I solve them.
Thanks so much again.[/quote]
There actually is no default add and delete function, the add and delete button in Example 3, only shows you how you can add buttons to the Toolbar. You can add any number of buttons you like, and assign a javascript function that you want to call, when the user clicks the button.
for Example 3 the config code for the buttons look like these:
Code:
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
name - tells what the user can see on the buttons
bclass - adds a CSS class to the button, so you can add an image.
onpress - is the API where you can assign a javascript function that will be called when the user clicks the button
so on Example 3, I assigned test as a function, if you viewed the source of the HTML, you will see there is a function there that looks like this:
Code:
function test(com,grid)
{
if (com=='Delete')
{
confirm('Delete ' + $('.trSelected',grid).length + ' items?')
}
else if (com=='Add')
{
alert('Add New Item');
}
}
as you can see, then the user clicks a button, Flexigrid calls the function test, and passes two parameters
com - this is actually the name variable you assign to the button
grid - this is a pointer to the Flexigrid grid object itself
If you are familiar with jQuery, you will understand that when I use this code
Code:
$('.trSelected',grid).length
I was actually trying to get, the rows with the class 'trSelected', but only within the 'grid' object.
Also I added an image to the buttons by adding these on my <style> tag
Code:
.flexigrid div.fbutton .add
{
background: url(css/images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete
{
background: url(css/images/close.png) no-repeat center left;
}
Hope this helps :-)