CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3jquery-uijqgrid
RKP
RKP

Reputation: 5385

client-side templated columns for jQuery grid controls in ASP.NET MVC 3

I need to bind a grid with JSON data obtained through Ajax call using jQuery in ASP.NET MVC application. but for each column, I would like to be able to define a template (similar to the TemplateField in GridView controls in webforms). the template is like a column definition and gives full control over what gets displayed in that column. which grid control supports this? I think jQGrid, DataTable and SlickGrid are the popular jQuery based grid controls for client-side data binding. do any of these support having custom template for one or more columns in the grid? I found a link which shows how to bind JSON data to the grid on the client-side, but no information on how I can define a template for each column.

Upvotes: 0

Views: 1350

Answers (1)

Felipe Castro
Felipe Castro

Reputation: 1613

In jqgrid, you can have a custom formatter function, where you would return the html string template to be used on a given column (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter). In Datatable (and jqGrid also), there's an option of creating the grid from an existing element. In that case, you could create your table using a @foreach statement in razor, and applying your templates inside cells.

Example using jqgrid custom formatter and jquery template:

// Your cell template
<script id="MyColumnTemplate" type="text/x-jquery-tmpl">
  <h1>${Name}</h1>
</script>


<script>

// creating the grid passing the formating function
$('#GridView').jqGrid({
    (...)
    colModel: [         
    { name: 'Custom', formatter: myFormatter}, ...],
     });
});

function myFormatter(cellvalue, options, rowObject) {
   var data = { Name: 'Test' };
   // applying the jquery template and returning html output
   return $('#MyColumnTemplate').tmpl(data).html();
}

</script>

Upvotes: 1

Related Questions