This is a migrated thread and some comments may be shown as answers.

MVC Grid Custom Command, Refreshing Row

1 Answer 280 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Umut
Top achievements
Rank 1
Umut asked on 09 Mar 2015, 04:15 PM
I have a custom command and when i clicked it, i want to call an ajax function and if it returns, i want it to be disable. I have more than 1000 rows , and i want to refresh only related row. 

@(Html.Kendo().Grid<Umki2.Areas.Wlb.ViewModels.VmWlbWeldLogBook>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.JointNo).Width(140);
            columns.Bound(c => c.WlbJointLocation).Width(190);
            columns.Command(command => command.Custom("FitUp").Click("showDetails"));
 
        })
 
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
                .Read(read => read.Action("Grid_Read", "WlbExplorer"))
        )
)
@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)
 
<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= JointNo # #= JointNo #</h2>
        <em>#= WlbJointLocation #</em>
        <dl>
            <dt>City: #= WlbJointLocation #</dt>
            <dt>Address: #= WlbJointLocation #</dt>
        </dl>
         
    </div>
</script>
 
 
 
<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());
 
    function showDetails(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
 
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 11 Mar 2015, 11:06 AM
Hi Umut,

You can use the Grid's DataBound event handler to iterate over the items in the current view and check the value of a certain field. If the for example the field's value is true, find the corresponding row by its data-uid attribute and apply the k-state-disabled class to the command button. Then, once the showDetails function is called you can again check the value of the field and decide whether to execute the logic or not. In case the logic is executed and the Ajax request is done you can set the field's value to prevent the user from clicking the same button again.

Regards,
Alexander Popov
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.

 
Tags
Grid
Asked by
Umut
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or