Asked  7 Months ago    Answers:  5   Viewed   18 times

Can Some one help me, I have a jqgrid and I want to highlight the row if the checkbox is true, thanks!!

enter image description here

this is what i want to make in this project...

function loadjqGrid(jsonGridData){
    var xaxis=1300
    var yaxis = $(document).height();
    yaxis = yaxis-500;
    getGrids();     
    $("#maingrid").jqGrid({
        url:'models/mod.quoservicetypedetails.php?ACTION=view',
        mtype: 'POST',
        datatype: 'xml',
        colNames:getColumnNames(jsonGridData),
        colModel :[ 
            {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true,
            edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}},  
            {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                  
            {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                      
            {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true,
            edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                    
            {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},                  
            {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},  
            {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},     
            {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            //If the GroupHeader is true the row background is yellow
            {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
            {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
        ],
        viewrecords: true,  
        rowNum:20,
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc",
        height: yaxis,
        pager : '#gridpager',
        recordtext: "View {0} - {1} of {2}",
        emptyrecords: "No records to view",
        loadtext: "Loading...",
        pgtext : "Page {0} of {1}",         
        height: yaxis,
        width: xaxis,
        shrinkToFit: false,
        multiselect: true,
        editurl:'models/mod.quoservicetypedetails.php?ACTION=edit'
    }); 
}

How could I do this? Can someone help me?

 Answers

37

I described in the answer one good way how you can implement the highlighting.

Version 4.3.2 of jqGrid has new feature - rowattr callback (see my original suggestion), which was introduced especially for cases like yours. It allows you to highlight some rows of grid during filling of the grid. To have the best performance advantage you should use gridview: true additionally. By the way I recommend you to use gridview: true in all jqGrids.

The usage of rowattr callback is very easy:

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case
        return {"class": "myAltRowClass"};
    }
}

The CSS class myAltRowClass should define background color of highlighted rows.

The corresponding demo you can find here:

enter image description here

Because in your demo you need just highlight and not select the rows I didn't used multiselect: true in my demo. In case of multiselect: true it works exactly in the same way.

At the end of my answer I would like to recommend you to use column templates. The feature will make your code shorter, more readable and easy to maintain. What you need to do is the following:

  • you can include common or the most frequently used settings from column definitions in cmTemplete. In your case it could be
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
  • then you can define some variables which describe common properties which you use frequently in some columns. For example:
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
        editoptions: {value: "1:0"}},
    myTextareaTemplate = {edittype: "textarea",
        editoptions: {size: "30", maxlength: "30"}};
  • after that you can use myCheckboxTemplate and myTextareaTemplate inside of colModel which will reduced in your case to the following
colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
Tuesday, June 1, 2021
 
muncherelli
answered 7 Months ago
30

JXTable can do so via a Highlighter - see swinglabs-demos for an example (MatchingTextHighlighter in the search demo) - there a background highlight is applied by a Painter.

You can do something like that manually somewhere in your renderer. If using a JLabel as renderingComponent, you basically have to find parts of the text that need the background highlight and paint the background for that region (below is a code snippet for finding the areas, c&p from the demos example). Alternatively you might consider using a JTextField as rendering component: the adv is that Highlighter (from javax.swing.text) is built-in, the disadv are the usual issues with text comps as renderers ;-)

/**
 * Finds the rectangles that contain rendered characters that match the
 * pattern.
 * 
 * @param object an optional configuration parameter. This may be null.
 * @param width width of the area to paint.
 * @param height height of the area to paint.
 * @return a <code>List</code> of <code>Rectangle</code>s marking characters
 *         to highlight
 */
protected List<Rectangle> findHighlightAreas(JLabel object, int width,
        int height) {
    String text = object.getText();

    insets = object.getInsets(insets);

    viewR.x = 0 + insets.left;
    viewR.y = 0 + insets.bottom;
    viewR.width = width - insets.right;
    viewR.height = height - insets.top;

    // Reset the text and view rectangle x any y coordinates.
    // These are not set to 0 in SwingUtilities.layoutCompoundLabel
    iconR.x = iconR.y = 0;
    textR.x = textR.y = 0;

    FontMetrics fm = object.getFontMetrics(object.getFont());
    String clippedText = SwingUtilities.layoutCompoundLabel(object, fm,
            text, object.getIcon(), object.getVerticalAlignment(), object
                    .getHorizontalAlignment(), object
                    .getVerticalTextPosition(), object
                    .getHorizontalTextPosition(), viewR, iconR, textR,
            object.getIconTextGap());

    int xOffset = calculateXOffset(object, viewR, textR);

    String textToSearch = clippedText;
    // Check to see if the text will be clipped
    if (!object.getText().equals(clippedText)) {
        // TODO There has to be a better way that assuming ellipses
        // are the last characters of the text
        textToSearch = clippedText.substring(0, clippedText.length() - 3);
    }

    return createHighlightAreas(textToSearch, fm, xOffset, height);
}

/**
 * Creates the rectangles that contain matched characters in the given text.
 * 
 * @param text the text to search
 * @param fm the font metrics of the rendered font
 * @param xOffset the x offset at which text rendering starts
 * @param height the height of painted highlights
 * @return a <code>List</code> of highlight areas to paint
 */
protected List<Rectangle> createHighlightAreas(String text, FontMetrics fm,
        int xOffset, int height) {
    SearchPredicate predicate = (SearchPredicate) getHighlightPredicate();
    Matcher matcher = predicate.getPattern().matcher(text);

    List<Rectangle> highlightAreas = null;
    int startFrom = 0;
    while (startFrom < text.length() && matcher.find(startFrom)) {
        if (highlightAreas == null) {
            highlightAreas = new ArrayList<Rectangle>();
        }

        int start = matcher.start();
        int end = matcher.end();

        if (start == end) {
            // empty matcher will cause infinite loop
            break;
        }

        startFrom = end;

        int highlightx;
        int highlightWidth;

        if (start == 0) {
            // start highlight from the start of the field
            highlightx = textR.x + xOffset;
        } else {
            // Calculate the width of the unhighlighted text to
            // get the start of the highlighted region.
            String strToStart = text.substring(0, start);
            highlightx = textR.x + fm.stringWidth(strToStart) + xOffset;
        }

        // Get the width of the highlighted region
        String highlightText = text.substring(start, end);
        highlightWidth = fm.stringWidth(highlightText);

        highlightAreas.add(new Rectangle(highlightx, 0, highlightWidth,
                height));
    }

    if (highlightAreas == null) {
        highlightAreas = Collections.emptyList();
    } else {
        coalesceHighlightAreas(highlightAreas);
    }
    return highlightAreas;
}

/**
 * Joins highlight rectangles that mark adjacent horizontal areas into
 * single rectangles. This is useful to renderers that vary horizontally,
 * such a horizontal gradient - the gradient will not restart when there are
 * two adjacent highlight areas.
 * 
 * @param highlightAreas a <code>List</code> of <code>Rectangle</code>s.
 */
protected void coalesceHighlightAreas(List<Rectangle> highlightAreas) {
    Collections.sort(highlightAreas, X_AXIS_RECTANGLE_COMPARATOR);

    int i = 0;
    while (i < highlightAreas.size() - 1) {
        Rectangle r1 = highlightAreas.get(i);
        Rectangle r2 = highlightAreas.get(i + 1);

        if (r1.x + r1.width == r2.x) {
            r1.width += r2.width;
            highlightAreas.remove(i + 1);
        } else {
            i++;
        }
    }
}

/**
 * Calculates the x offset of highlights based on component orientation and
 * text direction.
 * 
 * @param component the renderer component
 * @param viewR the view rectangle of the renderer component
 * @param textR the text rectangle of the renderer component
 * @return the number of pixels to offset the highlight from the left edge
 *         of the component
 */
protected int calculateXOffset(JLabel component, Rectangle viewR,
        Rectangle textR) {
    int horizAlignment = component.getHorizontalAlignment();
    boolean leftToRight = component.getComponentOrientation()
            .isLeftToRight();

    if (horizAlignment == SwingConstants.LEFT
            || (horizAlignment == SwingConstants.LEADING && leftToRight)
            || (horizAlignment == SwingConstants.TRAILING && !leftToRight)) {
        return 0;
    } else if (horizAlignment == SwingConstants.RIGHT
            || (horizAlignment == SwingConstants.TRAILING && !leftToRight)
            || (horizAlignment == SwingConstants.LEADING && leftToRight)) {
        return viewR.width - textR.width;
    } else if (horizAlignment == SwingConstants.CENTER) {
        return (viewR.width - textR.width) / 2;
    }
    throw new AssertionError("Unknown horizonal alignment "
            + horizAlignment);
}
Wednesday, June 2, 2021
 
Stefan
answered 6 Months ago
54

First of all you don't need to use edittype : 'custom' to be able to use jQuery UI Autocomplete. Instead of that you can use just dataInit.

You can define myAutocomplete function for example like

function myAutocomplete(elem, url) {
    setTimeout(function () {
        $(elem).autocomplete({
            source: url,
            minLength: 2,
            select: function (event, ui) {
                $(elem).val(ui.item.value);
                $(elem).trigger('change');
            }
        });
    }, 50);
}

and then use

{ name:'COD_OBJ_EST', hidden: true, editable: true,
    editoptions: {
        dataInit: function (elem) {
            myAutocomplete(elem, "autocomplete.php?id=estrategico");
        }
    }}

Be careful that the name of parameter which will be send to the server is the standard name term instead of the name q which you currently use. I personally don't see any need to change the default name of the parameter.

Friday, August 6, 2021
 
ANIS BOULILA
answered 4 Months ago
46

I suppose that you use cell editing. In the case the afterSaveCell callback is really good place to update the calculated column amount based on the current values from the columns quantity and price. The corresponding code could be about the following

afterSaveCell: function (rowid, cellname, value) {
    var quantity, price, $this;
    if (cellname === 'quantity' || cellname === 'price') {
        $this = $(this);
        quantity = parseFloat($this.jqGrid("getCell", rowid, 'quantity'));
        price = parseFloat($this.jqGrid("getCell", rowid, 'price'));
        $this.jqGrid("setCell", rowid, 'amount', quantity * price);
    }
}

The demo do almost the same, but calculate 'total' as the sum of 'amount' and 'tax'. For the test you should modify the value from 'amount' or 'tax' column and verify that 'total' will be recalculated.

Thursday, August 12, 2021
 
Timur Mustafaev
answered 4 Months ago
85

Try this adapter code:

public class CustomAdapter0 extends BaseAdapter {
public CustomAdapter0(String listname, String[] tricks, Context context) {
    this.tricks = tricks;
    this.context = context;
    isClicked = new boolean[tricks.length];
    for(int i = 0; i < isClicked.length; i++) isClicked[i] = false;
    this.listname = listname;
}

private String[] tricks;
private Context context;
private boolean[] isClicked;
private LayoutInflater layoutInflater;
private String listname;

@Override
public int getCount() {
    return tricks.length;
}

@Override
public Object getItem(int i) {
    return tricks[i];
}

@Override
public long getItemId(int i) {
    return i;
}

@Override
public View getView(final int i, View convertView, ViewGroup viewGroup) {

    View row = convertView;
    if(convertView == null){
        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        row = layoutInflater.inflate(R.layout.custom_listview_tricks, null);
    }
    TextView textView = row.findViewById(R.id.name_xml);
    ImageButton imageButton = row.findViewById(R.id.unmastered_xml);

    textView.setText(tricks[i]);
    if (isClicked[i]) imageButton.setBackgroundResource(R.drawable.mastered);
    else imageButton.setBackgroundResource(R.drawable.unmastered);

    imageButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ImageButton clickedView = (ImageButton) view;
            int clickedPosition = (int)clickedView.getTag();
            isClicked[clickedPosition] = !isClicked[clickedPosition];
            notifyDataSetChanged();

            storeArray();
        }
    });
    imageButton.setTag(i);
    return row;
}

public boolean storeArray() {
    SharedPreferences prefs = context.getSharedPreferences(listname, Context.MODE_PRIVATE);
    SharedPreferences.Editor editor = prefs.edit();
    for(int i = 0; i < tricks.length; i++)
        editor.putBoolean(tricks[i], isClicked[i]);
    return editor.commit();
}

public void loadArray() {
    SharedPreferences prefs = context.getSharedPreferences(listname, Context.MODE_PRIVATE);
    for(int i = 0; i < tricks.length; i++)
        isClicked[i] = prefs.getBoolean(tricks[i], false);
}
}

In Activity, changes those if-statements for initialize the adapter like:

       if (codigo == 0){
        CustomAdapter0 customAdapter0 = new CustomAdapter0("lower", lower, TricksActivity.this);
        listView.setAdapter(customAdapter0);
        customAdapter0.loadArray();

    }if (codigo == 1){

        CustomAdapter0 customAdapter0 = new CustomAdapter0("upper", upper, TricksActivity.this);
        listView.setAdapter(customAdapter0);
        customAdapter0.loadArray();

    }if (codigo == 2){

        CustomAdapter0 customAdapter0 = new CustomAdapter0("sitDown", sitDown, TricksActivity.this);
        listView.setAdapter(customAdapter0);
        customAdapter0.loadArray();

    }if (codigo == 3){

        CustomAdapter0 customAdapter0 = new CustomAdapter0("combosFamosos", combosFamosos, TricksActivity.this);
        listView.setAdapter(customAdapter0);
        customAdapter0.loadArray();
    }

Hope that helps!

Wednesday, September 1, 2021
 
Jeremy
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share