How do I generate unique button names within a display template?

10 posts, 0 answers
  1. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 30 Jan 2014 Link to this post

    I have the following code in a Practice Display Template:

    @(Html.Kendo().Button()
        .Name("StartPracticeLinkButton")
        .Tag("a")
        .HtmlAttributes(new { href = Url.Action("Practice", "Practices", routeValues: new { id = Model.ID }) })
        .Content("Start Now")
    )

    I am typically going to have more than one practice displayed on the "page" as this is a display template.  The issue I am having is that the .Name("StartPracticeLinkButton") is not unique.  Therefore, only the first button gets converted into the Kendo Button while the rest of the buttons are ignored and left as simple links.

    Looking through the Kendo UI documation, I can't seem to find the correct method to call in order to make the name unique.  Surely Kendo UI has a built-in way to handle this?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 31 Jan 2014 Link to this post

    Hello Bobby,


    Kendo UI has a built in guid() JavaScript method, that could be used in the Web version of the widget. In the current case you could use the C# NewGuid() method to generate the unique name.
    E.g.
    @(Html.Kendo().Button()
        .Name("textButton" + Guid.NewGuid())

    I hope this information helps.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 03 Feb 2014 Link to this post

    It’s a pity that I have to manually come up with my own unique name scheme.  While doable, it would be much cleaner to have the .Name()
    method automatically handle it or at the very least have an overload to .Name() that would selectively enable a unique name scheme.

    It’s surprising that WebForms has such an elegant solution built-in while nothing seems to exist for MVC.  I was looking forward to the Telerik MVC helpers resolving this short coming; but, evidently it doesn’t.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 04 Feb 2014 Link to this post

    Hi Bobby,


    One of the main goals of Kendo UI is for it to be as lightweight and fast as possible. This is the reason why many tasks, that could be easily achieved with pure C# (or jQuery) are not included as built in functionality.

    If you are experiencing any further issues, do not hesitate to contact us.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. caleb
    caleb avatar
    30 posts
    Member since:
    Sep 2011

    Posted 11 Dec 2015 in reply to Dimiter Madjarov Link to this post

    Hello there!

     

    I'm using the Kendo UI had have a very similar problem with the DropDownFor(x =>x.[dropdown]) control.  I've got a page with many dropdowns on it and the dropdown style is only getting applied to the first control.  I've followed the recommendation here and added the .Name("[Name]" + Guid.NewGuid()) and am still getting dropdowns that are not styled.  The dropdowns end up acting like text inputs.

     

    Any clues on how I might solve this?  Would a video assist?

    Thanks so much,

    Caleb

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 14 Dec 2015 Link to this post

    Hello Caleb,

    When the DropDownListFor helper is used, it's name is set automatically in order to match the edited property, which is mandatory for it's proper functioning. This is why I do not recommend the previously mentioned approach in this case. You could check the developer tools console of your browser, which will most likely provide further information about the styling issue (e.g. a JavaScript error).

    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. caleb
    caleb avatar
    30 posts
    Member since:
    Sep 2011

    Posted 19 Dec 2015 in reply to Dimiter Madjarov Link to this post

    Hello gang,

     

    The problem I was having had to do with a partial view returning cached data.  This was causing the style not to be applied correctly.  I am making a AJAX request to the server to get the data.  So I did the following:

    $("#addApplicant").bind('click', function () {
        var Id = new Date().getTime();
        $.ajax({
            Method: "POST",
            async: false,
            data: { Id: Id },
            url: '../NewApplicant/CreateNewApplicant'
        }).success(function(partialView) {
            $('#newApplicants').append(partialView);
        })
    });

    And the controller signature looks like:

    public ActionResult CreateNewApplicant(String Id)

    All works perfectly now.  No name attribute on the control.

    Thanks for such a wonderful toolset.

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 Dec 2015 Link to this post

    Hello Caleb,

    Thanks for the update and the nice words. Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Oleksandr
    Oleksandr avatar
    7 posts
    Member since:
    Oct 2008

    Posted 04 Aug Link to this post

    Hello Dimiter,

    Thank you for direction to use Guid in id and name attributes, that must work for rendering HTML. But how will those values be bound back to server model on postback (in case I would use the same approach for inputs for example)? I'm sure standard MVC model binder will get confused if I send elements with ID="People[{GUID1}].Name" instead of "People[0].Name".
    Does Telerik have a custom ASP.NET MVC model binder to bind arrays in this way? And how would it order that array, having no indexes? Alternatively I could think of some custom javascript to preprocess inputs with GUID ids and set ints instead just before the postback... 

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 05 Aug Link to this post

    Hello Oleksandr,

    Indeed in the case of input elements you could iterate them after the widgets are initialized and set the desired name attributes, while the ids remains unique.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready