Problem using a sortable grid inside of a tab strip

[Andy McShane]

I have a small problem when using a grid inside of a tab strip. I am loading the contents of my tab dynamically using ajax and my content contains a sortable grid. My problem is that when I click refresh on my grid I am taken back to my first tab. Also when I click on one of the headers of the grid instead of sorting my grid I am taken out to a seperate page altogether. What am I doind wrong? can I use a grid inside of a tab strip? Do I have to add something to the grid to so that it knows which tab it is working within?

[Georgi Krustev]

Hi Andy,

The TabStrip uses MS Ajax to render the partial view, which in your case contains the grid. Known issue is that the MS Ajax does not evaluate scripts and CSS. To overcome this, you need to register the grid scripts by hand. To accomplish this task use the ScriptRegistrar in the master page like so:

<%= Html.Telerik().ScriptRegistrar()
                 .DefaultGroup(group => group
                     .Add("telerik.grid.js")
                     .Add("telerik.grid.filtering.js"))
%>

Kind regards,
Georgi Krustev
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.

[Andy McShane]

Not sure if I understand this correctly so maybe I had better expand a little further. I have a site wide masterpage and my page that contains my tab strip inherits the masterpage. No I have set my tab strip to load data from a partial view which in turn contains my grid I do not include a masterpage in this partial view obviously. So my problem is where exactly do I put the code to reload the grid scripts correctly as only the contents of my partial view are reloaded into my tab strip, what am I missing? Am I being a bit thick here? :-(

[Georgi Krustev]

Hi Andy McShane,

Please review the attached test project, which implements the required feature.

Regards,
Georgi Krustev
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.

[Andy McShane]

I must really be missing something here. I have followed your example but I still have a problem. Could it be something to do with routes?
My grid, that is inside of my tab strip, lists a number of records. These records have the option of being selected to be edited. Now when a record is selected it is supposed return a partial view from a controller that updates my tab strip content but all it does is return a full page instead of within my tab strip. I really must be missing something simple???

Some more info, what data binding method should I be using? I am currently binding my grid as follows,

    Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
                     {
                         columns.Add(o => o.LicenceId).Format(Html.ActionLink(ViewData["txtEditLicence"].ToString(), "Edit", "Licence",
                                                                               new { id = "{0}" },
                                                                               new { @class = "t-link action-edit" })).Title("").Encoded(false)
                                                                                                                                .Sortable(false)
                                                                                                                                .Filterable(false)
                                                                                                                                .HtmlAttributes(new { @style = "text-align:center" });
                         columns.Add(o => o.TreatmentShortname).Title(ViewData["txtSelectTherapy"].ToString());
                         columns.Add(o => o.LicenceStartDate.ToString("dd MMM yyyy")).Title(ViewData["txtStartDate"].ToString());
                         columns.Add(o => o.LicenceEndDate.ToString("dd MMM yyyy")).Title(ViewData["txtEndDate"].ToString());
                         columns.Add(o => o.Unlimited).Title(ViewData["txtUnlimited"].ToString());
                         columns.Add(o => o.LicenceQuantity).Title(ViewData["txtLicenceQuantity"].ToString());
                         columns.Add(o => o.LicenceQuantityUsed).Title(ViewData["txtQuantityUsed"].ToString());
                     })
        .Sortable()
        .Render();

Should I be using Ajax binding, such as this

.Ajax(settings => settings.Action("_AjaxBinding", "Home"))

And then do I have to decorate my action method with [GridAction]

I am getting real confused????

[Andy McShane]

Ok, I have this partly working. I have managed to my grid to load ok. I can also get it to sort some of the columns HOWEVER when I try to sort a datetime column I am getting the following error

Invalid property or field - 'null' for type: LicenceView

I am formatting the datetime values for 2 columns as follows

                    columns.Add(o => o.LicenceStartDate.ToString("dd/MM/yyyy")).Title("Start Date);
                    columns.Add(o => o.LicenceEndDate.ToString("dd/MM/yyyy")).Title("End date);

Trying to sort on either of these columns causing the above mentioned error.

I am still unable to get my edit links to work. I have added my edit column as follows

                    columns.Add(o => o.LicenceId).Format(Html.ActionLink(ViewData["txtEditLicence"].ToString(), "Edit", "Licence",
                                                                          new { id = "{0}" },
                                                                          new { @class = "t-link action-edit" })).Title("").Encoded(false)
                                                                                                                           .Sortable(false)
                                                                                                                           .Filterable(false)
                                                                                                                           .HtmlAttributes(new { @style = "text-align:center" });

But clicking on this link just opens another page instead of going to my edit partialview.

Nearly there, as always I appreciate your help.

Also, how do I rebind the ajax code after I have done a postback, is it possible to use the jQuery .Live functionaltiy to do this to rebind the javascript to the grid?

[Atanas Korchev]

Hi Andy McShane,

Those columns must be defined like this:

columns.Add(o => o.LicenceStartDate).Format("dd/MM/yyyy").Title("Start Date);
columns.Add(o => o.LicenceEndDate).Format("dd/MM/yyyy").Title("End date);

Html.ActionLink does exactly that - navigates to a the url generated from the action and controller methods specified.

The grid will be rebound by itself you the page that contains it is reloaded by postback. There is no need to rebind it. In any case you can use the "rebind()" client side method.

Regards,
Atanas Korchev
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.

[Andy McShane]

When I apply the formatting that you suggest all that gets displayed within my grid is "dd/MM/yyy" not a formatted date? Also, the contents of my tab strip are coming a different controller and action than that which originally loaded the tab strip in the first place, that is why I want to use a partial view to return that data so that I can edit it within the confine of my tab strip, can this not be done?

[Atanas Korchev]

Hi Andy McShane,

I have slightly mislead you - the format should be set like this:

columns.Add(o => o.LicenceStartDate).Format("{0:dd/MM/yyyy}").

You can check this online example for a reference.

Html.ActionLink is the equivalent of rendering a hyperlink <a href="..."></a>. Clicking it loads the specified url. It doesn't matter if the action is rendering a partial view or not - the browser will navigate to the generated url. Having said that you need to use ajax in order to load different content in place of the grid. I have prepared a sample project showing how to do that.

Here is the interesting code:

VIEW:

<div id="result">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.ShipCountry);
            columns.Add(o => o.OrderID).Format(Html.ActionLink("Edit", "Edit", new { id = "{0}" }, new {onclick="loadEditForm(this, event)"})).Encoded(false);
        })
        .Ajax(ajax => ajax.Action("_Index", "Home"))
        .Pageable()
        .Sortable()
%>
</div>
<script type="text/javascript">
    function loadEditForm(element, e) {
        // avoid navigating by calling preventDefault - http://api.jquery.com/event.preventDefault/
        new $.Event(e).preventDefault();

        // use the jQuery load method (http://api.jquery.com/load/) to request the partial view

        // #result is the DIV where the partial view will be loaded
        $('#result').load(element.href);
    }
</script>

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(Model());
    }

    [GridAction]
    public ActionResult _Index()
    {
        return View(new GridModel
        {
            Data = Model()
        });
    }

    public ActionResult Edit(int id)
    {
        ViewData["OrderID"] = id;

        return PartialView("Edit");
    }

    private IEnumerable<Orders> Model()
    {
        return new NorthwindEntities1().Orders;
    }
}

Regards,
Atanas Korchev
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.

[Andy McShane]

Thanks for that, I am now getting somewhere. Can I set the target div to replace something something other than the grid? For example, my page contains a form where I can add new items and the grid below displays them. Now if I want to edit an item in the grid can I replace my 'add' form at the top of the page with an edit form instead? Is this the sort of thing the 'select' in the latest beta versions does?

[Atanas Korchev]

Hi Andy McShane,

You can replace anything you want - just specify the right jQuery selector to the load method.

To display a different form you need to add a new link button to your column which should display render a different action.

Regards,
Atanas Korchev
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.

[Andy McShane]

Excellent, thank you very much.

[Monah Abou Hattoum]

Hi, 
this sample was very helpful
but i have a small question please, while i am testing the 2011.2.914.340 library
i used a tabstrip and i put 2 tabs inside of it and both tabs load different grids
if i put .SelectedIndex(0) or i put .Selected inside of the tab
the other tabs when i click them ( the load will not work) unless i remove the .SelectedIndex(0)
but all the tabs will be collapsed in this way

any idea?
thanks in advance