This is a migrated thread and some comments may be shown as answers.
Grid Custom Popup Model Window
14 Answers 518 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.
Jigar
Top achievements
Rank 1
Jigar asked on 27 Sep 2010, 12:07 PM
Hi,

I want to put custom button in Grid Column, and on click of that button a custom pop up window should be opened.

For Example:
When we click on Edit button, it opens Editor window to update the records. ( when grid is created as editable in popup mode)

Any suggestions? how can I do this?

Thanks,

Jigar.

14 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 27 Sep 2010, 01:58 PM
Hello Jigar,

I have attached a project, which shows how to achieve your goal with server binding.

Kind regards,
Hristo Germanov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jigar
Top achievements
Rank 1
answered on 27 Sep 2010, 04:55 PM
Hi Hristo,

Thanks a lot for your inputs. But Isn't it possible when there is ajax binding?

Thanks,

Jigar.
0
Hristo Germanov
Telerik team
answered on 28 Sep 2010, 09:31 AM
Hi Jigar,

To achieve this goal you need to relapse Template with ClientTemplate.

Template:
columns.Template(c => {
%> <input type='button' value='Edit' onclick="updateRecord('<%= c.CustomerID %>')" /> <%})

ClientTemplate:
columns.Bound(p => p.ProductID)
       .ClientTemplate("<input type='button' value='Edit'    onclick='updateRecord(\"<#= c.CustomerID #>\")' />")
       .Title("Commands")

Sincerely yours,
Hristo Germanov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Uma
Top achievements
Rank 1
answered on 29 Sep 2010, 06:32 PM
Hi Hristo,
I'm able to run your attached project but when i include the code in my project, while editing the record, getting "Object doesn't support this property or method" error near the "window.content(data);" in "updateRecord(id)" javascript function.
Below is the code:
      <% Html.Telerik().Grid(Model)
          .Name("#Grid")
          .DataKeys(k => k.Add(c => c.LocationId))
          .ToolBar(command => command.Custom().Text(ViewsSharedRes.SharedStrings.GridLocationAddText)
                                    .Action("Add", "Location", new { height = 550, width = 500, modal = "true" })
                                    .HtmlAttributes(new { @class = "thickbox" }))
          .Columns(columns =>
                          {
                              columns.Bound(p => p.Name).Width(150);
                              columns.Bound(p => p.City).Width(130);
                              columns.Bound(p => p.CountryName).Width(130);
                              columns.Bound(p => p.ManagerName).Width(130);
                              columns.Bound(p => p.ManagerEmail).Width(200);
                              columns.Template(r => {
                                %>
                                    <a href ="#" onclick="updateRecord('<%= r.LocationId %>')" >Edit</a> | 
                                  <%
                                %> <a  href ="#" onclick="deleteRecord('<%= r.LocationId %>')" >Delete</a> <%
                            }).Width(150);                     
                                                             
                          })
             .DataBinding(bindings => bindings.Server().Select("Index","Location"))
             .ClientEvents(config => config.OnDataBound("showNoDataText"))
             .Pageable(paging => paging.PageSize(10))
             .Sortable()
             .Render();                
             %> 
  
<script type="text/javascript">
    function updateRecord(id) {
        var url = '<%= Url.Action("Edit", "Location") %>'
        $.post(url, { id: parseInt(id) }, function(data) {
            var window = $('#Window').data('tWindow');
            window.content(data);
            window.open();
        });        
    }
</script

Controller Code:
public ActionResult Edit(int id)
{
    if (this.CarifendUser != null)
    {
        EditableLocation location = _repository.EditableLocation(id);
         
        ViewData["CompanyList"] = companies;
        return PartialView("Edit", location);
    }
    else
        return RedirectToAction("LogOn", "Account");
}

Any idea why i'm getting this error? Thanks in advance..
0
Uma
Top achievements
Rank 1
answered on 29 Sep 2010, 10:39 PM
Hi Hristo,
I'm able to identity the issue..I was using 2010.1.713 version....Anyway i'm using 2010.1.825 now.
Incase of any validation fires, the View is opening in whole page rather than in window. How to display the validation messages on the same window? Getting same issue in both Add and Edit scenarios..
Below is my code:
Edit Partial Control:
<% using (Html.BeginForm("EditLocation", "Location", FormMethod.Post))
       {%>
    <%= Html.ValidationSummary(true)%>                         
        <div class="editor-label">
            <%= Html.LabelFor(model => model.Name)%>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.Name)%>
            <%= Html.HiddenFor(model => model.LocationId)%>
            <%= Html.ValidationMessageFor(model => model.Name)%>
        </div>
          .....
        <p>
            <input type="submit" value="<%= ViewsSharedRes.SharedStrings.btnSaveChanges %>" />
        </p>      
<% } %>

Controller Code:
public ActionResult EditLocation(EditableLocation model)
        {
           if (ModelState.IsValid)
                {
                    try
                    {
                        _repository.UpdateLocationDetails(model);
                        return RedirectToAction("Index");
                    }
                    catch
                    {
                        ModelState.AddModelErrors(model.GetRuleViolations());
                    }
                }
             // If we got this far, something failed,redisplay form                
                  return PartialView("Edit", model);
  }

Any suggestions?
0
Uma
Top achievements
Rank 1
answered on 30 Sep 2010, 03:09 PM
Any suggestions? Please i need help in achieving the functionality.
0
supriya
Top achievements
Rank 1
answered on 06 Oct 2010, 08:23 AM
hi
I have used your sample and when i paste my code in your application then the pop up widow get opens.
But I created a new application and then use the same code then the popup window is not opening i.e nothing is happening after clicking the edit button.

Please tell me where i am wrong.

Thanks
supriya
0
Ozzy Knox
Top achievements
Rank 1
answered on 23 Nov 2010, 01:19 PM
Hi Hristo,

I am trying out your sample project grid-with-window-edit-form.zip. When I click on the save button in the popup window, it doesn't appear to do anything. Is there a bug and can you possibly post the correction?

Thanks
Ozzy
0
Hristo Germanov
Telerik team
answered on 23 Nov 2010, 04:04 PM
Hi Ozzy Knox,

Attached project is a test project that shows how to use Telerik Window in Telerik Grid. You need to implement you update logic in the CustomUpdate controller:
public ActionResult CustomUpdate(Customer customer)
{
   //Your logic here!
   return View();
}

All the best,
Hristo Germanov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ozzy Knox
Top achievements
Rank 1
answered on 24 Nov 2010, 01:33 PM
Hi Hristo,

Thanks for your reply.  I am getting some good progress from your example so far.  There is, however, one strange and irritating aspect of behaviour I am getting from this custom popup window.  At the top of the window, it seems to always display the test "System.Web.Mvc.Html.MvcForm" and I can't seem to get rid of this. I also can't figure out what is causing this. Can you kindly have a look and present a solution to get rid of this text. This text is also displaying in your sample project.

Thanks
Ozzy
0
Hristo Germanov
Telerik team
answered on 25 Nov 2010, 10:05 AM
Hi Ozzy Knox,

In my test project I made a mistake.
<%= Html.BeginForm("CustomUpdate", "Home") %>
 
<%= Html.EditorForModel(Model) %>
 
<button type="submit">save</button>
Html.BeginForm() with <%= %> server tag is not correct.
You need to set Html.BeginForm() in <% %> server tag.
<% Html.BeginForm("CustomUpdate", "Home"); %>
 
<%= Html.EditorForModel(Model) %>
 
<button type="submit">save</button>
 
<% Html.EndForm(); %>

Greetings,
Hristo Germanov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Nikolas Loizides
Top achievements
Rank 1
answered on 23 Mar 2011, 10:47 AM
In your sample project you are using MVC 2.

How can you add the button html tag on MVC Razor engine, in the column's template?

You are using
 %> <input type='button' value='Edit' onclick="updateRecord('<%= c.CustomerID %>')" /> <%
for MVC 2

You can do something like
@<input type='button' value='Edit' onclick="updateRecord('<%= c.CustomerID %>')" /> ;
for MVC 3

but it gives an error because you are giving a server tag ("@") followed by unknown commands for the server.

Any Ideas?

Thanks

0
Ron
Top achievements
Rank 1
answered on 22 Jun 2011, 09:09 PM
Brilliant! This has helped immensely. Though I would have to do some customization and hopefully there wouldn't be any roadblocks! =)
0
peter
Top achievements
Rank 1
answered on 30 Sep 2011, 07:54 AM
Hi Hristo Germanov,

I have a problem when try to do custom validation in mvc grid (ajax editing) popup mode that I discrible in following topic:
Grid Ajax Editing - Custom Validate problem
can you help me?
Tags
Grid
Asked by
Jigar
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Jigar
Top achievements
Rank 1
Uma
Top achievements
Rank 1
supriya
Top achievements
Rank 1
Ozzy Knox
Top achievements
Rank 1
Nikolas Loizides
Top achievements
Rank 1
Ron
Top achievements
Rank 1
peter
Top achievements
Rank 1
Share this question
or