Click here to Skip to main content
15,037,168 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hai
i have dropdown list in that every list has different column names so i have to display different grids based on selection.
can any body help me pls.

this is my view code .my code is run successfully but two grids are populated i want to display only one grid

HTML
@model FT.Models.ReportGenerationModel
@using FT.WebUI;
@using GridMvc.Html
@{
    ViewBag.Title = "VMSReports";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";

    //var grid = new WebGrid(Model.SerachedAppointmentModelList, defaultSort: "Id", rowsPerPage: 9);
    var grid = new WebGrid(Model.DptWiseReport, defaultSort: "VisitingDepartmentName", rowsPerPage: 9);
    var grid1 = new WebGrid(Model.EmpWiseReport, defaultSort: "VisitingPersonName", rowsPerPage: 9);

    // var grid = new WebGrid(Model, rowsPerPage: 9);
    
}

<h2>@Resources.Appointment.AppointmentDetailsMainHead</h2>

<script type="text/javascript">
    $(function () {

        $("#txtDatePicker").mouseenter(function () {
            $("#txtDatePicker").datetimepicker({ format: 'd/m/Y', timepicker: false });
        });

    });
    $(function () {

        $("#txtDatePicker1").mouseenter(function () {
            $("#txtDatePicker1").datetimepicker({ format: 'd/m/Y', timepicker: false });
        });

    });
</script>

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{    
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="panel panel-primary">
            <div class="panel-heading">
                <label class="control-label">@Resources.VMSResource.Reports  </label>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <div class="col-md-2">
                        <label class="control-label">@Resources.Appointment.EmployeeID   </label>
                    </div>
                    <div class="col-md-3">
                        @Html.EditorFor(model => model.EmployeeId, new { htmlAttributes = new { @class = "form-control input-sm" } })
                        @*@Html.ValidationMessageFor(model => model.Id  , "", new { @class = "text-danger" })*@

                    </div>
                </div>@*ddl for reportycategory*@
                <div class="form-group">
                    <div class="col-md-2">
                        @*<label class="control-label">@Resources.VMSResource.SelectReportCategory</label>*@
                        <label class="control-label">@Resources.VMSResource.SelectReportCategory </label>
                    </div>
                    <div class="col-md-2">
                        @* @Html.DropDownListFor(model => model.Id, new SelectList(Model.ReportcategoryList, "id", "TemplateName"), "--Select Value--", new
                       {
                           onchange = "document.getElementById('TheForm').submit();",
                           @class = "form-control  input-sm "
                       })*@
                        @*@Html.DropDownListFor(model=>model.Id ,new SelectList(Model.ReportcategoryList,"id","RFilters"),"--SelectValue--")*@
                        @*  @Html.DropDownListFor(model => model.Id, 
                            new SelectList(Model.TypeMasterName  ,"TypeDetailsCode","TypeDetailValueLang1"),
                            @Resources.VMSResource.ReportResult  , new { @class = "form-control  input-sm ", id = "ddNationality" })*@

                        @Html.DropDownListFor(model => model.TypeMasterName, new SelectList(Model.ReportcategoryList,
                          "TypeDetailsCode", "TypeDetailValueLang1", Model.TypeMasterName), "--Select Report Type--",
                          new { @class = "form-control  input-sm ", id = "ddNationality" })


                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2">
                        <label class="control-label">@Resources.VMSResource.RecurringFromDateTime </label>
                    </div>
                    <div class="col-md-3">
                        <div id="datetimepicker1">

                            @Html.EditorFor(model => model.RecurringFromDateTime, new { htmlAttributes = new { @class = "form-control input-sm", id = "txtDatePicker" } })
                            @* //<span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar" id="imgDatePicker"></span>
                            </span>//*@
                        </div>

                        @Html.ValidationMessageFor(model => model.RecurringFromDateTime, "", new { @class = "text-danger" })
                    </div>
                    <div class="col-md-2">
                        <label class="control-label">@Resources.Appointment.RecurringToDateTime </label>
                    </div>
                    <div class="col-md-3">
                        <div id="datetimepicker">

                            @Html.EditorFor(model => model.RecurringToDateTime, new { htmlAttributes = new { @class = "form-control input-sm", id = "txtDatePicker1" } })
                            @* //<span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar" id="imgDatePicker"></span>
                            </span>//*@
                        </div>

                        @Html.ValidationMessageFor(model => model.RecurringToDateTime, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <div class="panel panel-primary">
        <div class="panel-heading">
            @Resources.VMSResource.ReportResult
        </div>
        <div class="panel-body">
            <div id="gridContent" style="padding: 20px;">
                @grid.GetHtml(
            tableStyle: "gridTable",
            headerStyle: "gridHead",
            footerStyle: "gridFooter",
            rowStyle: "gridRow",
            alternatingRowStyle: "gridAltRow",
            columns:
            grid.Columns(
             grid.Column("DepartmentName", @Resources.Appointment.VisitingDepartmentName, format: @<text>  <span class="display-mode">@item.VisitingDepartmentName</span></text>, style: "col1Width"),
             grid.Column("To", @Resources.Appointment.RecurringToDateTime, format: @<text>  <span class="display-mode">@Model.RecurringToDateTime</span> </text>, style: "col2Width"),
             grid.Column("From", @Resources.Appointment.RecurringFromDateTime, format: @<text>  <span class="display-mode">@Model.RecurringFromDateTime</span></text>, style: "col1Width"),
             grid.Column("Company Address", @Resources.Appointment.CompanyName, format: @<text>  <span class="display-mode">@item.CompanyName</span> </text>, style: "col2Width"),
             grid.Column("ContactPersonName", @Resources.Appointment.ContactPersonName, format: @<text> <span class="display-mode">@item.ContactPersonName</span></text>, style: "col3Width"),
             grid.Column("ReasonForVisit", @Resources.Appointment.ReasonForVisit, format: @<text> <span class="display-mode">@item.ReasonForVisit</span></text>, style: "col3Width"),
              grid.Column("Intime", @Resources.Appointment.VisitorCheckInTime, format: @<text> <span class="display-mode">@item.VisitorCheckInTime</span></text>, style: "col3Width")
        //grid.Column("Export to excel", format: @<text><button type="submit" class="btn btn-primary pull-right btn-sm RbtnMargin" onclick="location.href='@Url.Action("ViewAppointment", "Appointment", new { aId = Model.AppointmentID })'">@Resources.Appointment.View</button></text>)
           ))
          
            </div>
        </div>
    </div>
    <style type="text/css">
        .gridTable {
            margin: 4px;
            border-collapse: collapse;
            width: auto;
            /*background-color: #B4CFC3;*/
            border: groove;
        }
    </style>
      <div class="panel panel-primary">
        <div class="panel-heading">
            @Resources.VMSResource.ReportResult
        </div>
        <div class="panel-body">
            <div id="gridContent" style="padding: 20px;">
                @grid1.GetHtml(
            tableStyle: "gridTable",
            headerStyle: "gridHead",
            footerStyle: "gridFooter",
            rowStyle: "gridRow",
            alternatingRowStyle: "gridAltRow",
            columns:
            grid.Columns(
             grid.Column("Employeeid", @Resources.Appointment.EmployeeID , format: @<text>  <span class="display-mode">@item.EmployeeID</span></text>, style: "col1Width"),

             grid.Column("DepartmentName", @Resources.Appointment.VisitingDepartmentName, format: @<text>  <span class="display-mode">@item.VisitingDepartmentName</span></text>, style: "col1Width"),
             grid.Column("To", @Resources.Appointment.RecurringToDateTime, format: @<text>  <span class="display-mode">@Model.RecurringToDateTime</span> </text>, style: "col2Width"),
             grid.Column("From", @Resources.Appointment.RecurringFromDateTime, format: @<text>  <span class="display-mode">@Model.RecurringFromDateTime</span></text>, style: "col1Width"),
             grid.Column("Company Address", @Resources.Appointment.CompanyName, format: @<text>  <span class="display-mode">@item.CompanyName</span> </text>, style: "col2Width"),
             grid.Column("ContactPersonName", @Resources.Appointment.ContactPersonName, format: @<text> <span class="display-mode">@item.ContactPersonName</span></text>, style: "col3Width"),
             grid.Column("ReasonForVisit", @Resources.Appointment.ReasonForVisit, format: @<text> <span class="display-mode">@item.ReasonForVisit</span></text>, style: "col3Width"),
              grid.Column("Intime", @Resources.Appointment.VisitorCheckInTime, format: @<text> <span class="display-mode">@item.VisitorCheckInTime</span></text>, style: "col3Width")
                      //grid.Column("Export to excel", format: @<text><button type="submit" class="btn btn-primary pull-right btn-sm RbtnMargin" onclick="location.href='@Url.Action("ViewAppointment", "Appointment", new { aId = Model.AppointmentID })'">@Resources.Appointment.View</button></text>)
           ))
          
            </div>
        </div>
    </div>
    <style type="text/css">
        .gridTable {
            margin: 4px;
            border-collapse: collapse;
            width: auto;
            /*background-color: #B4CFC3;*/
            border: groove;
        }
    </style>

        
      
    <div class="form-group">
        <div class="col-md-offset-4 col-md-5">

            <button type="submit" class="btn btn-default ">
                <span class="glyphicon glyphicon-search"></span>Search
            </button>
            <button type="submit" class="btn btn-default ">
                <span class="fa fa-file-excel-o"></span>Get List
            </button>

        </div>
    </div>
   

}
Posted
Updated 30-Aug-15 22:36pm
v2

Hello,

Apart from Solution #1, you can do this,
Place all the grid in one View, and show/hide it using jQuery based on your selection.

Simple enough ?

-KR
   
Comments
sowjanya bantupalli 22-Sep-15 2:28am
   
but i need to display different grids
How about creating different views and then serving them based on what was selected?
   
Comments
Thanks7872 17-Sep-15 7:25am
   
How this became an answer to the question?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900