[Solved] Get row ID from grid when custom command button is clicked

[Tom]

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

[Marco]

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();
var index = selectedRow.index();

Regards,
Marco

[Tom]

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]

Hello Tom.

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

Regards, Marco

[Tom]

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]

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]

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

 

 

[Midhunraj]

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

 

[Preslav]

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

[Carlos]

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