Column Template in MVC Grid

[Kevin Nichols]

Hello,

 

Im having an issue with a grid which can contain two custom buttons in one column.  These are populated using a template and events are hooked via jquery.  These work fine until I page up.  Once paging is performed the buttons no longer work on any page.  Any help would be appreciated.

 

Index.cshtml

 

@(Html.Syncfusion().Grid<Itron.Oracle.Manufacturing.QCApproval.Models.

PalletState>("Grid")

.Datasource(Model.Pallets)

.Mappers(map => map.Action(

"Paging", new { Makeby = @Model.MakeBy }))

.AllowSelection(

false)

.Column(column =>

{

column.Add(

"Actions").TemplateColumn(true).TemplateName("ApproveTemplate").HeaderText("").Width(170);

column.Add(p => p.Number).HeaderText(

"Pallet").Width(50);

column.Add(p => p.QCApprovalStatus).HeaderText(

"QC Status");

column.Add(p => p.BackflushStatus).HeaderText(

"Backflush");

})

.PageSettings(page =>

{

page.AllowPaging(

true);

page.PageSize(6);

})

.AutoFormat(@ViewBag.CurrentTheme)

)

app.js

$(document).ready(

function () {

$(

".reject").click(function () {

alert(

"Reject Clicked");

var pallet = $(this).attr("value");

alert(

"Reject Pallet: " + pallet);

RejectPallet(pallet);

});

$(

".approve").click(function () {

alert(

"Approve Clicked");

var pallet = $(this).attr("value");

alert(

"Accept Pallet: " + pallet);

AcceptPallet(pallet);

});

});

 

 

ApproveTemplate:

@model Itron.Oracle.Manufacturing.QCApproval.Models.

PalletState

　

@

if(Model.QCApproved == true)

{

<button value="@Model.Number" class="reject sf-button Sandune background">Reject</button>

}

else

if (Model.QCApproved == false)

{

<button value="@Model.Number" class="approve sf-button Sandune background">Approve</button>

}

else

{

<button value="@Model.Number" class="reject sf-button Sandune background">Reject</button>

<button value="@Model.Number" class="approve sf-button Sandune background">Approve</button>

}

[Kevin Nichols]

Nevermind, figured it out.  Maybe it will help someone else though.  When attaching events you need to use the live so that you can select object now and future as in page 1 and further pages. 

 

$(

".approve").live("click", function () {

alert(

"Approve Clicked");

var pallet = $(this).attr("value");

alert(

"Accept Pallet: " + pallet);

AcceptPallet(pallet);

});

[Eswari S]

Hi Kevin,

 

Thank you for using Syncfusion products.

 

We are happy to hear that your issue has been resolved.

 

Please let us know if you need any further assistance.

 

Regards,

Eswari S

 

 

[Miguel Adwin]

Hey Kevin, came across your post and I'm hoping you can help me. 

Based on your post, it seems that you were using a cshtml as your template for the grid column. Is that the case?

[Miguel Adwin]

The better question to ask is, what is "ApproveTemplate"?

[Kavitha Narayanan]

Hi Miguel,

Thank you for using Syncfusion products.

Query # Based on your post, it seems that you were using a cshtml as your template for the grid column. Is that the case? & The better question to ask is, what is "ApproveTemplate"?

We have prepared the sample based on your requirement using TemplateColumn. Please refer to the following Sample and code snippets:

[Cshtml]

@{ Html.Syncfusion().Grid<Sample.Models.Order>("SampleGrid")

.Datasource(Model)

.Caption("Orders")

.Column(col =>

{

. .. .

col.Add("Button").TemplateColumn(true).TemplateName("TemplateColumn"); // here “TemplateColumn” is the partial view to load custom contents to columns

})

.PageSettings(page=>{

page.PageSize(8);

})

.EnablePaging()

.EnableSorting()

.EnableGrouping()

.EnableFiltering()

.Render();

}

[TemplateColumn.cshtml]

<input type="image" value="submit" src="" alt="Edit Button" style="width:30px;height:30px;background-color:Blue"/>

Also , we request you to check the following online sample and UG link:

Sample link:Sample.zip

Online Sample: http://mvc.syncfusion.com/demos/ui/grid/Templates/ServerMode

UG link: http://help.syncfusion.com/ug/asp.net%20mvc/index.html#!Documents/servermode14.htm

Please let us know if you need any further assistance.

Regards,

kavithan N.