This is a migrated thread and some comments may be shown as answers.

Use of jQuery inside Telerik Control Events

0 Answers 74 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jamy
Top achievements
Rank 1
Jamy asked on 22 Dec 2010, 11:35 PM
Well I have tried to get about 4 other questions answered from this forum without one single answer. I think I will try it one more time and look elsewhere for a better supported product. I realize this is open source and we are not required to pay but it really sucks have such limited documentation on such a nice product.

Trying to use a jQuery call to set a class on a 'div' element which is located in a tabstrip item client template. The tabstrip lives in the detailview of an ajaxbound grid. I have tried to apply the jQuery from within the tabstrip's events both onLoad and onSelected. Each returns an inconsistant result. I can see the class being applied to certain rows but for others it is not. The div's id is "myDiv" and I am trying to add a class of .LargeText

Below is the source used... Could someone possibly respond this time?

<% Html.Telerik().Grid<TelerikMVCTest.ViewModels.myModel>()
       .Name("TestGrid")
       .DataBinding(db => db.Ajax().Select("Index", "Home"))
       .Columns(columns =>
       {
           columns.Bound(column => column.newProductID).Title("Product ID");
           columns.Bound(column => column.newProductName).Title("Product Name");
           columns.Bound(column => column.newUnitPrice).Title("Price").Format("{0:c}");
           columns.Bound(column => column.newUnitPrice).ClientTemplate("<#= $.telerik.formatString('{0:c}', newUnitPrice*2) #>");
           columns.Bound(column => column.OriginalProduct.UnitPrice).ClientTemplate("<#= $.telerik.formatString('{0:c}', OriginalProduct.UnitPrice*3) #>");
           columns.Bound(column => column.newProductID).ClientTemplate(("<# if (newProductID > 4) { #><span style='color:red;'> EmployeeId is 1 </span><# } else { #> EmployeeId is not 1 <# } #>"));
  
  
       })
       .DetailView(detailView => detailView.ClientTemplate( %>
           <% Html.Telerik().TabStrip()
              .Name("Tab_<#= newProductID #>")
              .Items(items =>
              {
                  items.Add().Text("Product Info").Content("<#=OriginalProduct.ProductName#>"
                        + "<div id='test'><# if(OriginalProduct.ProductID > 3) { #><span style='font-weight:bold;color:green'><#=OriginalProduct.ProductID#></span><# } else { #> Below 4 <# } #></div>"
                      );
                  items.Add().Text("Partial View Test").Content(content =>
                  {
                      return Html.testHtml();
                       
                  });                      
                        
              }).ClientEvents(events => {
                  events.OnLoad("onLoadTabStrip");
                  events.OnSelect("onSelectTabStrip");  
              }).ToHtmlString() %>
             
       <% ))
       .ClientEvents(events =>
       {
           events.OnLoad("onLoadGrid");
           events.OnDataBinding("onDataBindingGrid");
           events.OnDataBound("onDataBoundGrid");
           events.OnDetailViewCollapse("onDetailViewCollapseGrid");
           events.OnDetailViewExpand("onDetailViewExpandGrid");
             
       })
       .Pageable()
       .Sortable()
       .Render(); %>

<style type="text/css">
.LargeText
{
    font-size:2em;
    font-weight:bold;
    color:Green;
}
</style>
  
<script src="../../Scripts/2010.3.1110/jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function onLoadGrid(e) {
          
    }
  
    function onDataBindingGrid(e) {
          
    }
  
    function onDataBoundGrid(e) {
         
    }
  
    function onDetailViewCollapseGrid(e) {
         
    }
  
    function onDetailViewExpandGrid(e) {
  
    }
    function onLoadTabStrip(e) {
  
    }
  
    function onSelectTabStrip(e) {      
     $("#myDiv").addClass("LargeText");   
    }
  
</script>

public static class myHelpers
{
    public static string testHtml(this HtmlHelper helper)
    {
        return "<h3>Testing</h3>" +
                "<div id='myDiv'>My Div</div>"
               "<# if(OriginalProduct.ProductID == 5){ #>" +
                   "<span style='color:red;background:yellow'><#=OriginalProduct.ProductID#></span>" +
                "<# } else { #>" +
                    "<#=OriginalProduct.ProductID#>" +
                "<# } #>";
                        
    }
}
Tags
General Discussions
Asked by
Jamy
Top achievements
Rank 1
Share this question
or