Grid - Can I have two create buttons

4 posts, 0 answers
  1. Debby
    Debby avatar
    2 posts
    Member since:
    Aug 2017

    Posted 04 Dec 2017 Link to this post

    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>

  2. Stefan
    Admin
    Stefan avatar
    2922 posts

    Posted 06 Dec 2017 Link to this post

    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.
  3. Debby
    Debby avatar
    2 posts
    Member since:
    Aug 2017

    Posted 11 Dec 2017 in reply to Stefan Link to this post

    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>
  4. Kevin
    Kevin avatar
    4 posts
    Member since:
    Aug 2017

    Posted 12 Dec 2017 in reply to Debby Link to this post

    Thanks Debby, Your answer is very helpful.
Back to Top