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

[Tolga Erdogus]

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

[Vladimir Iliev]

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

[Tolga Erdogus]

Would I be able set the command button to be disabled while updating the properties?

[Vladimir Iliev]

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

[Amit]

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

[Vladimir Iliev]

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

[Amit]

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

    )

     

%>

 

[Vladimir Iliev]

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

[Amit]

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

[Vladimir Iliev]

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

[Amit]

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

[Amit]

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

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

grid.dataSource.read();

Thanks,
Amit

[Amit]

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

[Vladimir Iliev]

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

[Umut]

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

[Vladimir Iliev]

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

 

 

[Umut]

$.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. 

[Vladimir Iliev]

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

 

 

[Sajitha]

Dear All,

I have a different requirement.

In my Kendo grid the data is loading from the Database. I have a check box on top of the grid. When the user clicks on the checkbox(show closed) , it should load all the closed items in the same grid, with some additional columns and some columns from the initial grid is to be removed also. I have 2 custom command buttons also in the grid called APPROVE and DENY. I need to hide them also on the checkbox click.

 

Please guide me.

 

Thanks ,

Sajitha

 

[Eyup]

Hi Sajitha,

 

This requirement is possible and the best way to achieve it would be to create 2 different grids on the same page.

Then, using a CheckBox or RadioButton you can toggle their visibility accordingly:
https://api.jquery.com/hide/

 

Regards,
Eyup
Progress Telerik

[Sajitha]

Hi Eyup,

I have implemented to the same grid, using the same Stored procedure. And in the databound method, I am showing and hiding the columns as well.

 

Thanks for  your guidance.

 

Regards,

Sajitha

[Eyup]

Hello Sajitha,

 

I am glad that you've managed to resolve the issue.

Feel free to turn to us if new questions arise.

 

Regards,
Eyup
Progress Telerik