Default create command in toolbar template

22 posts, 0 answers
  1. Laurens
    Laurens avatar
    1 posts
    Member since:
    Oct 2012

    Posted 26 Nov 2012 Link to this post

    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.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 29 Nov 2012 Link to this post

    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!
  3. Jim
    Jim avatar
    2 posts
    Member since:
    Aug 2011

    Posted 08 Dec 2017 in reply to Vladimir Iliev Link to this post

    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>
  4. Stefan
    Admin
    Stefan avatar
    3073 posts

    Posted 13 Dec 2017 Link to this post

    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.
  5. Jake
    Jake avatar
    1 posts
    Member since:
    May 2018

    Posted 06 Aug 2018 Link to this post

    @Vladimir, above you provide how to add the inline .create method. How do you add the popup create method via toolbar.template?
  6. Stefan
    Admin
    Stefan avatar
    3073 posts

    Posted 08 Aug 2018 Link to this post

    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.
  7. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 26 Feb 2020 in reply to Stefan Link to this post

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

     

  8. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 26 Feb 2020 in reply to Neil Link to this post

    **forgot to attached the error msg...
    Maybe i am missing something again....
  9. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 26 Feb 2020 in reply to Neil Link to this post

    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()'
  10. Nikolay
    Admin
    Nikolay  avatar
    324 posts

    Posted 28 Feb 2020 Link to this post

    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.
  11. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 01 Mar 2020 in reply to Nikolay Link to this post

    Hi Nikolay,
    Having this would display the button
  12. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 01 Mar 2020 in reply to Nikolay Link to this post

    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.. :-) :-)
  13. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 01 Mar 2020 in reply to Neil Link to this post

    attaching the demo page's searchbox
  14. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 01 Mar 2020 in reply to Neil Link to this post

    ok.. attaching my Add button.. 
  15. Nikolay
    Admin
    Nikolay  avatar
    324 posts

    Posted 04 Mar 2020 Link to this post

    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.
  16. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 05 Mar 2020 in reply to Nikolay Link to this post

    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.
  17. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 05 Mar 2020 in reply to Neil Link to this post

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

  18. Nikolay
    Admin
    Nikolay  avatar
    324 posts

    Posted 09 Mar 2020 Link to this post

    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.
  19. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 09 Mar 2020 in reply to Nikolay Link to this post

    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...
  20. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 09 Mar 2020 Link to this post

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

  21. Nikolay
    Admin
    Nikolay  avatar
    324 posts

    Posted 12 Mar 2020 Link to this post

    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.
  22. Neil
    Neil avatar
    38 posts
    Member since:
    Dec 2019

    Posted 13 Mar 2020 in reply to Nikolay Link to this post

    Thank you..
Back to Top