toolbar with custom button

8 Answers 3888 Views
Grid
Daniel
Top achievements
Rank 1
Daniel asked on 12 Mar 2013, 02:53 PM
Hello,
1.I saw for toolbar a .custom() method.this is not a command?how can i put a custom command,that does something when i click on it?
2.When adding a create command to the toolbar what is the condition to appear in the edited line the update or cancel buttons?

Regads,
Daniel
Mohan
Top achievements
Rank 1
commented on 31 May 2013, 07:52 PM

Hello,
How would you do this with a Kendo UI Grid built in Javascript. Can you point me to some examples...?
Dimiter Madjarov
Telerik team
commented on 04 Jun 2013, 10:06 AM

Hi Mohan,


To achieve this in a Grid for Kendo UI Web, you should add the custom command to the list of toolbar commands.
E.g.
$("#grid").kendoGrid({
    ....
    toolbar: ["create", "save", "cancel", { text: "Custom"}],
});

and attach the event handler manually.
E.g.
$("#grid").on("click", ".k-grid-Custom", function(){
    //custom actions
});

 

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

8 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 Mar 2013, 09:07 AM
Hi Daniel,


  1. The Custom method indeed defines a custom command. You could specify an Action to be invoked using the Acton method.
    E.g.
    .ToolBar(toolbar =>
      {
          toolbar.Create();
          toolbar.Custom().Text("Click me").Action("myAction", "myController");
      })


  2. The update and cancel buttons will appear in the edited line if there is an edit command defined in some Grid column.
    E.g.
    columns.Command(command => command.Edit());

 

Greetings,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Daniel
Top achievements
Rank 1
commented on 14 Mar 2013, 10:41 AM

Hello,
1. i noticed that i have an .Action method that is good,but i would like to have that click event,just like a custom command in the grid,here there is no .Click() method,so i would like to have some event handler if i click on that command on toolbar.or is not possible?only by creating a template on toolbar and use that element's events?

2.in this case how can i make to appear those two buttons save/cancel?

P.S:the whole ideea was to put some images instead text, on Add/Edit/Delete commands,and i found out for another post, that  is not possible,only if i create a custom template for each action.

Regards,
Daniel
Dimiter Madjarov
Telerik team
commented on 14 Mar 2013, 05:04 PM

Hello Daniel,

  1. Yes, you could create a toolbar template. You could also add an Id attribute to the button and handle it's click event.
    E.g.
    toolbar.Custom().Text("Click me").HtmlAttributes(new { id = "customCommand" });

    <script>
      $("#customCommand").click(function (e) {
          e.preventDefault();
          //put custom logic here
      });
    </script>
  2. As stated in my previous answer, if you have an Edit command defined in some column, the Update and Cancel buttons will appear automatically for newly added or edited rows as shown in this Demo.

 

Regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Daniel
Top achievements
Rank 1
commented on 15 Mar 2013, 07:47 AM

The ideea is that i do not have edit button in the grid's row,because i want to use a template,as a partial view,under the grid,and when i press add,open that view for insert.
But anyway,i did not know that custom() can have a click event on client-side or with jquery i can bind an click event to any html element?

Thanks again for the ideea.
Daniel
Dimiter Madjarov
Telerik team
commented on 15 Mar 2013, 05:19 PM

Hello Daniel,


You could add any html attributes via the HtmlAttributes method. Adding an Id to the custom toolbar button is just a sample solution for the current scenario. Regarding your second question, yes you could bind a click event to any html element using jQuery.

 

Greetings,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Daniel
Top achievements
Rank 1
commented on 18 Mar 2013, 07:28 AM

Ok,thank you,i will try out your ideea.
hans
Top achievements
Rank 1
commented on 06 Feb 2015, 02:21 PM

Hello Dimiter,

The custom action works find, but how can I pass parameter to the action?
Like: The id of the current selected item of the grid


Hans
Dimiter Madjarov
Telerik team
commented on 09 Feb 2015, 01:49 PM

Hello Hans,

You could retrieve the currently selected item and it's id in the click event handler.
E.g.

$("#grid").on("click", ".k-grid-Custom", function(){
    var grid = $("#grid").data("kendoGrid");
    var selected = grid.dataItem(grid.select());
    var id = selected.ProductID;
    //custom actions
});

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Stephen
Top achievements
Rank 1
commented on 19 Dec 2019, 10:04 PM

To be clear, the minimum needed to add a custom command in the Kendo MVC extensions is this.

.ToolBar(toolbar =>
       {           
           toolbar.Custom().Text("Click me").HtmlAttributes(new { id = "customCommand" });         
       })

 

If you add `.Create()` this will attempt to setup Kendo UI to create a new entry and if you're using Kendo grids within partial views like me, you can run into VERY weird errors, like `Cannot convert null to Guid because it is a non-nullable value type'

Tsvetomir
Telerik team
commented on 23 Dec 2019, 11:49 AM

Hi Stephen,

The approach that you have provided correctly depicts how to create a custom button. It is important to point out that the suggestion previously provided targets the jQuery implementation of the widget.

Furthermore, whenever the built-in declaration is used for the initialization of certain buttons, specific classes are attached to those buttons. There is an internal logic that checks the interaction with these buttons and executes a certain functionality.  That is why unexpected behavior has been observed on your side.

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Stephen
Top achievements
Rank 1
commented on 23 Dec 2019, 03:02 PM

Makes a lot of sense.  Maybe it could be helpful to others if you edited your original code sample to add in a comment next to the `.Create()` line to explain something like:

//this line adds a new .Create button to your toolbar, only use if it makes sense for your data type

Tsvetomir
Telerik team
commented on 24 Dec 2019, 02:36 PM

Hi Stephen,

The Create button that is included in the toolbar of the grid serves the purpose of adding a new row to the data source of the grid. Depending on the specific scenario under which the grid is utilized, different prerequisites should be implemented. I am not completely sure what might be causing the issue in your case. Perhaps, you could share more details around the case so that I can examine those resources and get back to you with accurate suggestions.

Nevertheless, thank you for taking the time to share with the community the obstacles that you have encountered.

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Erik
Top achievements
Rank 1
Veteran
commented on 03 Nov 2020, 05:52 AM

 .ToolBar(toolbar =>
  {
      toolbar.Create();
      toolbar.Custom().Text("Click me").Action("myAction", "myController");
  })

 

When I try using that in ASP.NET Core, I get the following error message:

'GridToolBarCustomCommandBuilder' does not contain a definition for 'Action' and the best extension method overload 'UrlHelperExtensions.Action(IUrlHelper, string, object)' requires a receiver of type 'IUrlHelper'

How can I add a custom command to the grid toolbar in ASP.NET Core pls?

Erik
Top achievements
Rank 1
Veteran
commented on 03 Nov 2020, 06:16 AM

Sorry, I overlooked that this thread is in the "UI for ASP.NET MVC" Forum, my bad!
Tsvetomir
Telerik team
commented on 03 Nov 2020, 03:09 PM

Hi Erik,

It is correct that the option that you have used is not directly applicable in the ASP.NET Core environment. What I can recommend is that you actually handle the ".Click()" option of the button and within the JavaScript handler, perform a custom jQuery AJAX request. 

Let me know if additional assistance is needed.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Erik
Top achievements
Rank 1
Veteran
commented on 03 Nov 2020, 11:54 PM

Thanks for the suggestion, Tsvetomir.

I found this thread in the ASP.NET Core Forum, so I'll first follow up on the suggested approach in there, as I'd prefer to keep it out of javascript.

https://www.telerik.com/forums/adding-action-to-custom-toolbar-button

Erik

Tsvetomir
Telerik team
commented on 04 Nov 2020, 10:37 AM

Hi Erik,

The approach that you have shared from the other thread would substitute the whole toolbar template. Therefore, if you would like to use any of the built-in buttons with the ClientTemplate, you should have in mind that the ClientTemplate takes precedence and will ignore the buttons. Therefore, you should implement them manually, as well.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Erik
Top achievements
Rank 1
Veteran
commented on 06 Nov 2020, 05:11 AM

Hello Tsvetomir,

Yes, I have just realized that. :-(

I use my grid in Batch-mode, so with the approach in the other thread I'd lose the Save / Cancel changes buttons in the toolbar.

Can you pls. elaborate on your suggested approach (i.e. to handle the ".Click()" option of the button and within the JavaScript handler, perform a custom jQuery AJAX request). Some sample code that achieves the equivalent of ...

Action("myAction", "myController");

...would be greatly appreciated.

Thx,

Erik

Anton Mironov
Telerik team
commented on 09 Nov 2020, 12:56 PM

Hello Erik,

My name is Anton and I will make my best to assist with the requirement below, during the absence of my colleague Tsvetomir.

In order to use a button click handler to send an Ajax request, I would recommend the following approach:

In the example below, the "dataSource" of the Kendo UI Grid will be sent in JSON format to a method called "GetGridInfo" in the "GridController":

    function onClick() {
        var grid = $("#kendogrid").data("kendoGrid");
		
	// Get the dataSource of the Grid
        var dataSource = grid.dataSource;

	// Parse the data of the dataSource to JSON format
        var rows = JSON.stringify({ 'rows': dataSource.data().toJSON() });

	// Building and execution the Ajax request
        $.ajax({
            url: "/Grid/GetGridInfo",
            data: rows,
            dataType: "json",
            type: "POST",
            contentType: 'application/json;'
        });
    }
Give the approach above a try and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Lucho
Top achievements
Rank 1
answered on 06 Apr 2021, 08:02 AM

Hi. Why this code

 

toolbar.Custom()
                                .HtmlAttributes(new { @class = "btn btn-primary" })
                                .Text("<a href='" + Url.Action("GetAddOrUpdate", "Applications") + "'><i class='k-icon k-i-plus color-primary'></i>" + Resource.Add + "</a>");

 

Show up like this

 

0
Lucho
Top achievements
Rank 1
answered on 06 Apr 2021, 08:05 AM

 I don't see how to edit my post, so posting a new one.

It seems to display correclty like this

 

toolbar.Custom()
                                .HtmlAttributes(new { @class = "btn btn-primary" })
                                .Text("<i class='k-icon k-i-plus color-primary'></i>" + Resource.Add);

 

But why the above code doesn't?

0
Anton Mironov
Telerik team
answered on 08 Apr 2021, 06:54 AM

Hello Lucho,

I am not sure that I understand your question. Could you please provide more details?

As I can see from the last two responses, you are asking for the differences between the implementation code? I can see that the first one is calling an Action in the Controller and the second one not.

Let me know how could I assist you further.

Kind Regards,
Anton Mironov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Lucho
Top achievements
Rank 1
answered on 08 Apr 2021, 07:01 AM

Hello Anton,

Yes, that the difference and i was wandering why can i set Action for the custom toolbar button with the <a> tag.

I can, but as you can see in the image there is one extra small button that is showing on the toolbar.

I was reading somewhere that in the ASP.Net Core Kendo there is no .Action() on the Custom toolbar button.

I implemented the link for the Custom toolbar button with JS, but is there a better way?

0
Anton Mironov
Telerik team
answered on 09 Apr 2021, 03:15 PM

Hello Lucho,

In order to achieve the desired behavior, I would recommend using the following implementation.

  1. Use a Toolbar Template for the Toolbar of the Kendo UI Grid.
  2. Implement a button in the Template.
  3. In the "click" event handler of the button, send the needed data to the required Action in the Controller with the help of an Ajax request. Here is an example of the event handler:
        function onClick() {
            var grid = $("#kendogrid").data("kendoGrid");
    		
    		// Get the dataSource of the Grid
            var dataSource = grid.dataSource;
    
    		// Parse the data of the dataSource to JSON format
            var rows = JSON.stringify({ 'rows': dataSource.data().toJSON() });
    
    		// Building and execution the Ajax request
            $.ajax({
                url: "/Grid/GetGridInfo",
                data: rows,
                dataType: "json",
                type: "POST",
                contentType: 'application/json;'
            });
        }

I hope this information helps. Let me know if a sample implementation for the approach above is needed and I will prepare it for you.

Best Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Lucho
Top achievements
Rank 1
answered on 16 Apr 2021, 06:52 AM

Hi. I  was looking for some native implementation, i have done in with JS already and it works ok.

Its little odd that the toolbar.Custom() creates <a tag but we cant set it's Action as it used to be the case in pre core kendo mvc.

0
Anton Mironov
Telerik team
answered on 19 Apr 2021, 04:02 PM

Hello Lucho,

I confirm that in this case, using a JavaScript function is the recommended approach.

The custom implementation of the Kendo UI Toolbar is implemented by our developers' team. Any further required implementations, or updates, could be pointed for reviewing in our FeedBack Portal. Most voted suggestions are considered for implementation.

If assistance for anything else is needed, do not hesitate to contact me and the team.

 

Greetings,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Lucho
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or