dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to define the custom UriCell in backgrid

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    4

    How to define the custom UriCell in backgrid

    Hi there,
    In the backgrid the href and title has the same formatvalue. Is there anyway that I can overwritten the UriCell's render so I can have different href.
    Thanks
    Karen

  2. #2
    Join Date
    Feb 2014
    Location
    Ahmadabad, Gujarat, India
    Posts
    91
    Hello friend, as per your query i searched and get this answer, hope this will help you with your problem;

    Configuring Cells
    While many built-in cells provide reasonable defaults, you may choose to configure them to suit your own needs.
    Cell types that you are most likely to configure are the NumberCell, DatetimeCell and SelectCell classes. Once configured, you may use them as the cell attribute values in column definitions.
    var grid = new Backgrid.Grid({
    columns: [{
    name: "id",
    label: "ID",
    editable: false,
    // Dynamically defines a new cell type with new defaults.
    // ID is displayed as an integer without ','s.
    cell: Backgrid.IntegerCell.extend({
    orderSeparator: ''
    })
    }, {
    name: "lastaccessed",
    label: "Last Login Time",
    editable: false,
    cell: Backgrid.DatetimeCell.extend({
    includeMilli: true
    })
    }, {
    name: "gender",
    label: "Gender",
    cell: Backgrid.SelectCell.extend({
    // It's possible to render an option group or use a
    // function to provide option values too.
    optionValues: [["Male", "m"], ["Female", "f"]]
    })
    }],
    collection: col
    });

    Pro Tip
    SelectCell treats all option values as strings by default, if you need to persist a different type of values into your model, you should extend SelectCell to provide your own formatter.
    See the JSDoc for the various Cell classes for details on what you can configure using this method.
    Custom Cell
    If the built-in and extension cell classes are not enough for you, you may choose to create your own cell class and supply it to a column definition.
    If your custom cell will still use a <input type="text" /> like the predefined ones for editing, you may choose to subclass Cell or one of the predefined classes and simply define a className and a formatter. In fact, most of the core cell classes are done this way.
    // This is how StringCell is defined.
    Backgrid.StringCell = Backgrid.Cell.extend({
    // Cell default class names are the lower-cased and dasherized
    // form of the the cell class names by convention.
    className: "string-cell"
    formatter: Backgrid.StringFormatter
    });

    If your cell class will render differently in display mode, you may simply override Cell#render() in your subclass.
    Custom CellEditor

    Advanced Usage


    Some cell types, like the TextCell extension, may only make sense if the editor is rendered in a modal dialog or a form element in a different part of the page. In that case the default InputCellEditor, which renders a <input type="text" />, will not be suitable and a new CellEditor must be defined.

    A custom cell editor should subclass CellEditor as it defines a number of required parameters in its initializer and clean up operations that are necessary for most cell editors. When a cell class enters edit mode, a new editor instance is constructed by given it the required parameters, and then a Backbone event backgrid:edit is fired from the cell instance itself. A custom cell class can act on this event to do anything before the cell editor is rendered.

    Once the cell has entered edit mode, a Backbone event backgrid:editing is fired. A custom cell class can then act on it to do anything after the cell editor has been rendered, e.g. placing the focus inside the editor.

    During editing, if an error is encountered (see the formatter protocol below), a cell editor should fire a Backbone event backgrid:error so that listeners—usually a cell instance—can respond appropriately. When editing is done, a cell editor should fire a Backbone backgrid:edited event. A cell should be listening to this event so it can remove its editor and re-render itsef in display mode.

    Truely Advanced Hacking

    At the most basic level, Cells and CellEditors are simply Backbone.View classes that are guaranteed to be given a number of parameters when constructed by Row. You can use any Backbone.View as your Cell and CellEditor.

    Please reply if you found this useful and even if not. Best of Luck

  3. #3
    Join Date
    Mar 2011
    Posts
    4
    Thanks for detail info about custom the Backgrid's cell

    As you have said "If your cell class will render differently in display mode, you may simply override Cell#render() in your subclass."
    Where I should add this Cell#render(). Should I have this Cell#render in model or in the view.
    Still have several issues about this override Cell#render().
    Thanks
    K


    Quote Originally Posted by softqubetechno View Post
    Hello friend, as per your query i searched and get this answer, hope this will help you with your problem;

    Configuring Cells
    While many built-in cells provide reasonable defaults, you may choose to configure them to suit your own needs.
    Cell types that you are most likely to configure are the NumberCell, DatetimeCell and SelectCell classes. Once configured, you may use them as the cell attribute values in column definitions.
    var grid = new Backgrid.Grid({
    columns: [{
    name: "id",
    label: "ID",
    editable: false,
    // Dynamically defines a new cell type with new defaults.
    // ID is displayed as an integer without ','s.
    cell: Backgrid.IntegerCell.extend({
    orderSeparator: ''
    })
    }, {
    name: "lastaccessed",
    label: "Last Login Time",
    editable: false,
    cell: Backgrid.DatetimeCell.extend({
    includeMilli: true
    })
    }, {
    name: "gender",
    label: "Gender",
    cell: Backgrid.SelectCell.extend({
    // It's possible to render an option group or use a
    // function to provide option values too.
    optionValues: [["Male", "m"], ["Female", "f"]]
    })
    }],
    collection: col
    });

    Pro Tip
    SelectCell treats all option values as strings by default, if you need to persist a different type of values into your model, you should extend SelectCell to provide your own formatter.
    See the JSDoc for the various Cell classes for details on what you can configure using this method.
    Custom Cell
    If the built-in and extension cell classes are not enough for you, you may choose to create your own cell class and supply it to a column definition.
    If your custom cell will still use a <input type="text" /> like the predefined ones for editing, you may choose to subclass Cell or one of the predefined classes and simply define a className and a formatter. In fact, most of the core cell classes are done this way.
    // This is how StringCell is defined.
    Backgrid.StringCell = Backgrid.Cell.extend({
    // Cell default class names are the lower-cased and dasherized
    // form of the the cell class names by convention.
    className: "string-cell"
    formatter: Backgrid.StringFormatter
    });

    If your cell class will render differently in display mode, you may simply override Cell#render() in your subclass.
    Custom CellEditor

    Advanced Usage


    Some cell types, like the TextCell extension, may only make sense if the editor is rendered in a modal dialog or a form element in a different part of the page. In that case the default InputCellEditor, which renders a <input type="text" />, will not be suitable and a new CellEditor must be defined.

    A custom cell editor should subclass CellEditor as it defines a number of required parameters in its initializer and clean up operations that are necessary for most cell editors. When a cell class enters edit mode, a new editor instance is constructed by given it the required parameters, and then a Backbone event backgrid:edit is fired from the cell instance itself. A custom cell class can act on this event to do anything before the cell editor is rendered.

    Once the cell has entered edit mode, a Backbone event backgrid:editing is fired. A custom cell class can then act on it to do anything after the cell editor has been rendered, e.g. placing the focus inside the editor.


    During editing, if an error is encountered (see the formatter protocol below), a cell editor should fire a Backbone event backgrid:error so that listeners—usually a cell instance—can respond appropriately. When editing is done, a cell editor should fire a Backbone backgrid:edited event. A cell should be listening to this event so it can remove its editor and re-render itsef in display mode.

    Truely Advanced Hacking

    At the most basic level, Cells and CellEditors are simply Backbone.View classes that are guaranteed to be given a number of parameters when constructed by Row. You can use any Backbone.View as your Cell and CellEditor.

    Please reply if you found this useful and even if not. Best of Luck

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles