Kendo Gird with JsonResult

6 posts, 0 answers
  1. Winson
    Winson avatar
    5 posts
    Member since:
    May 2013

    Posted 14 Apr 2014 Link to this post

    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
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Apr 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Winson
    Winson avatar
    5 posts
    Member since:
    May 2013

    Posted 17 Apr 2014 in reply to Vladimir Iliev Link to this post

    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
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 Apr 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Winson
    Winson avatar
    5 posts
    Member since:
    May 2013

    Posted 23 Apr 2014 in reply to Vladimir Iliev Link to this post

    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!
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Apr 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017