We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Column Template in MVC Grid

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>

}


5 Replies

KN Kevin Nichols August 28, 2013 12:42 AM UTC

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);

});



ES Eswari S Syncfusion Team September 3, 2013 05:30 AM UTC

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

 

 



MA Miguel Adwin April 29, 2015 02:19 PM UTC

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?


MA Miguel Adwin April 29, 2015 02:21 PM UTC

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


KN Kavitha Narayanan Syncfusion Team April 30, 2015 12:53 PM UTC

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.



Loader.
Up arrow icon