Get row ID from grid when custom command button is clicked

2 Answers 5912 Views
Grid
Tom
Top achievements
Rank 1
Tom asked on 25 Jul 2012, 11:17 AM
Hi,

I am a newbie to Kendo so apologise in advance if my question is missing the bleeding obvious.

I have a custom command button in my grid which I have bound to a function (called uploadFile). My ultimate intention is to allow the user to click a button to bring up a modal window which will allow them to upload a file to the server. I am able to get the Upload button displaying and firing properly. However, I cannot find any information on how to derive the ID of the row from which the button was clicked.

Code is:

$(document).ready( function () {
     
     var crudServiceBaseUrl = "StudentProxyKendo.cfc?method=",
         
        dataSourcePEP = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "getPEP&studentID=" + studentID + "&laId=" + laId + "&schoolID=" + schoolID,
                    dataType: "json"
                },
                update: {
                    url: crudServiceBaseUrl + "updatePEP",
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: crudServiceBaseUrl + "deletePEP",
                    dataType: "json",
                    type: "POST"
                },
                create: {
                    url: crudServiceBaseUrl + "addPEP",
                    dataType: "json",
                    type: "POST"
                },
                Upload: {
                    url: crudServiceBaseUrl + "uploadPEP",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 10,
            schema: {
                model: {
                    id: "pepid",
                    fields: {
                        pepid: { editable: false, nullable: true },
                        start_date: { type: "date" },
                        comments: { type: "string" },
                        documentsfilenames: { editable: false, nullable: true },
                        contributorslist: { type: "string" }
                    }
                }
            }
        });
         
         
        $("#PEPGrid").kendoGrid({
            dataSource: dataSourcePEP,
            pageable: true,
            height: 150,
            toolbar: ["create"],
            columns: [
                { field:"start_date", title: "Start Date", width: "140px" },
                { field: "comments", title:"Comments", width: "140px" },
                { field: "documentsfilenames", title:"Document File Names", width: "140px" },
                { field: "contributorslist", title:"Contributors List", width: "100px" },
                { command: { text: "Upload", click: uploadFile }, title: " ", width: "60px" },
                { command: ["edit", "destroy"], title: " ", width: "110px" }],
            editable: "popup",
            create: true,
            update: true,
            destroy: true
        });
 
 
}); // end ready function
 
function uploadFile(e){
    console.log(e)
}

Can anyone point me in the right direction? Many thanks in advance for taking the time to look at this.

Tom

2 Answers, 1 is accepted

Sort by
0
Marco
Top achievements
Rank 1
answered on 26 Jul 2012, 02:22 PM
Hello Tom.

With these lines of code you get the selected row itself and the index of the selected row, too:

var
grid = $("#<Name of Grid>").data("kendoGrid");

var selectedRow = grid.select();
v
ar index = selectedRow.index();

Regards,
Marco
Tom
Top achievements
Rank 1
commented on 29 Jul 2012, 12:56 PM

Hi Marco,

Thanks for your response.

Yes, I can see that the select() method appears in the API docs. However, for some reason it is not working. It must be causing an error as any subsequent code does not execute after the grid.select() method.

The code I'm using, based on your response is:

function uploadFile(){
    var grid = $("#PEPGrid").data("kendoGrid");
    var selectedRow = grid.select();
    var index = selectedRow.index();
    console.log(index);
}

I've checked everything and the function is firing properly so it must be an issue with the select() method of the grid. I am thinking that, when a command button is clicked, the grid does not have anything "selected". Are there separate methods associated with command buttons? I will have a look at the source code and see if I can work anything out. However, I am flying by the seat of my underpants here...

Best regards,
Tom
Marco
Top achievements
Rank 1
commented on 30 Jul 2012, 06:48 AM

Hello Tom.

Please declare your grid as "selectable". I think, the Select() function should work after that change.

Regards, Marco
Tom
Top achievements
Rank 1
commented on 30 Jul 2012, 09:35 AM

Hi Marco and Carlos,

Thank you both for your responses.

I actually came up with a solution to this by looking for clues through the forums. I found the datasource.getByUid() method. I also marked the grid as selectable and then referenced the button by class selector. It may not be the "right" way to do it but it worked.

Working Code:

$("#PEPGrid").kendoGrid({
            dataSource: dataSourcePEP,
            pageable: true,
            height: 300,
            toolbar: ["create"],
            columns: [
                { field:"start_date", title: "Start Date", width: "140px" },
                { field: "comments", title:"Comments", width: "140px" },
                { field: "documentsfilenames", title:"Document File Names", width: "140px" },
                { field: "contributorslist", title:"Contributors List", width: "100px" },
                { command: { text: "Upload"}, title: " ", width: "60px" },
                { command: ["edit", "destroy"], title: " ", width: "110px" }],
            editable: "popup",
            selectable: true,
            create: true,
            update: true,
            destroy: true
        });
         
 
        // note: on event not supported by this version of jquery
        $(".k-grid-Upload").live('click', function ()  {
            var uid = $(this).parent().parent().attr('data-uid');
            var pepid = dataSourcePEP.getByUid(uid).pepid;
            alert("pepid = " + pepid);
        });

Many thanks for all your help.

Best regards,
Tom
Geeno Niccole
Top achievements
Rank 1
commented on 18 Jul 2014, 03:38 AM

i wanted to achieve the reverse of it. Like inputting an id on an external textbox and when you click the button, it selects a row in the grid with its correspoding id #. Could you please help me:((
Alexander Popov
Telerik team
commented on 22 Jul 2014, 01:02 PM

Hi Geeno,

This could be achieved in the following manner:
  • Use the row click event to get the corresponding dataItem
  • Once you have that use its set method to update the desired value

Here is a small example illustrating the above.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Midhunraj
Top achievements
Rank 1
commented on 07 Dec 2017, 09:06 AM

please help me to put one delete button on kendo grid,actually i need to call one delete function on delete button click

 

Preslav
Telerik team
commented on 12 Dec 2017, 08:30 AM

Hello Midhunraj,

Based on your post, I am not sure what is the scenario for your project.

Having said that, could you please elaborate on the requirements? Additionally, it will help me a lot to fully understand the case if you share screencasts or any additional information of the desired output.

I look forward to your reply.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Carlos
Top achievements
Rank 1
answered on 29 Jul 2012, 11:10 PM
hello Tom
I was with the same problem...I know that my solution is not the best way..but works for me..
I'm newbie on Jquery/Kendo..so sorry if its not the elegant or right way....
 
put this function in your grid event change:

change:function () {
                 var row = this.select();
                   var id = row.data("uid");
            $("#log").html("<input name='rowid' type='hidden' id='rowid' value='"+id+"' />");
},

I store the id on a hidden input and I point my command button to a function who reads this Imput
and open a Modal window..

I hope it helps ..

Carlos

Tags
Grid
Asked by
Tom
Top achievements
Rank 1
Answers by
Marco
Top achievements
Rank 1
Carlos
Top achievements
Rank 1
Share this question
or