Default create command in toolbar template

[Laurens]

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.

[Vladimir Iliev]

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

[Jim]

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>

[Stefan]

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

[Jake]

@Vladimir, above you provide how to add the inline .create method. How do you add the popup create method via toolbar.template?

[Stefan]

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

[Neil]

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

 

[Neil]

**forgot to attached the error msg...
Maybe i am missing something again....

[Neil]

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()'

[Nikolay]

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

[Neil]

Hi Nikolay,
Having this would display the button

[Neil]

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.. :-) :-)

[Neil]

attaching the demo page's searchbox

[Neil]

ok.. attaching my Add button.. 

[Nikolay]

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:

• https://dojo.telerik.com/aWOBiMeT

Regards,
Nikolay
Progress Telerik

[Neil]

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.

[Neil]

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

[Nikolay]

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

[Neil]

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

[Neil]

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); })

[Nikolay]

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

[Neil]

Thank you..