CODEWITHSUNDEEP
jqueryasp.net-mvcmodel-view-controllerkendo-ui
balron
balron

Reputation: 726

Kendo grid - unable to passing value with custom button

i am using kendo grid MVC.I would like to send selected row's ID value to controller.Read documents of kendo and googled for some example.Problem is i got error on the select() function of grid's datasource.

function editRow() {
    var grid = $("#grid").data("kendoGrid");
    var selectedRow = grid.select(); // Getting error on this line(Cannot call method 'value' of undefined )
    var index = selectedRow.index();
    alert(index);

 };

View:

@(Html.Kendo().Grid<AIS.UI.WebService.Proxy.DSrvAllService.AMBULANCEDEFINITIONS>() //Bind the grid to ViewBag.Products
.Name("grid")
.Columns(columns =>
{

columns.Bound(product => product.DESCRIPTION).Title("<strong>Ambulance Description</strong>").Width("20%");
columns.Bound(product => product.CODE).Title("<strong>Ambulance CODE</strong>").Width("20%");
columns.Command(commands =>
{

commands.Custom("").Text("editteam").HtmlAttributes(new { id = "editteam", onClick = "editRow()" });
commands.Destroy();
}).Title("Operations").Width("10%");
})
.ToolBar(toolbar =>
{
toolbar.Create().HtmlAttributes(new { id = "addbutton", style = "font-weight:bold;color:blue" }).Text("Add Records"); // The "create" command adds new data items
toolbar.Save();
})

.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pager => pager
.PageSizes(true)
.Input(true)
.Refresh(true)

)

.Sortable() // Enable sorting
.DataSource(dataSource => dataSource

.Ajax()
.ServerOperation(true)
.Events(events => events.Error("onError"))
.Model(model =>
{
model.Id(product => product.ID); // Specify the property which is the unique identifier of the model
model.Field(product => product.ID).Editable(false).DefaultValue(Guid.Empty);
model.Field(p => p.DESCRIPTION).Editable(true);
model.Field(product => product.CODE).Editable(true);


})
.Events(events => events.Error("onError"))

.Create(create => create.Action("AmbulanceCreate", "Administrator")) // Action invoked when the user saves a new data item
.Read(read => read.Action("AmbulanceRead", "Administrator"))  // Action invoked when the grid needs data
.Update(update => update.Action("AmbulanceUpdate", "Administrator"))  // Action invoked when the user saves an updated data item
.Destroy(destroy => destroy.Action("AmbulanceDelete", "Administrator")) // Action invoked when the user removes a data item

))

Updated(Solved)

To get ID value of row that pressed custom button:

function EditName(e) {
 var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 var id = dataItem.ID;
 alert(id);

Also need to use like that to pass data's to function:

commands.Custom("Edit Team").Click("EditName")

Upvotes: 1

Views: 6488

Answers (1)

OnaBai
OnaBai

Reputation: 40887

I think that you are not picking the selected row because actually you are not selecting any, right? What you want is to pick the row that contains the button, is that right?

If so, you can get the item doing:

function editRow() {
    // e.target is the DOM element representing the button
    var tr = $(e.target).closest("tr"); // get the current table row (tr)

    // Show the row index in the HTML table
    alert("Row in the grid: " + tr.index());

    // get the data bound to the current table row
    var data = this.dataItem(tr);

    // Show DataSource index
    alert("Datasource index: " + this.dataSource.indexOf(item));
}

As you can see, I'm showing two indexes: the index in the HTML table and the index in the DataSource, these might be different if you have pagination.

See it running here: http://jsfiddle.net/OnaBai/VKEHK/1/

Upvotes: 2

Related Questions