toolbar with custom button

[Daniel]

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]

Hello,
How would you do this with a Kendo UI Grid built in Javascript. Can you point me to some examples...?

[Dimiter Madjarov]

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

[Dimiter Madjarov]

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

[Daniel]

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]

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

[Daniel]

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]

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

[Daniel]

Ok,thank you,i will try out your ideea.

[hans]

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]

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

 

 

[Stephen]

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]

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

[Stephen]

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]

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

[Erik]

 .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]

Sorry, I overlooked that this thread is in the "UI for ASP.NET MVC" Forum, my bad!

[Tsvetomir]

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

[Erik]

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]

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

[Erik]

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]

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

[Lucho]

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

 

[Lucho]

 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?

[Anton Mironov]

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

[Lucho]

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?

[Anton Mironov]

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

[Lucho]

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.

[Anton Mironov]

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

[Stefan]

Just bring back the Action method shouldn't be that complicated, should it?

[Anton Mironov]

Hi Stefan,

Could you please share the requirements for the case.

Once I have the required scenario, will try my best to achieve it for the case.

If a Custom ToolBar is needed, please observe the implementation and the result of the following demo:

• https://demos.telerik.com/aspnet-mvc/grid/toolbar-template

Looking forward to hearing back from you.


Kind Regards,
Anton Mironov