Is there a way to setup overflow on a ButtonGroup?
<div class="demo-section k-content" >
@(Html.Kendo().ButtonGroup()
.Name("DashboardNavigate-select")
.HtmlAttributes(new { style = " display:" + displayToolbar + "; " })
.Items(t =>
{
foreach (KeyValuePair<string, string> kvp in Model.ButtonList)
{
t.Add().Text(kvp.Value).HtmlAttributes(new { datavalue = kvp.Key.ToString() });
}
})
.Events(events => events.Select("buttonNavigateNew"))
)
</div>
I find this particular component anti-MVC as it is not offering features compared to every other Kendo UI MVC components. I need to have it bind to a model's property and generate button(s) from a data source. Each generated button can be customized like a Grid's columns are customized using the HtmlHelper. This is how I use it right now:
<
div
class
=
"row"
>
<
div
class
=
"col-sm-12"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.PaymentModeId, new { @class = "control-label" })
@(Html.Kendo().ButtonGroup()
.Name("PaymentModeTest")
.HtmlAttributes(new { @class = "form-control" })
.Selection("single")
.Index(0)
.Items(t =>
{
t.Add().Text("Cash");
t.Add().Text("Cheque");
t.Add().Text("Debit");
t.Add().Text("Free");
t.Add().Text("Credit Card");
t.Add().Text("eDirham");
})
.Events(ev => ev.Select("UpdateUiPaymentMode"))
)
</
div
>
</
div
>
</
div
>
Here is the binding trick:
<
input
type
=
"hidden"
name
=
"PaymentModeId"
id
=
"PaymentModeId"
value
=
1
/>
And the JS:
@section Scripts
{
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
'#divPaymentModeCheque'
).hide();
$(
'#divPaymentModeDebit'
).hide();
$(
'#divPaymentModeCreditCard'
).hide();
$(
'#divPaymentModeEDirham'
).hide();
});
function
UpdateUiPaymentMode(e) {
// 0: Cash, 1
// 1: Cheque, 2
// 2: Debit, 3
// 3: Free, 4
// 4: Credit Card, 5
// 5: e-Dirham, 9
$(
'#divPaymentModeCheque'
).hide();
$(
'#divPaymentModeDebit'
).hide();
$(
'#divPaymentModeCreditCard'
).hide();
$(
'#divPaymentModeEDirham'
).hide();
switch
(e.indices.toString()) {
case
"0"
:
// Cash
$(
'#PaymentModeId'
).val(1);
break
;
case
"1"
:
// Cheque
$(
'#divPaymentModeCheque'
).show();
$(
'#PaymentModeId'
).val(2);
break
;
case
"2"
:
// Debit
$(
'#divPaymentModeDebit'
).show();
$(
'#PaymentModeId'
).val(3);
break
;
case
"3"
:
// Free
$(
'#PaymentModeId'
).val(4);
break
;
case
"4"
:
// Credit Card
$(
'#divPaymentModeCreditCard'
).show();
$(
'#PaymentModeId'
).val(5);
break
;
case
"5"
:
// eDirham
$(
'#divPaymentModeEDirham'
).show();
$(
'#PaymentModeId'
).val(9);
break
;
}
}
</script>
}
Simple use case; a pretty common one I would assume:
I have more than one kendo button displayed within an MVC view. When one of the buttons fires the "submit" event, I want to be able to grab a handle on which button fired the submit from within my controller. I had assumed that you could assign "button" to the name attribute and then determine through the button's "value" property which button fired the event.
The controller signature would look like this:
[HttpPost]
public ActionResult(string button) { determine course of action based on button's value property...}
I'm actually taken back at the fact that one of the most fundamental uses of the input button type is simply not given any means to do this simply. Of course, I could be blind and missing something, but I've searched forums and Telerik documentation and found little if anything on performing this basic task.
Thanks!