Kendo Gird with JsonResult

[Winson]

Hi,

Currently I have a Kendo Grid that list all users and I was able to add a column called "Reset". When admin click the "Reset" it will route to an action called "ResetPwd".

The code is as following:
{
title: 'Reset Password',
width: 100,
template: '<a href="/contacts/resetpwd/#= Email #" data-contact-id="#= Email #" title="Reset Password">Reset</a>',
filterable:false,
encoded: false
},

The action code is like following:

[Route("resetpwd/{Email}")]
 public JsonResult ResetPwd(string email)
 {
 if (ModelState.IsValid)
 {
   //Update password code here 

   //send email notification code here
   FormMailer.ForgotPassword(model).Send(); 

    return Json(new { result = 1, message = "success" }, JsonRequestBehavior.AllowGet);
 } 

    return Json(new { result = 0, message = "failed" }, JsonRequestBehavior.AllowGet);
}

I want to add code to the view so it will show a popup window to indicate if success or failed but I don't know how to do it. 

Can anyone send me some sample code or kindly shed some lights on it?

Thanks,

Winson

[Vladimir Iliev]

Hi Winson,

I would suggest to use column with custom command with "click" event handler defined. Then on click of that button you can create custom Ajax request to the Controller. Using the "success" event you can open KendoUI window and as content the response from the server. Please check the example below:

1) Create command column with "click" handler:

columns: [{
        command: [{
            name: "Reset",
            text: "Reset",
            click: onResetClick
        }]
    }

2) Initialize hidden empty KendoUI window:

$(function () {
    $("#ResultWindow").kendoWindow({
        modal: true,
        draggable: false,
        title: "",
        content: "",
        actions: ["Close"]
    });
});

3) On click of the button create Ajax request to the server and show the response in the above window:

function onResetClick(e) {
    var grid = this;
    var row = $(e.currentTarget).closest("tr");
    var dataItem = grid.dataItem(row);

    $.ajax({
        url: "/Home/ResetPwd",
        type: "POST",
        data: { email: dataItem.Email},
        success: function (data) {
            var w = $("#ResultWindow").data("kendoWindow");
            w.setOptions({ title: data.message });
            w.content(data.message);
            w.open().center();
        }
    })
}

Kind Regards,
Vladimir Iliev
Telerik

 

 

[Winson]

Hi Vladimir,

Thanks so much for your response. I added the code to my view file and the "Reset" button shows up correctly. But nothing happens after I clicked it. It did not either trigger the onResetClick event or route to action defined in the Ajac call.

I attached my cshtml file here. Please advise.

@model ProjectName.Web.ViewModels.ContactListViewModel

@{
ViewBag.Title = "IndexForAdmin";
ViewBag.PageClass = "contacts-page";
}

<div class="content-box">
<div class="box-header expanded">
<h3>
<span class="heading">Contacts:</span>
@Model.Location.LocationName
</h3>

@if (false)
{
<div class="message validation-message">
<span class="icon icon-info"></span>
<div class="message-body">
<h4>It appears that some of the contact details are missing.</h4>
<p>Please take the time to notify us of the details for the highlighted regions below. Thank you!</p>
</div>
</div>
}
</div>

<!-- contacts grid -->
<div id="gridContacts"></div>
</div><!-- .content-box -->

@section scripts {
<script type="text/javascript">
$(function() {

// TODO: un-inline

// initialize grid
$('#gridContacts').kendoGrid({
dataSource: {
transport: {
read: {
url: "/contacts/api/grid/@Model.Location.AddressCode",
cache: false
}
},
schema: {
model: {
fields: {
Name: { type: 'string' },
Role: { type: 'string' },
Organization: { type: 'string' },
Email: { type: 'string' },
PhoneTel: { type: 'string' },
PhoneMobile: { type: 'string' },
PhoneFax: { type: 'string' },
Address: { type: 'string' }
}
}
},
pageSize: 10
},
scrollable: false,
sortable: true,
filterable: false,
pageable: {
pageSizes: [5, 10, 20, 30, 50]
},
columns: [
{
field: 'Name',
width: 130,
template: '<span class="contact-name">#= Name #</span>',
encoded: false // allow HTML in cell
},
{
field: 'Role',
width: 100
},
{
field: 'Organization',
width: 110
},
{
field: 'Email',
width: 170,
template: '# if( Email !== \'\' ) { #<a href="mailto:#= Email #" title="Email #= Name #">#= Email #</a># } #',
encoded: false
},
{
title: 'Phone & Fax',
width: 140,
template: '# if( PhoneTel !== \'\' ) { ##= PhoneTel # (t)<br /># } #' +
'# if( PhoneMobile !== \'\' ) { ##= PhoneMobile # (m)<br /># } #' +
'# if( PhoneFax !== \'\' ) { ##= PhoneFax # (f)<br /># } #',
encoded: false
},
{
field: 'Address',
width: 200,
template: '# if( Address !== \'\' ) { ##= Address ## } else { #<span class="icon-update"></span>Please <a href="\\#" class="update-link" data-contact-id="#= Email #" title="Update contact address">update</a># } #',
encoded: false
},
{
title: '',
width: 40,
template: '<a href="\\#" class="update-link" data-contact-id="#= Email #" title="Request update">Update</a>',
encoded: false
},
{
command: [{
name: "Reset",
text: "Reset",
click: onResetClick
}]
},
]
});

});

</script>

<script type="text/javascript">
$(function () {
$("#ResultWindow").kendoWindow({
modal: true,
draggable: false,
title: "",
content: "",
actions: ["Close"]
});
});

function onResetClick(e) {
var grid = this;
var row = $(e.currentTarget).closest("tr");
var dataItem = grid.dataItem(row);

$.ajax({
url: "/Contacts/ResetPwd",
type: "POST",
data: { email: dataItem.Email },
success: function (data) {
var w = $("#ResultWindow").data("kendoWindow");
w.setOptions({ title: data.message });
w.content(data.message);
w.open().center();
}
})
}

</script>
}

@section dialogs {

@Html.Partial("_UpdateContactInfoForm", Model.UpdateContactViewModel)
}


Thanks,

Winson

[Vladimir Iliev]

Hi Winson,

From the provided information it's not clear what is the exact reason for current behavior - could you please check if the browser console contains errors? Also if possible please provide runable example where the issue us reproduced - this would help us identify the exact reason for current behavior. 

Regards,
Vladimir Iliev
Telerik

 

 

[Winson]

Hi Vladimir,

Thanks for your response.

There was no error on the page after I clicked "Reset". The action Contacts/ResetPwd has been triggered but just not triggered the Ajax success function.

Here is the action code:

​[Route("resetpwd/{Email}")]
 public JsonResult ResetPwd(string email)
 {
 if (ModelState.IsValid)
 {
   //Update password code here 

   //send email notification code here
   FormMailer.ForgotPassword(model).Send(); 

    return Json(new { result = 1, message = "success" }, JsonRequestBehavior.AllowGet);
 } 

    return Json(new { result = 0, message = "failed" }, JsonRequestBehavior.AllowGet);
}

Please advise. Thanks!

[Vladimir Iliev]

Hi Winson,

As the browser hits the Controller Action, most probably the response from the server is considered by jQuery ajax method as an error and the success event is never triggered. Currently I can only suggest to add custom handler for the "error" event  of the "ajax" method and debug what is causing the error. 

Kind Regards,
Vladimir Iliev
Telerik