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

[Bobby]

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?

[Dimiter Madjarov]

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

[Bobby]

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.

[Dimiter Madjarov]

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

[caleb]

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

[Dimiter Madjarov]

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

 

 

[caleb]

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.

[Dimiter Madjarov]

Hello Caleb,

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

Regards,
Dimiter Madjarov
Telerik

 

 

[Oleksandr]

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

[Dimiter Madjarov]

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