Grid Modal Window

[Uma]

Hi,
I'm new to telerik extensions for asp.net mvc. Is there any demo for telerik grid which uses modal window? Thanks in advance.

[Uma]

Any suggestions? Please i need help in achieving the functionality.

[Andy McShane]

Hi, I have used jQuery and Thickbox to produce this functionality. (a quick google search will show where to download them from). Below is an example of how i implemented this;

<%= Html.Telerik().Grid(Model)
        .Name("UsersGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.UserId).Format(Html.ActionLink(ViewData["txtEdit"].ToString(), "Edit", "ServiceUser",
                                                                  new { id = "{0}", height = 550, width = 900, modal = "true" },
                                                                  new { @class = "t-link action-edit thickbox" })).Title(" ").Encoded(false).Width(25)
                                                                                                                   .Sortable(false)
                                                                                                                   .Filterable(false)
                                                                                                                   .HtmlAttributes(new { @style = "text-align:center" });
            columns.Bound(o => o.UserName).Title(ViewData["txtUsername"].ToString());
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "ServiceUser"))
        .Filterable()
        .Pageable(paging => paging.PageSize(13))
        .Sortable()
%>

Clicking on edit opens up a modal window to do with what you want.

Hope this helps get you started!

[Uma]

Hi McShane,
Thanks for you reply. It worked, now i'm able to open up modal window on both Edit and Add scenarios. But in case any validation fires against the model, i'm returning the view(partial) with the model in controller action. Here the problem comes, the parent view was lost and the modal window is rendering as a complete View. Any idea about this error?

[Andy McShane]

Yes, I know exactly what you mean. You must wrap the contents of your partial view inside of an Ajax form. For example;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ServiceProviderViewModel>" %>
<%@ Import Namespace="PPMSII.Models" %>
<div id="serviceProviderArea">
    <% using (Ajax.BeginForm("Create", "ServiceProvider", null, new AjaxOptions { UpdateTargetId = "serviceProviderArea" }, new { @id = "providerFrm" }))
       { %>

YOUR CODE GOES HERE


    <%= Html.ValidationSummary() %>
    <% } %>
</div>

This will take care of your post issue.

[Uma]

Hi McShane,
Thanks for your reply. It worked but still i have issue with success scenario. The parent view is opening in the Model window incase of successful submission. The following is my controller code:

 

 

[

HttpPost]

 

 

public ActionResult Add(EditableLocation model)

 

{

 

    if (ModelState.IsValid)

 

    {

 

        try
        {

 

            _repository.CreateLocationDetails(model);

            _repository.Save();

 

            return RedirectToAction("Index");

 

        }

 

    catch
        {

 

            ModelState.AddModelErrors(model.GetRuleViolations());

        }

    }

    //Incase of any validation failure

 

    return PartialView("Add", model);

 

}

I think the way i'm returning to the parent View is not correct. Please suggest me. Thanks in advance.

[Andy McShane]

Sorry for the late reply, been away from my office. The best that I have found for is upon succesful completion of an operation via the model window you return another partial view that has a confirmation message stating that the action completed OK and on this partialview you have a cancel button that closes the modal window. for eample;

public ActionResult Add(EditableLocation model)
{
    if (ModelState.IsValid)
    {
        try
        {
            _repository.CreateLocationDetails(model);

            _repository.Save();

            return PartialView("ModalConfirmation");
        }
     catch
        {
            ModelState.AddModelErrors(model.GetRuleViolations());
        }
    }

    //Incase of any validation failure
    return PartialView("Add", model);

}

And then in your confirmation partialview you can have whatever confirmation you want and a button that closes the modal window as follows;

<

 

input type="button" onclick="parent.tb_remove();" value="Close" />

This button will close the modal window. I hope this helps.

 

[Uma]

It worked.. Thank you very much.... But finally one question. On closing the Confirmation window, the grid not going to be refreshed right? How do we handle that??

[Andy McShane]

Ok, no problem, we can handle that also provided that you are binding your grid via AJAX. On your main page that you have your grid on you need to include the following javascript function on your page;

<script type="text/javascript">
    function refresh() {
        var grid = $('#{NAME Of YOUR GRID}').data('tGrid');
        grid.ajaxRequest();
    }
</script>

Make sure to put the name of your grid in place of {NAME Of YOUR GRID} i.e. '#MyGrid'.

Now in your modal confirmation window you change your button that closes the modal window as follows

<input type="button" onclick="self.parent.refresh();self.parent.tb_remove();" value="Close" />

This will now refresh the grid and close the modal window at the same time!

[Uma]

Hi McShane,
I really appreciate your prompt response. It worked. Thanks a lot. But i'm really wondered how the link's in grid are displaying. In the below code

columns.Bound(o => o.LocationId).Format(Html.ActionLink("Edit", "Edit", "Location",
                        new { id = "{0}", height = 550, width = 900, modal = "true" },
                        new { @class = "t-link action-edit thickbox" })).Title(" ").Encoded(false).Width(25)
                                                                         .Sortable(false)
                                                                         .Filterable(false)
                                                                         .HtmlAttributes(new { @style = "text-align:center" });

as the Format() is accepting only String value.So, i have changed the above line to

columns.Bound(o => o.LocationId).Format(Html.ActionLink("Edit", "Edit", "Location",
                        new { id = "{0}", height = 550, width = 900, modal = "true" },
                        new { @class = "t-link action-edit thickbox" }).ToString()).Title(" ").Encoded(false).Width(25)
                                                                         .Sortable(false)
                                                                         .Filterable(false)
                                                                         .HtmlAttributes(new { @style = "text-align:center" });

because of that change, in the grid the "Edit" link is just displaying as a string(but the Model window is opening on clicking).
Did you come across this issue?

[Uma]

Hi McShane,
I solved it. Thanks for all the support.

[Andy McShane]

Hi, I am glad it is all sorted for you. I apologise for not replying to your last request but unfortunately I have been away from my office for the last few days.

[Jigar]

Hi Andy,

I tried to use the code you gave, to open up model window.

But in my case it's not popup window rather it redirects to the the new edit page.

I think the code you have provided is to open custom popup (Like it opens when we click Edit command button in gird; when grid is editable in popup mode) in grid right?

Thanks,

Jigar.

[Uma]

Hi McShane,
Thanks for all your support. I'm trying to resize the modal window when confirmation partial view is displayed. It is not looking good when the confirmation message is displayed in that big modal window. I tried all the options to resize the modal window using javascript but no luck....
Do you have any suggestion to do this ???

[John]

Hey Uma, how did you get the link to work properly? Im trying to do the same thing.

[Uma]

Hi John,
Are you asking about the Link display issue? If that is the case, use the below code..just remove the
 

columns.Template(r =>
{%>
<%= Html.ActionLink("Edit","Edit", "Location",
        new { Id = r.LocationId, height = 550, width = 500, modal = "true" },
        new { @class = "thickbox" })%>
<%
}).Width(70);

Hope this helps...

Regards,
Uma

[Avdut]

Its giving me error when I use self.parent.refresh()
I also want to refresh my grid on modal close

<input type="button" value="Back to Orders" class="buttons" onclick="refreshgrid();" />

<script type="text/javascript">
function refreshgrid() {
       debugger;
        CancelMe();
        self.parent.refresh();
</script>

on my parent page i have below code

<% Html.Telerik().Grid<Cgx.Pabst.Allocation.BusinessEntity.PromotionOrder>(Model)

        .Name("PromotionOrderGrid")
        .DataKeys(dataKeys => dataKeys.Add(c => c.OrderId))
        .DataBinding(dataBinding => dataBinding
            .Ajax()
            .Select("GridDisplaySorting", "PromotionOrder", new { id = Convert.ToInt32(Session["PromotionID"] ?? 0) })
         )
        .Columns(colums =>
        {

            colums.Bound(p => p.OrderId).Title("Order ID");
            colums.Bound(p => p.OrderItemId).Visible(false);
            colums.Bound(p => p.PromotionId).Visible(false);
            colums.Bound(p => p.PromotionName).Title("Promotion").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayPromotion);
            colums.Bound(p => p.OrderedBy).Title("Ordered By").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayOrderedBy);
            colums.Bound(p => p.WareHouseCode).Title("Warehouse ID").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayWareHouseId);
            colums.Bound(p => p.DistributorName).Title("Distributor").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayDistributor);
            colums.Bound(p => p.StateAbbreviation).Title("State").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayState);
            colums.Bound(p => p.PRFCode).Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayPRFCode).Encoded(false)
                 .ClientTemplate("<input type='textbox' value='<#= PRFCode #>' maxlength='12' size='10' onBlur=\"SavePRFCode(<#=PromotionId #>,<#=OrderId #>,<#= CurrentYear #>,this)\" />")
                 .Template(p =>
                    {
                        %>
                            <%= Html.TextBox("txtPRFCOde", p.PRFCode, new { size = "10", MaxLength = "12",  onBlur = "SavePRFCode(" + p.PromotionId + "," + p.OrderId + "," + DateTime.Now.Year + ",this )" })%>
                        <%
                    }).Title("PRFCode").Encoded(false);
            colums.Bound(p => p.ProductId).Title("Product ID").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayProductId);
            colums.Bound(p => p.ProductName).Title("Product").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).Displayproduct);
            colums.Bound(p => p.CartonQty).Title("Carton Qty Pkg").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayCartonQtyPkg);
            colums.Bound(p => p.ProductCost).Title("Cost/Each").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayCostEach).Format("{0:c}");
            colums.Bound(p => p.OrderQty).Title("Order Qty").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayOrderQty)
                .ClientTemplate("<input type='textbox' value='<#= OrderQty #>' maxlength='6' size='4' onBlur=\"SaveOrderQty (<#= OrderItemId #>,<#= OrderId #>,<#= ProductId #>,<#= OrderQty #>,<#= PromotionId #>,<#= CartonQty #>,<#= AvailableQty #>,<#= IsAllowBackOrder #>, this)\" onkeypress=\"return ValidateNumberWithoutSpace();\" />")
                .Template(p =>
                    {
                        %>
                            <%= Html.TextBox("txtOrderQty", p.OrderQty, new { size = "4", MaxLength = "6", onBlur = "SaveOrderQty(" + p.OrderItemId + "," + p.OrderId + "," + p.ProductId + "," + p.OrderQty + "," + p.PromotionId + "," + p.CartonQty + "," + p.AvailableQty + ",'" + p.IsAllowBackOrder.ToString() + "',this)", onkeypress = "return ValidateNumberWithoutSpace();" })%>
                        <%
                    }).Title("Order Qty");
            colums.Bound(p => p.AvailableQty).Title("Qty Available").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayAvailableQty);
            colums.Bound(p => p.ItemTotal).Title("Item Total").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayItemTotal);
            colums.Bound(p => p.OrderTotal).Title("Order Total").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayOrderTotal);
            colums.Bound(p => p.COOP).Title("COOP").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplayCOOP);
            colums.Bound(p => p.SubmitDate).Title("Submit Date").Visible(((Cgx.Pabst.Allocation.BusinessEntity.PromotionOrderGridDisplay)Session["PromoOrderGridDisplay"]).DisplaySubmitDate).Format("{0:MM/dd/yyyy}");
            colums.Bound(p => p.IsAllowBackOrder).Visible(false);
            colums.Bound(p => p.OrderId)
             .ClientTemplate("<input type='button' value='Edit' class='transbutton' onclick=\"return ShowOrderPopup('" + Url.Content("~/PromotionOrder/GetOrder/") + "<#= OrderId #>" + "')\"/>")
             .Template(p =>
                {
                    %>

                      <input type="button" value="Edit" class="transbutton" onclick='return ShowOrderPopup("<%= Url.Content("~/PromotionOrder/GetOrder/") + p.OrderId.ToString() %>")' />

                    <%
                }).Title("");
            colums.Bound(p => p.PromotionId)
                //.ClientTemplate("<input type='button' value='UnSubmit' class='transbutton' onclick=\"return ShowOrderPopup('" + Url.Content("~/PromotionOrder/UnsubmitOrder/") + "<#= p. #>" + "')\"/>")
                .ClientTemplate("<input type='button' value='UnSubmit' class='transbutton' onclick=\"return ConfirmUnsubmitOrder('" + Url.Content("~/PromotionOrder/UnsubmitOrder/") + "<#= p.PromotionId #>" + "/" + "<#= p.WareHouseId #>" + "')\"/>")
                .Template(p =>
                {
                    %>
                        <%--<%= Html.ActionLink("Unsubmit Order","UnsubmitOrder",new { promotionID = p.PromotionId, distributorID = p.WareHouseId},"Post") %>--%>
                        <input type="button" value="UnSubmit" class="transbutton" onclick='return ConfirmUnsubmitOrder("<%=p.PromotionId.ToString()%>","<%= p.WareHouseId %>")' />
                    <%
                }).Title("");
         })

         .Pageable(pager => pager.PageSize(ViewData["PromoOrderPageSizes"] == null ? 20 : (int)ViewData["PromoOrderPageSizes"]))
       // .Pageable(pager => pager.PageSize(10))
       //.DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "ServiceUser"))
        .Pageable(pager => pager.Position(GridPagerPosition.Both))
        .Sortable()
        .Render();



%>


<script type="text/javascript">


    function refresh() {
        debugger;
        var grid = $('#{PromotionOrderGrid}').data('tGrid');
        grid.ajaxRequest();
    }


</script>

please help I am not able to refresh the grid after closing the modal

[Uma]

Hi Avdut,
In your modal confirmation window, change your code like below.

<input type="button" onclick="self.parent.refresh();self.parent.tb_remove();" value="Close" />

Remove the Script tag code from modal confirmation partial view.. hope this helps..

Regards,
Uma

[Avdut]

Thanks Uma for ur response.......I got what I was doing wrong
Self.parent.Refresh is not working for me.................but window.parent.Refresh() worked for me

Thanks For your help

[OfficeHeart]

Hi,

We also use a Window for editing a grid. When saving and the Modelstate is invalid, de modal window is gone.
How can we have the validationsummery in the modalwindow after saving?
We use this approach:

<div id="serviceProviderArea">
    <% using (Ajax.BeginForm("Update_Companys", "Index", null, new AjaxOptions { UpdateTargetId = "serviceProviderArea" }, new { @id = "providerFrm" }))
       { %>

YOUR CODE GOES HERE


    <%= Html.ValidationSummary() %>
    <% } %>
</div>

and this is controller code:

[HttpPost]
        public ActionResult Update_Companys(Companys company)
        {
            if (ViewData.ModelState.IsValid)
            {
                return RedirectToAction("Index");
            }

            return (View("CompanEdit", company));
        }

[Atanas Korchev]

Hello martin,

 Unfortunately the provided source code is not sufficient to understand what the problem is. Please open a support ticket and send us a runnable project which we can test. 

Regards,
Atanas Korchev
the Telerik team

[Andy McShane]

Hi Martin, I have noticed this behaviour before and always found it to be down to not including the following 2 libraries in my master page

 

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>

 

 

<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

 

Because you are using an Ajax form then these 2 libraries must be included in your project. I hope this helps.

[OfficeHeart]

Thanks!

The solution was to include: jquery.unobtrusive-ajax.js