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.
Unfortunately, activation email could not send to your email. Please try again.

Column Template in MVC Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

110851 Aug 27,2013 08:13 PM Apr 30,2015 08:53 AM ASP.NET MVC (Classic) 5
loading
Tags: Grid
Kevin Nichols
Asked On August 27, 2013 08:13 PM

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
Replied On August 27, 2013 08:42 PM

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 [Syncfusion]
Replied On September 3, 2013 01:30 AM

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 Gordon
Replied On April 29, 2015 10:19 AM

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 Gordon
Replied On April 29, 2015 10:21 AM

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

Kavitha Narayanan [Syncfusion]
Replied On April 30, 2015 08:53 AM

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.



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;