Custom Grid Commands

[Joshua]

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

[Rosen]

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

[Brady]

Any way to put 2 custom commands in a column?

[Rosen]

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

[Jeremy]

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.

[Pubudu]

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.   

[Rosen]

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