Binding to Functions

Posted by: marcus.nixon on 10 May 2019, 2:06 am EST

  • Posted 10 May 2019, 2:06 am EST

    Hi,

    Is there any way to bind to a function, so that the function’s return value is shown? Currently it’ll just show the function definition in the cell. I was hoping there was some kind of event that I could hook into which would allow me to supply the grid with the data, thus allowing me to call the function and supply that to the grid. I realise that there’s an itemFormatter event, but that doesnt really do what I want - I added code to extract the value from the function and set the innerHTML, but that means all formatting that the grid used to apply is lost (checkboxes are now shown as “true” or “false”, and currencies just show the actual number. I remember back in my VB 3 days I used a grid control that had an “unbound” mode, where an event would fire for each cell. Kind of what something like that I guess. Obviously I could just create a brand new object with all the properties set using the source object, but I wanted to avoid that.

  • Posted 10 May 2019, 2:07 am EST

    I should just add, I’m talking about FlexGrid.

  • Posted 10 May 2019, 3:28 am EST

    Hi Marcus

    VB3? Wow, I thought I was the only one who still remembered that :wink:

    Actually, the FlexGrid can be used in unbound mode. You can add as many rows and columns as you need, then use the grid’s getCellData and setCellData methods to populate the cells.

    But we don’t recommend that method since in most cases binding gives you much more power and flexibility. This fiddle shows an example that I hope will be helpful:

    https://jsfiddle.net/Wijmo5/nv02h6tr/

    It uses the formatItem event to customize the content of cells in the “sample” column. It gets the data item, reads its “color” value, and then generates the HTML to show in the cell.

    This is not the only way to do this. JavaScript allows you to define classes with properties that have getter and setter methods. You can bind the grid to these objects, and it will display the result of your getter function which can be as complex as you like.

    I hope this clarifies things a little.

    If you need more specific/detailed examples, please let us know.

  • Posted 14 May 2019, 2:49 am EST

    Thanks for that mate. Yeah, I knew about the itemFormatter as i’ve been using that already. I will investigate the Javascript getter/setting properties that you mentioned, as that sounds interesting. Cheers.

  • Posted 15 May 2019, 8:44 am EST

    Bernardo, so i’ve had a quick go with using the itemFormatter to show the value of the contents of a function (in this case it’s a Knockout Observable). That works, but I want to be able to edit that number and have it write that number back to the observable. I’ve added code to the CellEditEnding event, which gets fired, but what appears to be happening is that it’s overwriting the property with the actual number entered, thus losing the function definition. I was hoping that in the CellEditEnding i could just update the observable’s value. What am i doing wrong?

  • Posted 15 May 2019, 4:10 pm EST

    Hi Marcus,

    You may cancel the cellEditEnding event and update the value manually as you want.

    Please refer to the following code snippet for reference:

    grid.cellEditEnding.addHandler(function(s,e){
        e.cancel=true;
       var newValue = s.activeEditor.value;
       /*  code here to update the value using functions */
    });
    

    Hope it helps!

    If the issue persists, please share a demo sample depicting your issue for further investigation.

    Regards,

    Manish Gupta

  • Posted 15 May 2019, 8:51 pm EST

    It’s not working - s.activeEditor,value seems to be returning a function, which I suspect it because the column is bound to the function.

    The “Investment” column is the knockout observable. The code below shows the functions bound to itemFormatter and EditEnding events. You can see that I take the value out of the observable and set the innerHTML. In the end edit I do the reverse. When I start typing in the cell, it doesnt actually show me the value i’m typing, and then when edit is complete it shows the function definition in the cell, rather than the number, which is because data.Investment contains an actual function definition after the edit.

    
    // itemFormatter for use with a grid that has an "investment" column that is an observable value
    	Me.GridItemFormatter_Investment = function (panel, r, c, cell) {
    
    		if (panel.cellType == wijmo.grid.CellType.Cell) {
    
    			if (panel._cols[c].binding == "Investment") {
    
    				var data = panel.rows[r].dataItem;
    				var investment = data.Investment();
    				cell.innerHTML = investment;				
    
    			};
    
    		};
    
    	};
    
    	// After grid editing has occured, save the value.
    	Me.GridCellEditEnding_Investment = function (sender, e) {
    
    		e.cancel = true;
    		var value = sender.activeEditor.value;
    		var data = sender.itemsSource[e.row];
    		data.Investment(value);
    
    	};
    
    
  • Posted 16 May 2019, 9:22 pm EST

    Hi Marcus,

    Please refer to the following sample which demonstrates the binding of observables as grid values:

    https://codepen.io/anon/pen/byWyOx?editors=1010

    Although the sample demonstrates the functionality it is not the recommended approach. As discussed earlier, js getter/setter is a more suitable solution for your use case.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels