This is a migrated thread and some comments may be shown as answers.
Custom Grid Commands
6 Answers 527 Views
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 05 Apr 2012, 08:19 PM
Hello All,

I am working with the New Kendo UI Web Controls and so far they have been fairly easy to integrate into my existing application. I know Kendo UI is new and there are a bunch of things in the works but I was curious if there was a way to make a custom command.


My Grid Golumns are set up as follows

columns: [                        
                        { field: "subcatid", width: 90, title: "Subcatagory" },
                        { field: "title", width: 90, title: "Title" },
                        { field: "order", width: 90, title: "Order" },
                        { field: "author", width: 90, title: "author" },
                        { field: "lastupdate", width: 90, title: "Last Update" },
                        { field: "usecms", width: 90, title: "Use Update" },
                        { field: "alturl", width: 90, title: "Alt URL" },
                        { field: "active", width: 90, title: "Active" },                                    
                        { command: ["edit", "destroy", "View"], title: "&nbsp", width: 90 }
        ],

Doing this creates a new Button with the Commands called "View" I would like this button to redirect to a page when clicked. I am using the following bits of JQuery to call the function, however I would much rather add a class descriptor to this button that is unique to View Commands to replace the selector with $('.k-grid-view') Is there an easy way to do this?

$('td .k-button:last').live('click', function ()
{       
        var itemToView;
        var grid = $("#grid").data("kendoGrid");
        var gridData = grid._data;
        var uid = $(this).parent().parent().attr('data-uid');

        $(gridData).each(function () {
            var item = this;

            if (item.uid == uid.toString())
                itemToView = this;
        });

        window.location.replace(itemToView.view);
    });

ps view is not a column but exists in the model

Thanks

- Josh

6 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 09 Apr 2012, 06:57 AM
Hi Joshua,

Indeed, you can add a css class to the custom command button. Please refer to this online example, which demonstrates how to implement this. 

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brady
Top achievements
Rank 1
answered on 17 Apr 2012, 12:43 PM
Any way to put 2 custom commands in a column?
0
Rosen
Telerik team
answered on 17 Apr 2012, 02:29 PM
Hi Brady,

Indeed, you can have multiple custom command within single column. Similar to the following:

columns: [
/*...*/
{
    command: [
        {text: "Details", className: "details-button"},       
        {text: "More Details", className: "more-details-button"}
    ],
    title: " ",
    width: "110px"
 }]​


Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeremy
Top achievements
Rank 1
answered on 25 Apr 2012, 09:54 PM
Joshua,

I just have to say thank you so much for your great post.  You were so 
thorough and clear that I was able to  find this post and slam-dunk my issue.


0
Pubudu
Top achievements
Rank 1
answered on 09 Feb 2013, 03:20 AM

Hi,

Might be this is funny, but I really need this requirement.

I have a column which having a command button in kendo ui grid. That buttons should have to show the count of array. For an example normally command template is

{ command: { text: "View Details", click: ViewHistory, name: "View_History" }

But I need to change the text property dynamically. If you have any alternatives warmly welcome except template column.   

0
Rosen
Telerik team
answered on 11 Feb 2013, 07:17 AM
Hi Pubudu,

Such functionality id not supported out-of-the-box. Thus, in order to achieve such functionality you should either use a template for the command or manually modify the text of the button via JavaScript. 

Also as your question is not related to the original thread topic, I encourage you to open a separate thread if you have additional questions.

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Joshua
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Brady
Top achievements
Rank 1
Jeremy
Top achievements
Rank 1
Pubudu
Top achievements
Rank 1
Share this question
or