Getting Error while opening the popup window from custom toolbar button

[saroj]

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>

[Petur Subev]

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

[saroj]

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" });
        })
    ) 

[Petur Subev]

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

[Navin]

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

Thanks

[anupama]

Does any body solved this?i am having the same issue.click handler is not triggering

[Viktor Tachev]

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