Javascript error when filtering Infragistics jQuery grid control

Question

I am attempting to follow this example to get filtering on my Infragistics jQuery grid. Using Razor I have it set up like this

@( Html.Infragistics().Grid<InstrumentList>() 
      .ID("igGrid1") 
      .Columns(column => 
      {
         column.For(x => x.ProcessNo).DataType("int").HeaderText("Process No");
         column.For(x => x.SubProcess).DataType("string").HeaderText("Sub Process");
         column.For(x => x.Stream).DataType("int").HeaderText("Stream");
         column.For(x => x.EquipmentCode).DataType("string").HeaderText("Equipment Code");
         column.For(x => x.SequenceNumber).DataType("string").HeaderText("Sequence Number");
         column.For(x => x.EquipmentIdentifier).DataType("string").HeaderText("Equipment Identifier");
         column.For(x => x.Tag).DataType("string").HeaderText("Tag");     
      })
      .Features(features => 
      { 
         features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => 
         {
            settings.ColumnSetting().AllowSorting(true);
         });
         features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);
         features.Filtering().ColumnSettings(settings =>
         {
            settings.ColumnSetting().ColumnKey("Tag").AllowFiltering(false).FilterCondition("startsWith");
          });
      }) 
      .ClientDataSourceType(ClientDataSourceType.JSON) 
      .DataSourceUrl(Url.Action("GetInstrumentLists")) 
      .Width("100%") 
      .Height("700px") 
      .DataBind() 
      .Render()
) 

I also have this listed at the top of my layout file:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Infragistics/ig.ui.js")" type="text/javascript"></script>

I am getting an error $.tmpl is not a function from line 17683 of ig.ui.js. It goes away if I remove the filtering lines in the grid setup.

Could it be because I'm using jquery 1.5.1 and the script is built on jquery 1.4.4? 1.5.1 is the default version that comes with an MVC 3 project. Any ideas?

Answer 1

For anyone who wants to know, I ended up finding a plugin called jquery.tmpl.js that solved the issue. And no, it didn't matter that I was using jquery 1.5.1.

Answer 2

That's right, the grid has an option whether to use jQuery templating or not, which is turned off by default. it's called jQueryTemplating (true/false). It's off for performance reasons - the default rendering is significantly faster than jQuery's templating, but the latter allows for templating. Filtering on the other hand also uses the templating for styling some of the filtering areas, therefore this requires the tmpl.js to be loaded. It is part of jQuery, but we are still including it as part of the product. it only need to be included as a script reference in your example.

Thanks very much for noticing this. We will make sure this dependency is not present in the filtering code. Angel

Answer 3

In 12.1 and up there is a custom templating engine provided with the Ignite UI toolkit which eliminates the need to refer jQuery templating and the jQueryTemplating option has been deprecated since. This is also documented in the API docs.