Getting Error while opening the popup window from custom toolbar button

7 posts, 0 answers
  1. saroj
    saroj avatar
    39 posts
    Member since:
    Oct 2011

    Posted 02 Apr 2013 Link to this post

    Hi Guys,

    I have added  toolbar.Create() and toolbar.custom() button on grid and redirected to open popup window from custom button,then  it opens popup window for 1 second and gives the error as attached. My code is below.

     .DataSource(dataSource => dataSource
                .Read(read => read.Action("_ServiceRegimeSequenceList", "ServiceRegimeSequenceList"))
                .Update(update => update.Action("_ServiceRegimeSequenceEdit", "ServiceRegimeSequenceList"))
                .Create(create => create.Action("_ServiceRegimeSequenceCreate", "ServiceRegimeSequenceList"))
                .Destroy(destroy => destroy.Action("_ServiceRegimeSequenceDelete", "ServiceRegimeSequenceList"))
            )
     .ToolBar(toolbar =>
                     {
                         toolbar.Create().HtmlAttributes(new { @id = "AddbuttonID", @style = "color: black;" });
                         toolbar.Custom().Name("Create kit").HtmlAttributes(new { @id = "CreatekitID" });
                       
                     })

    @(Html.Kendo().Window()
            .Name("window")
            .Width(830)
            .Height(315)
            .Draggable()
            .Resizable()
            .Modal(true)
            .Title("Create Kit")
            .Actions(actions => actions.Refresh().Maximize().Close())
                .Content(@<text>
            <div id="workshopKitModalWindow">
            </div>
            </text>)
        )
    <script type="text/javascript">
    $(document).ready(function () {
            $("#CreatekitID").click(function (e) {
                $("#workshopKitModalWindow").load('@Url.Action("","")');
                $("#window").data("kendoWindow").center().open();
            });

        });
    </script>
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 04 Apr 2013 Link to this post

    Hello Saroj,

    What exactly is the error, I do not see any error message? How does the action method that serves the partial page look like and how that the View that it renders look like? Are you sure that the Layout is excluded ?

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. saroj
    saroj avatar
    39 posts
    Member since:
    Oct 2011

    Posted 04 Apr 2013 Link to this post

    Hi petur,

    It is simple kendo grid with create button and custom button in toolbar, custom button should give me popup window. 

    When i click that custom button, it doesnot open popup window, it redirects to the action of create button and i get the screen as in the attached file above.

    It's simple i am just trying to open popup window from the custom button name "Create kit", which is not allowing me to do so, if there is Create button also.

    I want both Create and custom button together in the grid toolbar. Create button is working fine but if i click custom button name "Create kit" it is not giving me popup window,  I just want blank popup window if it is clicked.

    Below is my partial page:

    <script type="text/javascript"> 
    $(document).ready(function () {
            $("#CreatekitID").click(function (e) {
                $("#workshopKitModalWindow").load('@Url.Action("RegimeSequenceCreateKit","KitList")');
                $("#window").data("kendoWindow").center().open();
            });

        });
    </script> 

    @(Html.Kendo().Window()
            .Name("window")
            .Width(1100)
            .Height(400)
            .Draggable()
            .Resizable()
            .Modal(true)
            .Title("Create Kit")
            .Actions(actions => actions.Close())
                .Content(@<text>
            <div id="workshopKitModalWindow">
            </div>
            </text>)
        )

    @(Html.Kendo().Grid<ServiceRegimeSequence>()
            .Name("ServiceRegimeSequenceList_" + ViewData["ServiceRegimeId"])
            .Sortable()
            .Pageable(paging =>
            {
                paging.Enabled(true);
                paging.Info(true);
                paging.PageSizes(true);
                paging.Numeric(true);
                paging.PreviousNext(true);
                paging.Refresh(true);
                paging.PageSizes(new int[5] { 5, 10, 15, 20, 25 });
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Events(events =>
                {
                    events.RequestEnd("onServiceRegimeSequenceListRequestEnd");
                    events.Error("onServiceRegimeSequenceListError");
                    events.Change("onServiceRegimeSequenceListChange");

                })
                .PageSize(15)
                .Model(model =>
                {
                    model.Id(f => f.REGIME_SEQ_ID);
                    model.Field(f => f.REGIME_ID).DefaultValue(ViewData["ServiceRegimeId"]);
                    model.Field(f => f.SEQUENCE).DefaultValue(ViewData["Sequence"] != null ? (short)ViewData["Sequence"] : (short)1);
                })
                .Read(read => read.Action("_ServiceRegimeSequenceList", "ServiceRegimeSequenceList", new { serviceRegimeId = ViewData["ServiceRegimeId"] }))
                .Update(update => update.Action("_ServiceRegimeSequenceEdit", "ServiceRegimeSequenceList"))
                .Create(create => create.Action("_ServiceRegimeSequenceCreate", "ServiceRegimeSequenceList"))
                .Destroy(destroy => destroy.Action("_ServiceRegimeSequenceDelete", "ServiceRegimeSequenceList"))
            )
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
            .ToolBar(toolbar =>
                     {
                         toolbar.Create().HtmlAttributes(new { @id = "AddbuttonID", @style = "color: black;" });
                         toolbar.Custom().Name("Create kit").HtmlAttributes(new { @id = "CreatekitID" });
                       
                     }) 

            .Editable(editable =>
            {
                editable.Mode(GridEditMode.InLine);
            })
            .Reorderable(reorder => reorder.Columns(true))
            .Filterable()
            .Columns(columns =>
            {
                columns.Bound(f => f.REGIME_ID).Hidden(true);
                columns.Bound(f => f.SEQUENCE).Title("Sequence").Width("120px");
                columns.Command(command =>
                {
                    
                    command.Edit();
                    command.Destroy();
                }).Width(200).Title("Commands").HeaderHtmlAttributes(new { @style = "text-align:center" });
            })
        ) 
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 Apr 2013 Link to this post

    Hello Saroj,

    Did you check if the click handler is executed at all? I suspect that you will need to prevent the default behavior.
    e.g.

    <script type="text/javascript">
        $(function () {
            $('#CreatekidID').click(function () {
                alert(1);
                return false;
            })
        })
    </script>

    Regarding the loading of the Window you will need to use the client object of the window and more specifically the refresh method instead of the load method jQuery provides.

    http://docs.kendoui.com/api/web/window#methods-refresh


    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Navin
    Navin avatar
    12 posts
    Member since:
    Dec 2012

    Posted 15 Aug 2013 Link to this post

    The click event is not registering. How did you get this to work?

    Thanks
  6. anupama
    anupama avatar
    1 posts
    Member since:
    Dec 2015

    Posted 21 Dec 2016 Link to this post

    Does any body solved this?i am having the same issue.click handler is not triggering
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1526 posts

    Posted 23 Dec 2016 Link to this post

    Hello,

    Would you send us a dojo example or a runnable project where the issue you are seeing is replicated? This way we will be able to examine the code and look for what is causing the behavior.

    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top