This is a migrated thread and some comments may be shown as answers.

Grid - Can I have two create buttons

3 Answers 296 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Debby
Top achievements
Rank 1
Debby asked on 04 Dec 2017, 05:21 PM

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>

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 06 Dec 2017, 01:40 PM
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
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.
0
Debby
Top achievements
Rank 1
answered on 12 Dec 2017, 12:21 AM
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>
0
Kevin
Top achievements
Rank 1
answered on 12 Dec 2017, 04:18 PM
Thanks Debby, Your answer is very helpful.
Tags
Grid
Asked by
Debby
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Debby
Top achievements
Rank 1
Kevin
Top achievements
Rank 1
Share this question
or