Hi,

I'm doing some templating on grid column and I wonder to know how to do it in best way. Here what I want to do.

I have a block of html which show a list in sort of treeview like

+ Menus

   menu1

   menu2

TreebarView.cshtml  (or html)

@model TreeModel => view comes from an action

<div class="tree-collapse">

<div class="tree-collapse-header tree-collapse-header2 sdb-link">

<span class="tree-collapse-icon glyphicon glyphicon-minus"></span>

<span class="tree-collapse-text">EU Submission</span>

</div>

<div class="tree-collapse-content">

<p>Menu 1</p>

<p>Menu 2</p>

<p>Menu 3</p>

</div>

</div>

Action would be like:

public ActionResult GetList()

{

return PartialView("TreebarView", Model)

}

So I want to add this view block inside a grid column. Here I'd like to know how to make it easily?

What I did:

=> In grid column:

Model:

ProductContentModel

    Products

      ProductId

      ListMenu

.Grid<ProductContentModel>()

column.For(x => x.Products).HeaderText("Products").Template("<div class='sbmt-column-template'> <div class='sbmt-column-template-0'> ${Products.ProductName} </div> <div class='sbmt-column-template-1'> ${Products.ListMenu} </div> </div>");

=> Then I have to execute a script outside the column because I cant add any javascript inside temple !!! So what I have outside:

$(document).delegate("#sbmt-grid", "iggridrendered", function (evt, ui) {

initProductColumnTemplate();

});

$(document).delegate("#sbmt-grid", "iggridpagingpagerrendered", function (evt, ui) {

initProductColumnTemplate();

});

=> And this script has to be executed on each grid action (paging, sorting, sizing ...) which is lots of work as I cant insert my script inside the template. Then my script initProductColumnTemplate(); transform the divs inside the template to the tree view with help of classes.

.js

initProductColumnTemplate(){

var productName = this.find('.sbmt-prd-column-template-0').html();

var productMenu= this.find('.sbmt-prd-column-template-1').html();

var listMenu = productMenu.split(',');

var content = '';

for (var i = 0; i < listMenu .length; i++) {

content += '<p>' + listMenu [i] + '</p>';

}

this.append(

'<div class="tree-collapse sbmt-tree">' +

'<div class="tree-collapse-header tree-collapse-header2 sdb-link">' +

'<span class="tree-collapse-icon glyphicon glyphicon-minus"></span>' +

'<span class="tree-collapse-text">' + productName + '</span>' +

'</div>' +

'<div class="tree-collapse-content">' +

content +

'</div>' +

'</div>'

);

}

=> It works but It's too much work. Is there any other method that I simply call an action from serverside and get a view inside my template with the grid column values. Something like:

.Grid<ProductContentModel>()

column.For(x => x.Products).HeaderText("Products").Template("<script> getViewFromAjaxCall(${Products.ProductId}) <script> ");

=> I'll later on looking on angular js how to insert a view inside a template but if I know how to do it, I'd probably know how to it with angular

Thank you