This is a migrated thread and some comments may be shown as answers.
Grid Modal Window
22 Answers 628 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Uma
Top achievements
Rank 1
Uma asked on 10 Aug 2010, 08:28 PM
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.

22 Answers, 1 is accepted

Sort by
0
Uma
Top achievements
Rank 1
answered on 17 Aug 2010, 03:25 PM
Any suggestions? Please i need help in achieving the functionality.
0
Accepted
Andy McShane
Top achievements
Rank 1
answered on 19 Aug 2010, 11:06 AM
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!
0
Uma
Top achievements
Rank 1
answered on 24 Aug 2010, 04:40 AM
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?
0
Accepted
Andy McShane
Top achievements
Rank 1
answered on 24 Aug 2010, 10:32 AM
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.
0
Uma
Top achievements
Rank 1
answered on 16 Sep 2010, 10:40 PM
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.

0
Accepted
Andy McShane
Top achievements
Rank 1
answered on 17 Sep 2010, 04:19 PM
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.

 


0
Uma
Top achievements
Rank 1
answered on 17 Sep 2010, 04:40 PM
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??
0
Accepted
Andy McShane
Top achievements
Rank 1
answered on 17 Sep 2010, 04:59 PM
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!
0
Uma
Top achievements
Rank 1
answered on 17 Sep 2010, 05:33 PM
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?
0
Uma
Top achievements
Rank 1
answered on 23 Sep 2010, 10:40 PM
Hi McShane,
I solved it. Thanks for all the support.
0
Andy McShane
Top achievements
Rank 1
answered on 24 Sep 2010, 01:22 PM
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.
0
Jigar
Top achievements
Rank 1
answered on 26 Sep 2010, 11:10 AM
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.
0
Uma
Top achievements
Rank 1
answered on 30 Sep 2010, 03:23 PM
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 ???
0
John
Top achievements
Rank 1
answered on 08 Oct 2010, 05:10 PM
Hey Uma, how did you get the link to work properly? Im trying to do the same thing.
0
Uma
Top achievements
Rank 1
answered on 08 Oct 2010, 06:06 PM
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
0
Avdut
Top achievements
Rank 1
answered on 14 Oct 2010, 09:10 AM
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

0
Uma
Top achievements
Rank 1
answered on 15 Oct 2010, 02:36 PM
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
0
Avdut
Top achievements
Rank 1
answered on 15 Oct 2010, 03:23 PM
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
0
OfficeHeart
Top achievements
Rank 1
answered on 18 Feb 2011, 05:33 PM
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));
        }
0
Atanas Korchev
Telerik team
answered on 21 Feb 2011, 08:38 AM
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
0
Andy McShane
Top achievements
Rank 1
answered on 21 Feb 2011, 11:00 AM
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.
0
OfficeHeart
Top achievements
Rank 1
answered on 24 Feb 2011, 11:29 AM
Thanks!

The solution was to include: jquery.unobtrusive-ajax.js
Tags
Grid
Asked by
Uma
Top achievements
Rank 1
Answers by
Uma
Top achievements
Rank 1
Andy McShane
Top achievements
Rank 1
Jigar
Top achievements
Rank 1
John
Top achievements
Rank 1
Avdut
Top achievements
Rank 1
OfficeHeart
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or