How to add attributes in flexigrid buttons?

Question

I am working with a project where I have to use Flexigrid.js; But I get lots of things are missing in the plug in. Like I want to disable some buttons whose I don't want to enable at initially. So, I couldn't do that.

So, I update the flexigrid.js and make that for everyone.

Hope this will help.

Thank you

Answer 1

If we want to add extra attributes like title, disable etc how to do this?

Answer: I have updated my flexigrid.js for doing that. I have changed the previous js and replaced fbutton div>span into input tag.

Change the following code

           btnDiv.innerHTML = ("<div><span>") + (btn.hidename ? "&nbsp;" : btn.name) + ("</span></div>");
            if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
                paddingLeft: 20
            });
            if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
                $('span',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
                $('span',btnDiv).css( 'paddingLeft', 20 );

            if (btn.tooltip) // add title if exists (RS)
                $('span',btnDiv)[0].title = btn.tooltip;

with

    btnDiv.innerHTML = ("<input type='button' value='"+ (btn.hidename ? "&nbsp;" : btn.name)+"' name='"+ (btn.hidename ? "&nbsp;" : btn.name)+"'/>") ;
            if (btn.bclass) $('input', btnDiv).addClass(btn.bclass).css({
                paddingLeft: 20
            });
            if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
                $('input',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
            $('span',btnDiv).css( 'paddingLeft', 20 );

            if (btn.tooltip) // add title if exists (RS)
                $('input',btnDiv)[0].title = btn.tooltip;

Then, check whether attribute property is exists or not and set the attributes

//checking attribute property is available or not
//Start
  if (btn.attribute) {   
    var attributes = btn.attribute; //getting the attributes 
    for(var key in attributes){
        if(key!="style" && key!="disable")  
            $('input',btnDiv).attr(key,attributes[key]);
        else if(key=="disable" && attributes[key]){
            $('input',btnDiv).attr("disabled","disable");
        }
        else if(key=="style"){ //getting style value in css
            for(var style in attributes[key]){
                $('input',btnDiv).css(style,attributes[key][style]);
            }
        }
    }     
}
//End

Now change the CSS for input.

.flexigrid div.fbutton input
    {
        float: left;
        display: block;
        padding: 3px;
        border : none;
    }

Work done. Now set your attribute property in the buttons.

Example :

buttons : [
                {name: 'Add', bclass: 'add', onpress : test, attribute: {title:"add",disable:true,style:{'border':'1px solid black;'}}}
                ],

Reply me if any bug is found.

Thank you