Issue 2.0.6: cellTemplate does not work

[mp-software]

I'm using a cellTemplate like this but it does not work any more. The last version where it works was : commit aa03a95eb99b1e3297f9b2439b8926e7bd347bd2 Author: Timothy Sweet timothyswt@gmail.com Date: Tue Oct 16 15:51:10 2012 -0700

<script type="text/html" id="editCellTmpl">
    <div data-bind="kgCell: $cell">
        <input type="text" data-bind="value: $cellValue" style="width: 250" />
    </div>
</script>

<div id="GridTest" class="gridTest" style="height: 600px; max-width: 700px;" 
        data-bind="koGrid: { data: daten,
                             columnDefs: [
                                           { field: 's2projName', displayName: 'Projekt', width: 400 },
                                           { field: 'sollStunden', displayName: 'Soll Stunden', width: 250, cellTemplate: 'editCellTmpl' }
                                         ],
                             autogenerateColumns: false }">

</div>

Can you please provide me a solution? Greets, mp-software

[ZiadJ]

Id specific template scripts have been abandoned for being inefficient and restrictive. See https://github.com/ericmbarnard/KoGrid/issues/132 for more details.

[mp-software]

Thank's, this solves my problem!

[mp-software]

But now I've another problem, my field 'sollStunden' in my ViewModel is not updatet if I edit the cell value

[ZiadJ]

As mentioned in the cell template documentation you need to use $data.getProperty($parent) for your fields now. Also in the latest commit the root view model is now accessible through $userViewModel instead of $root.

[mp-software]

Thanks for help, but I'm sorry, I don't know how to see the changed values in my ViewModel - here is my code:

Edit: If you have a bunch of code, make a plunker or jsfiddle. Don't paste a crapload of code on here.

[ZiadJ]

Here's a simplified version of your template:

var editCellTemplate = '<input type="text" data-bind="css: \'kgCellText\', value: $data.getProperty($parent)" />';

Let me know if you're still having trouble with it and I'll look deeper into it.

[orneryd]

I have updated the documentation to further explain how to use an input in the field

https://github.com/ericmbarnard/KoGrid/wiki/About-Custom-Templates

Basically getProperty is a convenience method to process the cellFormatter function (option in columnDefs) if present. and only returns the value of the underlying observable (if it is observable).

For two way data-binding on that you need to access it through this syntax:

<input type="text" data-bind="value: $parent.entity['myFieldName']"/>

the attr binding is not required, and doesn't affect the text when using an input since it is a control and not a span/div.

hope this helps.

[ZiadJ]

@timothyswt Thanks for pointing out about the two way data-binding.

[orneryd]

you can also leave it in a script tag the same way you normally did but instead of passing the string name of the template id you just need a jquery selector calling html().

<script type="text/html" id="myCellTemlateId">
  <input type="text" data-bind="value: $parent.entity['myFieldName']"/>
</script>

define columns:

columnDefs: [{ field: 's2projName', displayName: 'Projekt', width: 400 },
                          { field: 'sollStunden', displayName: 'Soll Stunden', width: 250, cellTemplate: $('#myCellTemlateId').html()}]

[alex-okrushko]

@timothyswt Had the same problem... Using 'myFieldName' is a bit awkward. Template now becomes field-specific (looses the benefits of Template)

[orneryd]

You can also use $data.field in place of 'myFieldName'

It returns whatever your data model is. So if it is not an observable the two way databinding will not work.

[alex-okrushko]

@timothyswt Thanks. I'm still getting the grasp of koGrid (and Knockout), but it looks like 2.0 has major (undocumented) changes. Was really frustrated of why my cell template was doing the ajax request instead on using the template.

But I seem to like koGrid. I'm switching from dataTables.net.

Note: dataTables has amazing documentation. Just something to think about :)

Regards

[orneryd]

Documentation is always a struggle. We are attempting to improve it daily. If you're interested, check out http://angular-ui.github.com/ng-grid which is what the new architecture is based on. It is a work in progress but We will soon be replacing KoGrid documentation with that same format.

[alex-okrushko]

@timothyswt After fighting more time with trying to make $('#MyTemplateID').html() work I found that you test it for var TEMPLATE_REGEXP = /^<.+>/; However, most of the templates (well, actually all of them :) ) start with 'tab' or 'new line' thus koGrid will still try to the ajax page.

My suggestion will be to use var TEMPLATE_REGEXP = /<.+>/; - not to enforce "begins with <"

[orneryd]

I am going to open a separate issue as your're totally correct about that

[orneryd]

I also update the row and cell template libraries to help further explain the differences in the templating system from the old version to 2.0

https://github.com/ericmbarnard/KoGrid/wiki/Row-Template-Library

https://github.com/ericmbarnard/KoGrid/wiki/Cell-Template-Library

[mp-software]

Thank you very much, ...value: $parent.entity[$data.field]...solves my problem!

[davidjsilva]

I like the use of $parent.entity[$data.field] but how would I use it if I have sub objects like the sample object below

{
  Field1: ko.observable(),
  Obj1: {
    ObjField1: ko.observable()
  }
}

In this case $parent.entity[$data.field] does not work because $data.field would be 'Obj1.ObjField1'. I have included this fiddle to show my issue: http://jsfiddle.net/pbqHF/3/

[JByfordRew]

I keep getting 'Uncaught Error: Syntax error, unrecognized expression:

' in jquery 1.9.1 library

when use the cellTemplare : $('#mytemplateid").html()

[JasonRawlins]

I'm also getting a similar error: "Error: Syntax error, unrecognized expresion:

Test

"

columnDef: { field: 'Id', displayName: 'Id', width: 110, cellTemplate: $('IdTemplate').html() }

template:

Script versions: koGrid-2.1.1.js jquery-1.9.1.js knockout-2.2.1.js

Chrome stack trace: error - jquery-1.9.1.js (line 4421) tokenize - jquery-1.9.1.js (line 5076) select - jquery-1.9.1.js (line 5460) Sizzle - jquery-1.9.1.js (line 3998) find - jquery-1.9.1.js (line 5576) ....