Custom Command Which invokes an action that returns row data to be shown

18 posts, 0 answers
  1. Tolga Erdogus
    Tolga Erdogus avatar
    5 posts
    Member since:
    Oct 2004

    Posted 25 Jan 2013 Link to this post

    Hi,

    in one of my usecases, I have a custom command.  When clicked it does some server side calculations and returns an updated data model for the row.  This is kind of like a row edit except the editing is not done by the user directly in the row but via some business logic on the server and the updated row is returned to the grid.

    The grid as to overlay this data in to the row.

    Is there a way to do this with a regular click action, but then grab the returned row viewmodel and through javascript update the row?

    I see the client side click event, but it seems then I would have to wire the ajax call in there.  It would be nice to razor script the action that's invoked when the command is clicked, then intercept the returned data on the client side and amend the row data.

    Could you maybe post a couple of lines of code for the best practice to do this?

    Thanks
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 29 Jan 2013 Link to this post

    Hi Togla,

     
    Basically you can achieve the desired behavior using for example Custom command button which on click event sends the current record ID to the server and when the updated data is received updates the current record using the Set method. Please check the example below:

    Define custom command:

    columns.Command(c => {
        c.Custom("RefreshRecord").Text("Refresh").Click("onClick");
    });

    onClick function:
    function onClick(e) {
        grid = $("#Grid").data("kendoGrid");
        dataItem = grid.dataItem($(e.srcElement).closest("tr"));
     
        $.ajax({
            url: "/Home/ReturnNewData",
            //send current record ID to the server
            data: { id: dataItem.id },
            success: function (data) {
                //update the current dataItem with the received data from the server
                //example data: {"OrderID":4,"OrderDate":"\/Date(1343941200000)\/","OrderDescription":"NewDescription","EmployeeId":4}
                for (var property in data) {
                    dataItem.set(property, data[property]);
                }
            }
        })
    }

     
    Kind Regards,
    Vladimir Iliev
    the Telerik team
    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 MVC is VS 2017 Ready
  4. Tolga Erdogus
    Tolga Erdogus avatar
    5 posts
    Member since:
    Oct 2004

    Posted 29 Jan 2013 Link to this post

    Would I be able set the command button to be disabled while updating the properties?
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 31 Jan 2013 Link to this post

    Hi Tolga,

     
    You can disable all custom command buttons or only the current row custom command before making the ajax request and enable them again on success or error event - please check the updated function below:

    function onClick(e) {
        grid = $("#Grid").data("kendoGrid");
        dataItem = grid.dataItem($(e.srcElement).closest("tr"));
     
        //disable the command buttons
        $("#Grid .k-grid-content")
            .find(".k-grid-RefreshRecord")
            .addClass("k-state-disabled")
            .bind("click", function (e) {
                e.preventDefault();
                e.stopPropagation();
            })
       
        $.ajax({
            url: "/Home/ReturnNewData",
            //send current record ID to the server
            data: { id: dataItem.id },
            error: function () {
     
                //enable the command buttons
                $("#Grid .k-grid-content").find(".k-grid-RefreshRecord").removeClass("k-state-disabled").off("click");
            },
            success: function (data) {
                //update the current dataItem with the received data from the server
                //example data: {"OrderID":4,"OrderDate":"\/Date(1343941200000)\/","OrderDescription":"NewDescription","EmployeeId":4}
                for (var property in data) {
                    dataItem.set(property, data[property]);
                }
     
                //enable the command buttons
                $("#Grid .k-grid-content").find(".k-grid-RefreshRecord").removeClass("k-state-disabled").off("click");
            }
        })
    }
    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Amit
    Amit avatar
    7 posts
    Member since:
    Apr 2008

    Posted 19 Feb 2013 Link to this post

    Hi Vladimir Iliev

    i have a custom command on grid, calling below function:

    <script type="text/javascript">
        function ShowSubgranteeEdit(e) {
            e.preventDefault();
            grid = $("#Grid").data("kendoGrid");
            dataItem = grid.dataItem($(e.srcElement).closest("tr"));

           // var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            $.ajax({
                url: "/SubGrantee/Edit",
                data: { id: dataItem.id },
                success: function (response) {
                    $('#EditSubGrantee').html(response);
                }
            });
        }
    </script>

    The function is called successfully,however the view in the URL does not change, i want it to move to "/SubGrantee/Edit".

    what wrong i am doing...????

    Thanks in Advance

    Amit
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 21 Feb 2013 Link to this post

    Hi Amit,

     
    The custom command that you posted uses jQuery Ajax method which requests data from remote page without changing the current URL. If you need to redirect the client to another page you can use for example the Location replace method.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Amit
    Amit avatar
    7 posts
    Member since:
    Apr 2008

    Posted 28 Feb 2013 Link to this post

    Thanks Vladimir,

    That Helped...:)

    I have another requirement:

    below is the code i am using to bind Kendo grid...however i want to rebind my Grid to  "ReadPresidentList" after destroy method is called...How can u i achieve this...??

    Thanks in Advance..
    Amit
    <%: Html.Kendo().Grid<BCCWebForm.Models.BCC>()
        .Name("PezGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Role).Width(250);
            columns.Bound(p => p.FullName).Width(250);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
             
            .Ajax()
             .Read(read => read.Action("ReadPresidentList", "BCC", new { ID = ViewBag.orgID }))
              
            .Model(model =>
            {
                model.Id(p => p.ID);
                model.Field(p => p.Role).Editable(false);
            })
             
                 .Update(update => update.Action("UpdatePrez", "BCC"))
                 .Destroy(update => update.Action("DelPrez", "BCC"))     
        )
         
    %>
     
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Feb 2013 Link to this post

    Hi Amit,

     
    Basically you can use the RequestEnd event to check if the current operation is "destroy" to use the dataSource read method to refresh the grid data:

    Define RequestEnd event handler:

    .DataSource(dataSource => dataSource       
        .Ajax()     
        .Events(e => e.RequestEnd("onRequestEnd"))

    JavaScript:
    function onRequestEnd(e) {
        if (e.type == "destroy") {
            e.sender.read();
        }
    }
    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Amit
    Amit avatar
    7 posts
    Member since:
    Apr 2008

    Posted 28 Feb 2013 Link to this post

    WOW..that works like charm..:)) Thanks...:)

    also what JavaScript i need to use, in case i am trying to call read method from other view....if i have custom edit and create command...
    i guess 
    e.sender.read();
    will not work in that case...??
    <%: Html.Kendo().Grid<BCCWebForm.Models.SelectSubGranteeListResult>()
        .Name("Grid")
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Text("Add New").Url("").HtmlAttributes(new { onclick = "PopulateAddressForm()" });
        })
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Width(150).Title("Subgrantee Name");
            columns.Bound(p => p.Address).Width(350).Title("Subgrantee Address");
            columns.Command(command => { command.Custom("Edit").Click("ShowSubgranteeEdit"); command.Destroy(); }).Width(160);
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ReadSubgranteeList", "SubGrantee"))
            .Model(model => model.Id(p => p.ID))
            .Destroy(update => update.Action("Delete", "SubGrantee"))
     
        )
    %>

    Thanks,
    Amit
  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 01 Mar 2013 Link to this post

    Hi Amit,

     
    I'm not sure if I understand you correctly but you can call the read method outside the requestEnd event in the following way:

    //find the grid (from cure) - change Grid with your grid name
    var grid = $("#Grid").data("kendoGrid");
    //use the grid dataSource read method
    grid.dataSource.read();

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Amit
    Amit avatar
    7 posts
    Member since:
    Apr 2008

    Posted 01 Mar 2013 Link to this post

    Thanks Vladimir,
    but the following line will only work, if the kendo grid is on the same page...
    var grid = $("#Grid").data("kendoGrid");
    in my case i am trying to call read method of grid from pop-up window...??

    i need something like this....

    var grid = window.opener. $("#Grid").data("kendoGrid");

    which could allow me to refer kendo grid of opener window and call its read method..??

    Thanks in Advance
    Amit
  13. Amit
    Amit avatar
    7 posts
    Member since:
    Apr 2008

    Posted 01 Mar 2013 Link to this post

    ok, i got this to work....:))

    var grid = window.opener.$("#Grid").data("kendoGrid");
    grid.dataSource.read();
    Thanks,
    Amit
  14. Amit
    Amit avatar
    7 posts
    Member since:
    Apr 2008

    Posted 02 Mar 2013 Link to this post

    Hi Vladimir Iliev,

    i am stuck at a point where i want, the Text of my custom command button to change according to some condition, in Kendo Grid...

    For Example:
    the text of the button should b "Edit subgrantee Statement" where Amount is >0 else it should display "Add subgrantee Statement"


    Thanks in Advance..
    Amit
  15. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 05 Mar 2013 Link to this post

    Hi Amit,

    Your last question is not related to the original topic of this support conversation, so please submit a new support ticket for it with more details about what exactly you are trying to achieve.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Umut
    Umut avatar
    7 posts
    Member since:
    May 2014

    Posted 09 Mar 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir, 
    This solution is not working if i grouped my grid. The data updated but not able to refresh the row. If there is no Grouping, it is Ok. 

    Regards
  17. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Mar 2015 Link to this post

    Hello Umut,

    When the Grid is grouped and the "ServerOperation" option is set to true, you should also call the "refresh" method of the Grid in order to refresh the target row:

    for (var property in data) {
        dataItem.set(property, data[property]);
    }
     
    grid.refresh();

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  18. Umut
    Umut avatar
    7 posts
    Member since:
    May 2014

    Posted 10 Mar 2015 in reply to Vladimir Iliev Link to this post

    $.ajax({
               url: "/Wlb/wlbexplorer/umkitos",
               type: "POST",
               data: {
                   ItemID: dataItem.Id
               },
               success: function (data) {
                   for (var property in data) {
                       dataItem.set(property, data[property]);
                   }
                   grid.refresh();
               }
           });
    Sorry but it is not working. 
  19. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Mar 2015 Link to this post

    Hi Umut,

    I tried to reproduce the described behavior but to no avail - the provided setup is working as expected on our side. Could you please open a new support ticket / forum post and provide runable example where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready