CODEWITHSUNDEEP
asp.net-mvc-3razortelerik-mvc
Anurag Mittal
Anurag Mittal

Reputation: 39

Telerik Tabstrip (Tabs on demand ) is not working properly

My Partial View contains this code: 

   @( Html.Telerik().TabStrip()
        .Name("MeasurementScheme")
        .Items(tab =>
        {
            tab.Add()
                .Text("Weight Measure")
                .LoadContentFrom("IndexWeight", "MeasurementScheme")
                .Selected(true);




            tab.Add()
                .Text("Dimension Measure")
                .LoadContentFrom("IndexDimension", "MeasurementScheme");




        })
        )

But when i run my code it only displayed the partial view of first tab and when clicked on second tab it doesn't call the second one.

and one more think when i change the .selected property of second tab to true rather than first than second tab works fine and first doesn't call its view?

Ok kk This is my controller

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using CommerceSuite.Services;
  using CommerceSuite.Web.Models;
  using CommerceSuite.Data;
  using System.Web.Mvc.Html;
  using CommerceSuite.Web.Infrastructure;
  using CommerceSuite.Web.Models.MeasurementScheme;
  using Telerik.Web.Mvc;
  using System.Threading;
  namespace CommerceSuite.Web.Controllers
  {
      public class MeasurementSchemeController : BaseCsController
{
    private readonly IMeasurementSchemeService _measurementSchemeService;
    public MeasurementSchemeController(IMeasurementSchemeService measurementSchemeService)
    {
        this._measurementSchemeService = measurementSchemeService;
    }

    public ActionResult Index()
    {
        return PartialView("_Index");
    }

    // Default Partial View Page of Measure Dimension
    public ActionResult IndexDimension()
    {
        return PartialView("_IndexDimension");
    }

    // return Json List of All MeasureDimension - Method is Invoked in Index Partival View 
    [GridAction]
    public ActionResult MeasureDimensionView()
    {
        var dimensionCollection= _measurementSchemeService.GetAllMeasurementDimension().Select(x=>
            new MeasureDimensionModel()
        {
           MeasureDimensionId=x.MeasureDimensionId,
           Name=x.Name,
           Symbol = x.Symbol,
           Ratio=x.Ratio.Value,
           IsActive=x.IsActive
        });
        return Json(dimensionCollection, JsonRequestBehavior.AllowGet);
    }

    public ActionResult IndexWeight()
    {
        return PartialView("_IndexWeight");
    }

    // return Json List of All MeasureDimension - Method is Invoked in Index Partival View 
    [GridAction]
    public ActionResult MeasureWeightView()
    {
        var weightCollection = _measurementSchemeService.GetAllMeasurementWeight().Select(x =>
           new MeasureWeightModel()
           {
               MeasureWeightId = x.MeasureWeightId,
               Name = x.Name,
               Symbol = x.Symbol,
               Ratio = x.Ratio.Value,
               IsActive = x.IsActive
           });
        return Json(weightCollection, JsonRequestBehavior.AllowGet);
    }

and this is my partial view _Index.cshtml

        @model CommerceSuite.Web.Models.MeasurementScheme.MeasureWeightModel

       @{
        ViewBag.Title = "Measurement Information";
         Layout = "~/Views/Shared/_LayoutPartial.cshtml";

        }

      @Html.Partial("~/Views/Shared/_Notifications.cshtml")

    <div style="margin-top: 10px; background-color:rgba(18, 149, 223, 0.35); color:#000000; text-align:center; border-bottom-style:dotted; border-top-style:dotted; border-top-width:1px; border-top-color:#aaa; border-bottom-width:1px; border-bottom-color:#aaa;">
 <h1 style="font-size: 17px; line-height:24px; font-weight:normal;">Measurement Schemes</h1>


   @section LeftOption{
<a href="#"><img src="@Url.Content("~/Content/themes/myicons/home.png")" width="28px;" title="Home" alt="Home" /></a> &nbsp;&nbsp;&nbsp;
<a href="#"><img src="@Url.Content("~/Content/themes/myicons/back.png")" width="28px;" title="Back" alt="Back" /></a> &nbsp;&nbsp;&nbsp;
<a href="#"><img src="@Url.Content("~/Content/themes/myicons/forward.png")" width="28px;" title="Forward" alt="Forward" /></a> &nbsp;&nbsp;&nbsp;
<a href="#"><img src="@Url.Content("~/Content/themes/myicons/refresh.png")" width="28px;" title="Refresh List" alt="Refresh" /></a> &nbsp;&nbsp;&nbsp;
<a href="#"><img src="@Url.Content("~/Content/themes/myicons/search.png")" width="28px;" title="Search" alt="Search" /></a>
 }
 @section RightOption{
<a href="#" Onclick="csPopupOpen('Add Measurement Scheme','@Url.Action("Create")')"><img src="@Url.Content("~/Content/themes/myicons/add.png")" width="28px;" title="Add New" alt="Add" /></a> &nbsp;&nbsp;&nbsp;
<a href="#" Onclick="csPopupOpen('Delete Measurement Scheme','@Url.Action("#")')"><img src="@Url.Content("~/Content/themes/myicons/delete.png")" width="28px;" title="Delete" alt="Delete" /></a> &nbsp;&nbsp;&nbsp;
<a href="#" Onclick="csPopupOpen('Print Measurement Schemes','@Url.Action("#")')"><img src="@Url.Content("~/Content/themes/myicons/print.png")" width="28px;" title="Print List" alt="Print" /></a>

}


     @( Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(tab =>
        {

             tab.Add()
                .Text("Dimension Measure")
                .LoadContentFrom("IndexDimension", "MeasurementScheme")
                .Selected(true);


            tab.Add()
               .Text("Weight Measure")
               .LoadContentFrom("IndexWeight", "MeasureWeight");


        })

        )

and this is a partia view of measureweight _IndexDimension

  @model CommerceSuite.Web.Models.MeasurementScheme.MeasureDimensionModel

      @(Html.Telerik().Grid<CommerceSuite.Web.Models.MeasurementScheme.MeasureDimensionModel>()
                   .Name("MeasurementScheme")          
           .DataBinding(databinding => {
               databinding.Ajax().Select("MeasureDimensionView", "MeasurementScheme");
           })
           .Columns(columns =>
               {
                  columns.Bound(p=>p.MeasureDimensionId)
                  .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= MeasureDimensionId #>' />")
                  .HeaderTemplate(
                    @<text>
                        <input type="checkbox" title="Select/Unselect All Records" id="checkAllRecords" />
                               </text>
                )
                  .Title("")
                  .Width(40)
                  .HtmlAttributes(new { style = "text-align:center" });
                   columns.Bound(p => p.Name).Width(300); 
                   columns.Bound(p => p.Symbol).Width(100);
                   columns.Bound(p => p.Ratio).Width(100);
                   columns.Bound(p => p.IsActive).Width(75);
                   columns.Bound(p => p.IsActive).Title("Update").Sortable(false).Filterable(false).Width(50)
                   .ClientTemplate("<img src='../../Content/themes/myicons/edit.png' title='Edit' width='20' onclick='csPopupOpen(\"HELLO\",\"" + @Url.Action("EditDimension") + "\",<#=MeasureDimensionId #>,\"" + @Url.Action("IndexDimension") + "\")' value='Edit' > <img src='../../Content/themes/myicons/del.ico' width='20' title='delete' name='<#=MeasureDimensionId #>' onclick='csPopupOpen(\"HELLO\",\"" + @Url.Action("Delete") + "\",<#=MeasureDimensionId #>)' value='Delete' > ").Width(50);
                })
           .Pageable()
           .Scrollable()
           .Sortable()
           .Groupable()
     )

and this is a partial view of MeasureDimension _IndexDimension.cshtml

  @model CommerceSuite.Web.Models.MeasurementScheme.MeasureDimensionModel

@(Html.Telerik().Grid<CommerceSuite.Web.Models.MeasurementScheme.MeasureDimensionModel>()
                   .Name("MeasurementScheme")          
           .DataBinding(databinding => {
               databinding.Ajax().Select("MeasureDimensionView", "MeasurementScheme");
           })
           .Columns(columns =>
               {
                  columns.Bound(p=>p.MeasureDimensionId)
                  .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= MeasureDimensionId #>' />")
                  .HeaderTemplate(
                    @<text>
                        <input type="checkbox" title="Select/Unselect All Records" id="checkAllRecords" />
                               </text>
                )
                  .Title("")
                  .Width(40)
                  .HtmlAttributes(new { style = "text-align:center" });
                   columns.Bound(p => p.Name).Width(300); 
                   columns.Bound(p => p.Symbol).Width(100);
                   columns.Bound(p => p.Ratio).Width(100);
                   columns.Bound(p => p.IsActive).Width(75);
                   columns.Bound(p => p.IsActive).Title("Update").Sortable(false).Filterable(false).Width(50)
                   .ClientTemplate("<img src='../../Content/themes/myicons/edit.png' title='Edit' width='20' onclick='csPopupOpen(\"HELLO\",\"" + @Url.Action("EditDimension") + "\",<#=MeasureDimensionId #>,\"" + @Url.Action("IndexDimension") + "\")' value='Edit' > <img src='../../Content/themes/myicons/del.ico' width='20' title='delete' name='<#=MeasureDimensionId #>' onclick='csPopupOpen(\"HELLO\",\"" + @Url.Action("Delete") + "\",<#=MeasureDimensionId #>)' value='Delete' > ").Width(50);
                })
           .Pageable()
           .Scrollable()
           .Sortable()
           .Groupable()
     )

thats all about it

Upvotes: 0

Views: 2024

Answers (1)

Anurag Mittal
Anurag Mittal

Reputation: 39

Yeaah i found the Solutuion

I was using the same grid name in both the partial view that was the error

  @(Html.Telerik().Grid<ProjectName.Web.Models.MeasurementScheme.MeasureDimensionModel>()
               ***.Name("MeasurementScheme")***//This is the problem

  @(Html.Telerik().Grid<CommerceSuite.Web.Models.MeasurementScheme.MeasureDimensionModel>()
               ***.Name("MeasurementScheme")***//same as previous

we cant use same name of a grid.

Upvotes: 1

Related Questions