Grid Custom Popup Model Window

[Jigar]

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.

[Hristo Germanov]

Hello Jigar,

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

Kind regards,
Hristo Germanov
the Telerik team

[Jigar]

Hi Hristo,

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

Thanks,

Jigar.

[Hristo Germanov]

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

[Uma]

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..

[Uma]

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?

[Uma]

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

[supriya]

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

[Ozzy Knox]

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

[Hristo Germanov]

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

[Ozzy Knox]

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

[Hristo Germanov]

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

[Nikolas Loizides]

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

[Ron]

Brilliant! This has helped immensely. Though I would have to do some customization and hopefully there wouldn't be any roadblocks! =)

[peter]

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?