This is a migrated thread and some comments may be shown as answers.

Default create command in toolbar template

21 Answers 1388 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Laurens
Top achievements
Rank 1
Laurens asked on 26 Nov 2012, 12:48 PM
Hello,

I want to put the default button with the create command in a toolbar template with razor. How is this possible? I use the popup mode for editing.

21 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 29 Nov 2012, 10:31 AM
Hi Laurens,

Basically the Grid uses Delegate to attach click event handler which calls the AddRow method to the item with class "k-grid-add". Please check the example below:

.ToolBar(toolbar => toolbar.Template("<a class='k-button k-button-icontext k-grid-add' href='#'><span class='k-icon k-add'></span>Add new record</a>"))

 
Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jim
Top achievements
Rank 1
answered on 08 Dec 2017, 03:55 PM
A minor thing, but for the "plus sign" to appear in your button as it does with Create(), use: <span class='k-icon k-i-add'></span>
0
Stefan
Telerik team
answered on 13 Dec 2017, 07:45 AM
Hello, Jim

Thank you for sharing this with the community.

I can assume that the difference is caused by the breaking change made in early 2017 after this post was made(2012).

More details can be found at the following link:

https://docs.telerik.com/kendo-ui/backwards-compatibility/2017-backward-compatibility#changes-from-2016-r3-sp2

Regards,
Stefan
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.
0
Jake
Top achievements
Rank 1
answered on 06 Aug 2018, 04:05 PM
@Vladimir, above you provide how to add the inline .create method. How do you add the popup create method via toolbar.template?
0
Stefan
Telerik team
answered on 08 Aug 2018, 06:10 AM
Hello, Jake,

When the Popup edit mode is used, the required code for adding a new row using the template is the same.

Regardless of the used mode, adding this button will add a new row(show popup for adding a new item) when clicked.

If the new row is still not added, try calling the addRow method when the button is clicked:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/addrow

Regards,
Stefan
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Neil
Top achievements
Rank 1
answered on 26 Feb 2020, 06:29 AM

Found a way the 'Search' with X button would work. Now, I just realized why i am missing my "Add New" button, spent significant time figuring out whether i've put some custom rule for it's 'show/hide' behavior...

The solution above gives me an error... 

 

0
Neil
Top achievements
Rank 1
answered on 26 Feb 2020, 06:30 AM
**forgot to attached the error msg...
Maybe i am missing something again....
0
Neil
Top achievements
Rank 1
answered on 26 Feb 2020, 06:46 AM
Never mind the error, i found what's causing it.
Now back to my original concern, how can i display the "toolbar.Create()" along with the "toolbar.Template()"? It seems like adding a "<span/>" for the button, I would need to addListener when the "<span/>" is clicked. It's loosing the purpose of 'toolbar.Create()'
0
Nikolay
Telerik team
answered on 28 Feb 2020, 12:54 PM

Hello Neil,

To add the "AddNew" button within the toolbar template, in the href attribute the path the Create method needs to be specified:

toolbar.Template(@<text>
    <a class="k-button k-button-icontext k-grid-add" href="/Grid/Editing_Create">
        <span class="k-icon k-i-add"></span>
        Add new record
    </a>
        </text>);

Please try this and let me know if you have further questions.

Regards,
Nikolay
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.
0
Neil
Top achievements
Rank 1
answered on 02 Mar 2020, 04:39 AM
Hi Nikolay,
Having this would display the button
0
Neil
Top achievements
Rank 1
answered on 02 Mar 2020, 04:47 AM
Hi Nikolay,
Having this will only display "A N" for "Add New".. and when clicked, the popup will not come instead it will redirect me to the url in href.

Actually, my original issue was the ability to display the "x" button in the searchbox(in the toolbar) as the user is typing in, and be able to clear the searchbox when the user click the "x". It would have been simpler, if you could add that functionality in like the one in the demo page.. :-) :-)
0
Neil
Top achievements
Rank 1
answered on 02 Mar 2020, 04:47 AM
0
Neil
Top achievements
Rank 1
answered on 02 Mar 2020, 04:49 AM
ok.. attaching my Add button.. 
0
Nikolay
Telerik team
answered on 04 Mar 2020, 03:29 PM

Hi Neil,

I already replied to the support thread submitted from you duplicating this forum thread but I will repost the answer here so others could benefit from it.

The clear button could be dynamically appended to the Search Panel input on the DataBound event of the Grid. For jQuery projects, this could be executed on $( document ).ready(). Here is the logic:

      function onDataBound(e) {
        var grid = e.sender;
        var clearButton = '<span class="k-link k-link-clear" aria-label="Clear the DateTimePicker"><span unselectable="on" class="k-icon k-i-close" aria-controls="dtp_timeview"></span></span>';

        grid.wrapper.find(".k-grid-search").append(clearButton);
        $(".k-link.k-link-clear").on("click", function(e) {
          $(".k-grid-toolbar .k-grid-search input").val("")
          $(".k-grid-toolbar .k-grid-search input").trigger("input")

        });
      }

I needed to adjust the styling as well:

.k-textbox .k-icon {
    top: 50%;
    margin: -8px -14px 0;
  }

Please note that the demo uses jQuery Grid but the implementation remains the same for MVC projects:

Regards,
Nikolay
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.
0
Neil
Top achievements
Rank 1
answered on 05 Mar 2020, 06:37 AM
Thanks for this.
I have my solution(mimicking the "search box" in the demo page).
My concern, at this point, is how the "Add" button looks... See above.
0
Neil
Top achievements
Rank 1
answered on 05 Mar 2020, 06:54 AM

By using Template, the other toolbar functions(toolbar.Create(), toolbar.Search()) seems no longer serves a purpose.
Actually, my original intention is to have that 'x' button in the searchbox, without affecting all other toolbar. I think the functionality is already there, just the 'x' icon that is missing..

0
Nikolay
Telerik team
answered on 09 Mar 2020, 12:58 PM

Hi Neil,

As pointed from my colleague in this forum thread we recommend sticking to the use of the built-in Search and Create functionalities. Declaring the toolbar as shown below and the approach from my previous reply will render the Add new button along with the Search Panel with the clear "x" button:

.ToolBar(t => { t.Search(); t.Create().Text("Add New"); })

Is there a specific reason you need to use a template for the toolbar? Knowing more about the use-case will help me give the most suitable solution.

Looking forward to your reply.

Regards,
Nikolay
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.
0
Neil
Top achievements
Rank 1
answered on 10 Mar 2020, 04:12 AM
I wish i could.. I would have not bothered going through the forums..
But I need something like the one attached.
Anyway, I think i figured why my button's text does not display well...
0
Neil
Top achievements
Rank 1
answered on 10 Mar 2020, 04:50 AM

Following up on the search button, how do you do search for specific column in the grid?

or, how do you like the below in js?
.Search(s => { s.Field(c => c.title).Field(d => d.url); })

0
Nikolay
Telerik team
answered on 12 Mar 2020, 03:17 PM

Hi Neil,

The fields configured in the search could be configured in the jQurry Grid as shown below:

$("#grid").kendoGrid({
            toolbar: ["search"],
            search: {
    		fields: ["Country"] // Or, specify multiple fields by adding them to the array, e.g ["name", "age"] },

A live demo could be observed in the following Dojo: https://dojo.telerik.com/EgEYUcuR/2 

Regards,
Nikolay
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.
0
Neil
Top achievements
Rank 1
answered on 14 Mar 2020, 04:05 AM
Thank you..
Tags
Grid
Asked by
Laurens
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Jim
Top achievements
Rank 1
Stefan
Telerik team
Jake
Top achievements
Rank 1
Neil
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or