Get row ID from grid when custom command button is clicked

10 posts, 0 answers
  1. Tom
    Tom avatar
    4 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post

    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. Marco
    Marco avatar
    2 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    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
  3. Tom
    Tom avatar
    4 posts
    Member since:
    Jul 2012

    Posted 29 Jul 2012 Link to this post

    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
  4. Carlos
    Carlos avatar
    6 posts
    Member since:
    Apr 2012

    Posted 29 Jul 2012 Link to this post

    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

  5. Marco
    Marco avatar
    2 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2012 Link to this post

    Hello Tom.

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

    Regards, Marco
  6. Tom
    Tom avatar
    4 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2012 Link to this post

    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
  7. Geeno Niccole
    Geeno Niccole avatar
    1 posts
    Member since:
    Feb 2013

    Posted 17 Jul 2014 Link to this post

    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:((
  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1443 posts

    Posted 22 Jul 2014 Link to this post

    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!
     
  9. Midhunraj
    Midhunraj avatar
    1 posts
    Member since:
    Dec 2017

    Posted 07 Dec 2017 Link to this post

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

     

  10. Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 12 Dec 2017 Link to this post

    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.
Back to Top