How to change the Tab Title?

[Kevin]

I am trying to figure out how to change the tab text.  I noticed that the outerText property contains the title of the tab.  However, when I change this property, the tab (where the title is) disappears, but the new text shows.

        var tabstrip = $("#TabStrip").data("tTabStrip");
        var tab = $("li", tabstrip.element)[0];
tab.outerText = "I'm changing the tab text";

Is there a way this can be done?

Steve

[nachid]

var element =$('a.t-link', '.t-tabstrip-items')[3];
$(element).text('new title')

This won't work if you have also an image associated to your title
In this case, use $(element).html('new html stuff')

[John DeVight]

Take a look at this wiki page: http://aspnet.wikidot.com/telerik-mvc:extending-the-telerik-extensions-for-asp-net-mvc

In the wiki page there is a section called: "Extending the TabStrip Extension" that has extension functions for the tabstrip.  You can change the text with the following jQuery code:

$("#TabStrip").data("tTabStrip").setTabText({ index: 3, newText: 'new title' });

You can also download the javascript file from the wiki page as well.

[nachid]

John,
Very good idea this extension library
Thank you

[Kevin]

John,
This is very nice!  "Extending the Telerik Extensions".  Catchy name.  I like it.  It looks like you have some other good solutions for developers using Telerik MVC.  Any plans to open this up so that others can contribute to the good you have started?

By the way, I really need the ability to add tabs dynamically.  Telerik has said that this is something they don't support now, but you can vote for this functionality and they may implement it later:
http://www.telerik.com/support/pits.aspx#/public/aspnet-mvc/4768

In the mean time, I am going to try to give the jquery UI Tabstrip a whirl and see if I can get them to work:
http://blog.roonga.com.au/2010/05/using-jquery-ui-tabs-with-aspnet-mvc.html
http://jqueryui.com/demos/tabs/#manipulation

If I had time, I think it would be a great idea to 'extend' your "Extending the Telerik Estensions" to include this functionality.

Cheers!
Steve

[John DeVight]

Thanks Steve!

That's a great idea to open this up so that others can contribute.  I'll take a look at some collaborative development sites like GitHub and let you know.

Adding tabs dynamically would be really nice.  I'll take a look at this and see what I can do! =)

Regards,

John DeVight
[e-mail]

[John DeVight]

Steve,

I've updated the telerik.extensions.js on my wiki at: http://aspnet.wikidot.com/telerik-mvc:extending-the-telerik-extensions-for-asp-net-mvc so that you can add a tab dynamically.

Here is an example using the telerik.extensions.js:

$.ajax({
    url: '/Home/GetTabThree/',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
})
.success(function(result) {
    $('#IndexTabStrip').data('tTabStrip').addTab({ text: 'Tab Three', html: result });
});


I'll put a seperate wiki page with the complete example including source code for the ASP.NET project on my wiki this evening.  Let me know if there is anything else I can do.  In the meantime, I'll take a look at getting a project started on GitHub for this.

BTW - If you have a moment, please add a comment on my wiki with your thoughts on telerik.extensions.js...

Regards,

John

[Kevin]

Wow.  That’s fast.  I am going to try that now.  Can I provide a partial view in the url?  probably not. 

[John DeVight]

Steve,

Here is the wiki page I mentioned that I was going to create in my previous message: http://aspnet.wikidot.com/telerik-mvc:dynamically-add-a-tab-to-the-tabstrip

You can download a sample project from there.  As the wiki page mentions, the Telerik.Web.Mvc.dll, Telerik "Contents" and Telerik "Scripts" have all been removed to reduce the zip file size, but if you have any problems with it, let me know and I can put them back in...

I wasn't sure what you meant about "provide a partial view in the url" but if you can provide a bit more detail, I'll see what I can do =)

Regards,

John

[Kevin]

John,
You already answered my question.  I wanted to use a partial view instead of a view.  Your example already does that.  I can get your example to work, but I am getting this javascript error when I try to implement this in my solution.

Microsoft JScript runtime error: 'data(...)' is null or not an object

Any ideas what this could be?  I am thinking that I am missing some javascript library or it's in the wrong order.

[John DeVight]

Steve,

Sounds like it might be a problem with a reference to a telerik control. possibly the tabstrip.  We need to pinpoint where the error might be occurring.  Are you making a jQuery.ajax call to get the partial view?  If so, are you getting a successful response?  Is the error happening in the jQuery.ajax.success?  You can put some debugger; statements in your javascript files to see how far you get before the error occurs.  If that doesn't help with identifying where the error is occurring, you could email some of your files to me and I can take a look.

Regards,

John

[Kevin]

I figured out what it was.  In the .addTab call in the success function, I had the wrong name of my tabstrip (I was using yours 'IndexTabStrip' instead of what I called it.).

Very cool.  So it creates the tab, but when I click on this new tab, it attempts to load Index.aspx and we get a whole bunch of javascript errors.  I am confused why is it trying to load my Home/Index page, when I specify in my ajax call the url as:

    $.ajax({

        url: '/Estimate/GetTabThree/',

 

 

        contentType:

 

'application/html; charset=utf-8',

 

 

        type:

 

'GET',

 

 

        dataType:

 

'html'

 

    })

    .success(

 

function (result) {

 

 

    $(

 

'#TabStrip').data('tTabStrip').addTab({ text: 'Tab Three', html: result });

I even step through my controller and see that I am hitting the right action method: 

 

 

    public ActionResult GetTabThree()

 

 

    {

 

 

        return View("TabThree");

 

 

    }

 

[John DeVight]

What does  your TabThree partial view look like?

[Kevin]

John,
The problem was that the name of the tabstrip is hardcoded in your extension library.  Once I made sure the naming of the tabstrip all lined up it worked like a charm.  It would be really slick if that name could be passed in somehow.  Maybe that's something I can contribute to this project.  I am a ASP.NET MVC newbie and let's just say that my jquery skills have a lot room for improvement.

This is really awesome.  Thanks!

Steve

[John DeVight]

Good catch!  Thanks Steve.

Here is the updated code that gets the name of the tabstrip (see var tabname...):

            addTab: function(t) {
                var tabstrip = $(this.element);
                var tabstripitems = tabstrip.find('.t-tabstrip-items');
                var cnt = tabstripitems.find('li').length;
                var tabname = tabstrip.attr('id');

                tabstripitems.append(
                    $('<li />')
                        .addClass('t-item')
                        .addClass('t-state-default')
                        .append(
                            $('<a />')
                                .attr('href', '#' + tabname + '-' + (cnt + 1))
                                .addClass('t-link')
                                .text(t.text)
                        )
                    );

                var $contentElement =
                    $('<div />')
                        .attr('id', tabname + '-' + (cnt + 1))
                        .addClass('t-content')
                        .append(t.html)

                tabstrip.append($contentElement);

                tabstrip.data('tTabStrip').$contentElements.push($contentElement[0]);
            }


I'll update the telerik.extensions.js with the fix tonight as well (after I add removeTab()).

[Kevin]

John,
So I was able to dynamically add a static partial view like you do in your example project (TabThree).  Now I am trying to load a partial view that has a telerik grid.  The ".Select(...) Action of the grid databinding is not firing.  When I did this statically it was firing and loading records into my telerik.  I am not sure why this is happing.

Here is my partial view:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<br />
<h2>Estimator Hot List</h2>


<%: Html.Telerik().Grid<WebJams.Models.tblEstimate>()
        .Name("Grid")
        .DataKeys(keys => keys.Add(e => e.EstimateID))
        .DataBinding(dataBinding => dataBinding.Ajax()
            .Select("_Select", "Estimate")
            .Update("_SaveAjaxEditing", "Estimate"))
        .Columns(columns =>
        {
            columns.Bound(e => e.EstimateID).Width(50).ReadOnly().HeaderTemplate("ID").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.EstimatorID).Width(170).HeaderTemplate("Estimator").ClientTemplate("<#= EstimatorName #>");
            columns.Bound(e => e.ProjectTitle).Width(100);
            columns.Bound(e => e.CustomerName).Width(150);
            columns.Bound(e => e.DateCreated).Format("{0:d}").Width(95).HeaderTemplate("Created").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.DateNeeded).Format("{0:MM/dd/yyyy}").Width(95).HeaderTemplate("Needed").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.EstimateDueDate).Format("{0:MM/dd/yyyy}").Width(95).HeaderTemplate("Due Date").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.AccountExecID).Width(170).HeaderTemplate("Account Executive").ClientTemplate("<#= AccountExecutiveName #>");
            columns.Bound(e => e.EstimatorNotes).Width(150);
        })
        .Sortable()
        .Selectable()
        .Pageable(paging => paging.PageSize(20))
        .Scrollable(c => c.Height("300px"))
        .Filterable()
%>

 
Here is my controller. 

public ActionResult HotList()

{

    ViewData["users"] = db.tblUsers.ToList().OrderBy(u => u.FullName);

    return PartialView();

}

[GridAction]


public ActionResult _Select()

{

    return View(new GridModel(GetHotList()));

}

I do hit the "HotList()" action which what initially call in my ajax call in my view:

$.ajax({
    url: '/Estimate/HotList/',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
})
.success(function (result) {
    //debugger;
    $('#TabStrip').data('tTabStrip').addTab({ text: 'Estimator Hot List', html: result });
});

Any idea why the .select event of the grid databinding isn't firing now that this tab has been added dynamically?

Steve

[John DeVight]

I have a similar situation where I am loading a partial view with a Telerik Grid into a Telerik Window.  However, I am populating the grid client side by calling jQuery.getJSON and then binding the grid to the json data that is returned.

Here is the jQuery code:

$.getJSON('/Document/SelectDocumentHistory/' + $('#DocumentId').val(), function(data) {
    grid.dataBind(data);
});

Here is the code in the controller:

public JsonResult SelectDocumentHistory(string id)
{
    // Code here to get the list of document history model objects.

    return Json(list, JsonRequestBehavior.AllowGet);
}

Let me know if this approach will not work for your situation and I'll see what ideas I can come up with.

Leaving the code the way it is, you may also want to try calling: $('#Grid').data('tGrid').rebind()

[Kevin]

I getting an error:
Microsoft JScript runtime error: 'data(...)' is null or not an object

I do the rebind call right in the success function of the ajax call for adding the tab:

$.ajax({
    url: '/Estimate/HotList/',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
})
.success(function (result) {
    //debugger;
    $('#TabStrip').data('tTabStrip').addTab({ text: 'Estimator Hot List', html: result });
    $('#Grid').data('tGrid').rebind();
});

That's the right place, right?  Am I missing some scripts that I should be registering?  My grid is named 'Grid'.  Here is the scripts I register in my master page:

<%: Html.Telerik().ScriptRegistrar()
        .DefaultGroup(group => group
            .Add("~/Scripts/MicrosoftAjax.js")
            .Add("~/Scripts/MicrosoftMvcAjax.js")
            .Add("~/Scripts/MicrosoftMvcValidation.js")
            .Add("~/Scripts/jquery.validate.min.js")
            .Add("~/Scripts/jquery.validate.unobtrusive.min.js")

            .Add("telerik.common.js")
            //.Add("telerik.draganddrop.js")
            .Add("telerik.grid.js")
            .Add("telerik.grid.editing.js")
            .Add("telerik.calendar.js")
            .Add("telerik.datepicker.js")
            .Add("telerik.datetimepicker.js")
            .Add("telerik.timepicker.js")
            .Add("telerik.grid.filtering.js")
            //.Add("telerik.grid.grouping.js")
            .Add("telerik.textbox.js")
            .Add("telerik.list.js")
            .Add("telerik.combobox.js")
            .Add("telerik.tabstrip.js")
            .Add("telerik.window.min.js")
            .Add("telerik.splitter.min.js")
            .Add("telerik.extensions.js")

I know that the order is important.

Steve

[Kevin]

John,
I also tried your JSon example.  While I could step through the Json Action call and see that Json data was being returned, the it didn't fire until after the rebind event.  Again, I am not very good with Json nor JQuery, so please be patient with me.   Here I make the json call, when I step through this code, I go past the rebind statement and then after exiting the javascript function, only then do I start stepping through the Json action. 

$.ajax({
    url: '/Estimate/HotList/',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
})
.success(function (result) {
    //debugger;
    $('#TabStrip').data('tTabStrip').addTab({ text: 'Estimator Hot List', html: result });
    $('#TabStrip').data('tTabStrip').selectTab({ text: 'Estimator Hot List' })
    //$('#Grid').data('tGrid').rebind();
    debugger;
    $.getJSON('/Estimate/HotList_Json/', function (data)
    {
        debugger; // <-- I NEVER HIT THIS CODE
        var grid = $('#Grid').data('tGrid');
        grid.dataBind(data);
    });
});

So after I exit the javscript function that contains this json call, only then do I hit my json action:

public JsonResult HotList_Json()
{
    // Code here to get the list of document history model objects.
    return Json(GetHotList(), JsonRequestBehavior.AllowGet);
}

Can I make this call synchronously so this doesn't happen?

[Kevin]

I added some success and error function to the JSON call.  I am hitting the .error function.  No idea why:

$.ajax({
    url: '/Estimate/HotList/',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
})
.success(function (result) {
    //debugger;
    $('#TabStrip').data('tTabStrip').addTab({ text: 'Estimator Hot List', html: result });
    $('#TabStrip').data('tTabStrip').selectTab({ text: 'Estimator Hot List' })
    //$('#Grid').data('tGrid').rebind();
    debugger;
    $.getJSON('/Estimate/HotList_Json/', null, function (data) {
        debugger;
        var grid = $('#Grid').data('tGrid');
        grid.dataBind(data);
    })
    .success(function () {
        alert('JSON success');
    })
    .error(function () {
        alert('JSON error');
    });
});

I am hitting my Json action in my controller.

[John DeVight]

Try removing the null parameter from your getJSON call.

[Kevin]

Fixed my problem with the getJson call.  I changed it to a .ajax call so I could get more informatin in the error function:

$.ajax({
    url: '/Estimate/HotList_Json/',
    //contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'json',
    //data: data,
    success: function (results) {
        //alert('ajax success');
        debugger;
        var grid = $('#Grid').data('tGrid');
        grid.dataBind(results);
    },
    error: function (xhr, status, error) {
        debugger;
        alert(status);
    }
})

Problem was with my jquery.validate.js library according to this post on stackoverflow.com:
http://stackoverflow.com/questions/5068822/ajax-parseerror-on-verrorsfoundtrue-vmessagelogin-failed

For now I just removed the validate library.  So I get inside my success function and it error on grid.databind(results):
Microsoft JScript runtime error: '$lineinfo' is undefined

I hope you don't mind my multiple posts here. I think your extension library is invalueable.  I am using it for a project that is due Tuesday, so I am scrambling to get these dynamic tabs to work.

Steve

[Kevin]

Ok, so I need quite now, it's late.  But I noticed that grid is undefined.  That is why the dataBind method is getting an error.  I am not sure why the $('#Grid') is undefinded.  That doesn't make sense to me, but I will pick up tomorrow. 

Again, thank you for your help on this.  I want to recommend you as a Telerik MVP.  I will definitely pimp your extensions to other developers.  I hope I can get this working with grids.  One feature would be a way to delete a tab.  A little x image in the top right corner of the tab that hides that tab and then disposes of it would be great.

Steve

Update:
$('#Grid') is defined however,

$("#Grid").data('tGrid');

is not.  Hmm...

[John DeVight]

That is really strange...

Here is the code that I have for my grid.  One difference is that I don't have the "dataBinding.Ajax" in my grid.

@{Html.Telerik().Grid<MyApplication.Models.DocumentHistory>()
    .HtmlAttributes(new { style = "height: 275px; overflow: auto;" })
    .Name("DocumentHistoryWindow_DocumentHistoryGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Number);
        columns.Bound(c => c.Description);
        columns.Bound(c => c.DeltaValue).Title("Delta Value");
        columns.Bound(c => c.Guid).Hidden(true);
    })
    .DataKeys(keys =>
    {
        keys.Add(c => c.Guid);
    })
    .Footer(false)
    .Render();
}

Just a thought... check to make sure that the name of your grid is unique on the page.

Thanks for wanting to recommend me as a Telerik MVP!  That would be great =)

Yes, please pimp the extensions to other developers.  If you could direct them to the aspnet.wikidot.com site, that would be great!  I'm trying to generate traffic, and eventually hope to generate revenue through google ads.

I like the idea of the x image in the top right corner.

BTW - I updated the telerik.extensions.js file on aspnet.wikidot.com to have a removeTab function...

I have the day off today, so I'll be checking email sporadically through the day, but will be back online around 9PM EST.
 

[Kevin]

John,
Thanks, could you add a working grid in the partial view of your sample project you provided?  I think that would be a big hit.  Also, I created a button in the nav area of your sample to demostrate creating a tab via client user click.  If you had a complete working sample (including .js files) of loading grids in dynamic tabs and maybe code demostrating your other features, that would go a LONG way in promoting your extension library!  One of the greatest features of Telerik products is that they have working demos of their products straight out of the box.

I'm working this weekend to get my project out by Tuesday.
Steve

UPDATE: I commented out the databining.Ajax code.  I double checked.  There is no other grid in my app right now so nothing has the name 'Grid'.

Having a sample app like the one you provide is critical for me right now.  Especially with the exact javascript and jquery libraries you are using.  I think there is javacript conflict somewhere that is causing

$("#Grid").data('tGrid');

 

to be undefined, despite the fact that $("Grid").data is defined. 

[John DeVight]

Hey Steve,

I experienced the same problem as you.   I did a little bit of research and found that when the page is rendered, the jQuery(document).ready() function is executed and the "tGrid" gets created.  In my sample app, I added the following code after the tab is created, but before I get the json data from the controller to populate the grid:

jQuery('#WikiPageGrid').tGrid({columns:[{"title":"Title","member":"Title","type":"String"},{"title":"Url","member":"Url","type":"String"},{"title":"Date Created","member":"DateCreated","type":"Date"},{"attr":" style=\"display:none;width:0;\"","title":"Id","member":"Id","type":"Number"}], urlFormat:'/', pageSize:0, selectable:true, noRecordsTemplate:'No records to display.'});

I'll do some research to see if I can figure out how Telerik generates the jQuery to create the "tGrid" so that it can be added to the partial view that gets returned.

Regards,

John

[Kevin]

That worked!!  YOU ROCK!!!

I just got it to work in the sample app I emailed you (did you get my email?).  So this is awesome.  We need a couple of more features in this thing.  I would like to assist you with this.

• Delete X image in the top right corner of actual tab.  Clicking on this X image would call your removeTab function.
• Unique tabs and controls.  This is tricky.  What if I want open up multiple tabs of the same partial. I have a use case for that actually.  Clicking on a row in my grid tab should open an estimate record for viewing, editing.  I want to give the users the ability to open up multiple estimates in multiple tabs.

For now though, I think we should enhance your "Dynamically Add a Tab to the TabStrip" demos to include loading these grids with partial view and continue.  I think that would really go a long way in promoting your site.  I have some code working that allows the users to inline edit grids in a tab, in a partial view.  Of course, I didn't extend Telerik MVC to do this, but editing grids in a partial, in a tab was no small task.

Well done!
Steve 

[John DeVight]

Glad it all worked! =)

Yeah, I got the email.  I had checked it after I responded here....

I figured out what telerik is doing with their grid.  Here is the TabThree.cshtml partial view:

@using Telerik.Web.Mvc.UI;
@{
    Layout = null;
}

<div id="tabThreeContents" style="overflow: auto;">
 @{
    Grid<TelerikMvcApplication.Models.WikiPage> grid = Html.Telerik().Grid<TelerikMvcApplication.Models.WikiPage>()
        .Name("WikiPageGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Title);
            columns.Bound(c => c.Url);
            columns.Bound(c => c.DateCreated);
            columns.Bound(c => c.Id).Hidden(true);
        })
        .DataKeys(keys =>
        {
            keys.Add(c => c.Id);
        })
        .Footer(false);

    StringWriter sw = new StringWriter();
    grid.WriteInitializationScript(sw);
    grid.Render();
 }

 @Html.Hidden("WikiPageGrid_Create_tGrid", sw.GetStringBuilder().ToString())
</div>

Here is the Javascript:

$.ajax({
    url: '/Home/GetTabThree/',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
})
.success(function(result) {
    $('#IndexTabStrip').data('tTabStrip').addTab({ text: 'Tab Three', html: result });

    // evaluate the text in the hidden field to create the "tGrid".
    eval($('#WikiPageGrid_Create_tGrid').val());

    // Get the JSON from the Home Controller to populate the grid.
    $.getJSON('/Home/GetWikiPages', function(data) {
        $('#WikiPageGrid').data('tGrid').dataBind(data);
    });
});

Yes!  I would like to work with you on the additional features.  I still need to get the GitHub project setup . It's late, so I'll probably do so tomorrow evening.  I'll send you an email as soon as I do.

I'd be interested in seeing your code to do the inline edit grids in a tab in a partial view =)

[Kevin]

Could you translate your Razor partial view to .ASPX for me?  I tried to and it's not working for me.  I did it work in your razor example that I added several tabs to. 

Here is my partial in ASPX.  What am I missing here?  Do I need the div tags?  When I put in eval($('#Grid_Create_tGrid').val());, tGrid is still undefined. :(

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<br />
<h2>Estimator Hot List</h2>


<%

    Grid<WebJams.Models.tblEstimate> grid = Html.Telerik().Grid<WebJams.Models.tblEstimate>()
        .Name("Grid")
        .DataKeys(keys => keys.Add(e => e.EstimateID))
        .Columns(columns =>
        {
            columns.Bound(e => e.EstimateID).Width(50).ReadOnly().HeaderTemplate("ID").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.EstimatorID).Width(170).HeaderTemplate("Estimator").ClientTemplate("<#= EstimatorName #>");
            columns.Bound(e => e.ProjectTitle).Width(100);
            columns.Bound(e => e.CustomerName).Width(150);
            columns.Bound(e => e.DateCreated).Format("{0:d}").Width(95).HeaderTemplate("Created").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.DateNeeded).Format("{0:MM/dd/yyyy}").Width(95).HeaderTemplate("Needed").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.EstimateDueDate).Format("{0:MM/dd/yyyy}").Width(95).HeaderTemplate("Due Date").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
            columns.Bound(e => e.AccountExecID).Width(170).HeaderTemplate("Account Executive").ClientTemplate("<#= AccountExecutiveName #>");
            columns.Bound(e => e.EstimatorNotes).Width(150);
            columns.Bound(e => e.EstimateID).Width(100)
                .ClientTemplate("<button style='height:30px; width:35px;' onclick=\"OpenEstimate('<#=EstimateID#>')\"><img src=\"/Content/images/edit3.png\"></nobr></button>")
                .HtmlAttributes(new { style = "white-space: nowrap;" })
                .Width(60)
                .ReadOnly()
                .Title("")
                .Filterable(false);
        })
        .Sortable()
        .Selectable()
        .Pageable(paging => paging.PageSize(20))
        .Scrollable(c => c.Height("300px"))
        .Filterable();

   System.IO.StringWriter sw = new System.IO.StringWriter();
   grid.WriteInitializationScript(sw);
   grid.Render();

%>

<% Html.Hidden("Grid_Create_tGrid", sw.GetStringBuilder().ToString()); %>

UPDATE:
Just noticed that the hidden control has the wrong name, above.  It should be: 

<% Html.Hidden("Grid_tGrid", sw.GetStringBuilder().ToString()); %>

Still doesn't fix my problem.  tGrid is still undefined.

UPDATE: 
Actually this code doesn't work me at all either in Razor.  I just noticed I didn't comment out the  jQuery tGrid code where you define tGrid and all the columns in the grid.  When I rid of that and just used the code in your last post, grid was undefined again. 

 

 

 

 

 

 

 

[Kevin]

So using the code from your earlier post where I have to go in and create the columns (yuck), gives me some grief.  I doesn't handle Telerik grid command columns, or at least I don't know how to create the columns.

Here is my partial view in all it's dirty glory:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

  

<br />

<h2>Estimator Hot List</h2>   

<%  Grid<WebJams.Models.tblEstimate> grid = Html.Telerik().Grid<WebJams.Models.tblEstimate>()

        .Name("Grid")

        .DataKeys(keys => keys.Add(e => e.EstimateID))

        .DataBinding(dataBinding => dataBinding.Ajax()

            .Update("_SaveAjaxEditing", "Estimate"))

        .Columns(columns =>

        {

            columns.Bound(e => e.EstimateID).Width(50).ReadOnly().HeaderTemplate("ID").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });

            columns.Bound(e => e.EstimatorID).Width(170).HeaderTemplate("Estimator").ClientTemplate("<#= EstimatorName #>");

            columns.Bound(e => e.ProjectTitle).Width(100);

            columns.Bound(e => e.CustomerName).Width(150);

            columns.Bound(e => e.DateCreated).Format("{0:d}").Width(95).HeaderTemplate("Created").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });

            columns.Bound(e => e.DateNeeded).Format("{0:MM/dd/yyyy}").Width(95).HeaderTemplate("Needed").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });

            columns.Bound(e => e.EstimateDueDate).Format("{0:MM/dd/yyyy}").Width(95).HeaderTemplate("Due Date").HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });

            columns.Bound(e => e.AccountExecID).Width(170).HeaderTemplate("Account Executive").ClientTemplate("<#= AccountExecutiveName #>");

            columns.Bound(e => e.EstimatorNotes).Width(150);

  

            columns.Command(commands => { commands.Edit(); }).Width(170).Width(170).HtmlAttributes(new { style = "white-space: nowrap;" });   

        })

        .Sortable()

        .Selectable()

        .Pageable(paging => paging.PageSize(20))

        .Scrollable(c => c.Height("300px"))

        .Filterable();

  

   System.IO.StringWriter sw = new System.IO.StringWriter();

   grid.WriteInitializationScript(sw);

   grid.Render();

%>

  

<% Html.Hidden("Grid_tGrid", sw.GetStringBuilder().ToString()); %>

How do I create the this command column in the javascript function where I need to create tGrid?
columns.Command(commands => { commands.Edit(); }).Width(170).Width(170).HtmlAttributes(new { style = "white-space: nowrap;" });

jQuery('#Grid').tGrid({ columns:
    [   { "title": "ID", "member": "EstimateID", "type": "Number" },
        //{ "title": "EstimatorID", "member": "EstimatorID", "type": "Number" },
        {"title": "Estimator", "member": "FullName", "type": "String" },
        {"title": "Project Title", "member": "ProjectTitle", "type": "String" },
        {"title": "Customer Name", "member": "CustomerName", "type": "String" },
        {"title": "Created", "member": "DateCreated", "type": "Date" },
        {"title": "Needed", "member": "DateNeeded", "type": "Date" },
        {"title": "DueDate", "member": "EstimateDueDate", "type": "Date" },
        //{"title": "AccountExecID", "member": "AccountExecID", "type": "Number" },
        { "title": "Account Executive", "member": "AccountExecutiveName", "type": "String" },
        { "title": "Estimator Notes", "member": "EstimatorNotes", "type": "String" },
        { "title": "????", "????": "?????", "type": "String" }  /// <<<<------ HOW TO CREATE COMMAND COLUMN?
    ],
    urlFormat: '/',
    pageSize: 0,
    selectable: true,
    noRecordsTemplate: 'No records to display.'
});

If I manage to get your code that neatly creates the tGrid, this might not be a problem.

Steve

[Yordanos]

Thanks Nachid.

For tabs which has image define a class e.g tabTitle

.tabTitle 
{
float: left;
background: url(imagePathHere) no-repeat bottom left;
height: 18px;
width: 18px;
} 

var secondTab = $('a.t-link', '.t-tabstrip-items')[1];
$(secondTab).html("<div class='tabTitle'></div> Second Tab Title Here");