Grid - Can I have two create buttons

[Debby]

Hi All.

I am new to using the Telerik controls. I am exploring using the Grid Control and have figured out how to codoe popup window to create a new record.

The following code works below for the first Create button on the toolbar. On the grid toolbar - I want to have two "Create" buttons (see code below). I want  both buttons to implement "Create" but  displays a different custom popup form for each button.

 Is there a way to implement a conditional "Create"? What is the best approach to implement this functionality?

Thank you,

Debby

 

<div id="divGridUser">
@(Html.Kendo().Grid(Model)
.Name("GridTest")
.Columns(columns =>
{
columns.Bound(p => p.UserId);
columns.Bound(p => p.UserType);
columns.Bound(p => p.UserName).Title("User Name");
columns.Bound(p => p.Provider).Title("Provider");
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add Provider To Role").HtmlAttributes(new { id = "Provider"});
toolbar.Create().Text("Add  Inside User Role");
})
.Editable(et => et.Mode(GridEditMode.PopUp).TemplateName("Users_Command"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p=>p.UserId))
.Read(read => read.Action("UsersCommand_Read", "Popup"))
.Create(upd => upd.Action("UsersCommand_Create", "Popup"))
)
.HtmlAttributes(new { style = "height:550px;" })
.Pageable(pageagble => pageagble.Input(true).Numeric(false))
.Sortable()
.Filterable()
.Scrollable(scr => scr.Endless(true))
)
</div>

[Stefan]

Hello, Debby,

Thank you for the description.

In general, this could be achieved only by using an additional custom logic and the PopUp Template.

The template will contain two "div" elements corresponding to the two buttons. Then jQuery has to be used to subscribe to the Create buttons click events. Then inside the event depending on which buttons is clicked, one of the divs should receive CSS rule display none and the other will be set as visible.

Template file

<div id="addProviderToRole">
//the desired fields when the Add Provider To Role button is clicked
</div>
<div id="addInsideUserRole">
//the desired fields when the Add Inside User Role button is clicked
</div>

Attaching the event listener could be made on the dataBound event:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

The following link shows how to make a custom PopUp editor:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor

If additional assistance is needed, please provide a fully runnable example and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Debby]

Stefan,
Thank you for your quick response.
I am posting my solution here in case anyone is interested in how I solved the issue. The solution turned out to be easier than I expected.
As suggested, I used a template for the popup. I used the toolbar template to create the two buttons and set values in two textboxes (I will change then to Hidden). Then in the template view, checked the values of the textboxes and used show()/hide() to display the appropriate divs.
 -------------------------------------------------------------------------------------------------------
Here is the Index.cshtml:
@model IEnumerable<TelerikTwoCreateButtonExample.Models.UserInfo>
@{
ViewBag.Title = "Grid Example";
}
<script type="text/javascript">
function SetDivs(OneDiv, TwoDiv) {
  $('#TestOne').val(OneDiv);
  $('#TestTwo').val(TwoDiv);
}
< /script>
<h2>Grid Example</h2>
@using (Html.BeginForm("Index","GridExample", FormMethod.Post, new { id="frmGrid" } ))
{
< div>
@Html.TextBox("TestOne", -1)
@Html.TextBox("TestTwo", -1)
< /div> <br />
< div id="GridUsers">
@(Html.Kendo().Grid(Model)
.Name("GridUsers")
.Columns(col =>
{
col.Bound(p => p.UserId).Width(100).Title("ID");
col.Bound(p => p.UserName).Width(300);
col.Bound(p => p.Company).Width(300);
col.Bound(p => p.UserType);
col.Bound(p => p.showOneDiv);
col.Bound(p => p.showTwoDiv);
})
.ToolBar(tb =>
{
tb.Template("<a class='k-button k-button-icontext k-grid-add' onclick='SetDivs(1,0)' href='#'><span class='k-icon k-i-add'></span>Add Outside User</a>" +
"<a class='k-button k-button-icontext k-grid-add' onclick='SetDivs(0,1)' href='#'><span class='k-icon k-i-add'></span>Add In-house User</a>");
})
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("tmpUsers"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.UserId))

.Read(read => read.Action("UserInfo_Read", "GridExample")))
//.Events(ev=>ev.Edit("dataBound"))
//.Events(ev => ev.DataBound("dataBound"))
)
< /div>
}
-------------------------------------------------------------------------------------------------------
Here is the tmpUsers.cshtml (template file)
<script>
$(document).ready(function () {
if ( $('#TestOne').val() == 1)
{
$('#divOne').show();
$('#divTwo').hide();
}
if ($('#TestTwo').val() == 1)
{
$('#divOne').hide();
$('#divTwo').show();
}
});
< /script>
< div id="divOne">
divONE
< /div>
< div id="divTwo">
divTwo
< /div>

[Kevin]

Thanks Debby, Your answer is very helpful.