Rectangle 27 2

If you don't mind using a little jquery plugin then it might save your time. I know I used to try out all the recommendations out there in internet using css expression and javascript solutions for one of my earlier projects but it always breaks in one or the other browsers and the header column width and row column width may not align for dynamic data length.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />

function pageLoad(sender, args) {
   gridviewScroll ();

function gridviewScroll() {
   gridView1 = $('#GridView1').gridviewScroll({
        width: 915,
        height: 449,
        railcolor: "#F0F0F0",
        barcolor: "#CDCDCD",
        barhovercolor: "#606060",
        bgcolor: "#F0F0F0",
        freezesize: 5,
        arrowsize: 30,
        varrowtopimg: "../../../images/arrowvt.png",
        varrowbottomimg: "../../../images/arrowvb.png",
        harrowleftimg: "../../../images/arrowhl.png",
        harrowrightimg: "../../../images/arrowhr.png",
        headerrowcount: 1,
        onScrollVertical: function (delta) {
         // store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
        onScrollHorizontal: function (delta) {
          //store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position

And the screen print on how the frozen grid header looks in my application. You can event freeze certain columns of the grid if you have a lengthy row data. From the image the columns that are grayed out are the ones being frozen in my application.

But i want grid appear in full screen width. How it can be achieved? Also i don't want horizontal scroll bar.The column should be fixed within the screen width. If text length large in column it should take 2 or 3 more lines(wrap) but should not increase the column width and make horizontal scroll bar to appear. I am not able to do this using your solution. In my case most of the column values vary in length.

@IT researcher, if you want a full screen then don't specify the value for width parameter as shown in the js or give a greater no. You can control the style and specify width for each individual template field in gridview. I'm sure you can tweak this to fit your situation. You can prevent horizondal scrolling if your grid's width is less than the size of the page.

if width not specified then column and header does not align properly due to large length text.

Thank you.I was able to do it . By modifying "Cell Wrap" logic u mentioned in the link and then I used window.width and set the grid width. Then for some column I used fixed width using itemstyle-width and headerstyle-width, where I know that there will be fixed length strings. For other column I didn't specify width and it would display properly in all resolutions. But $(window).height() does not work good . If i set grid height to window.height then i get page scroll bar. I have a text label in that page so i used 'window.height-height of that label' But still it gives problem. Any idea?

@ITresearcher, You'll get a vertical scroll only if the data you bind to the grid exceeds the the height you set if for the grid. Something is wrong in your case. Try the other way window.height+height of that label or give some greater absolute no for the height property until you don't get the scroll. You may need to post your code so I can suggest possible solution.

c# - Gridview with fixed header and full page width grid - Stack Overf...

c# html css gridview
Rectangle 27 0

What you are looking are the old MVC extensions demos, they are deprecated. Either use the MVC Kendo Wrappers demos (QSF) or if currently using the old extensions check the migration guide referenced here.

grid - Kendo MVC columnresizing save width - Stack Overflow

grid telerik kendo-ui
Rectangle 27 0

var grid = $("#grid").data("kendoGrid");
     userData = "type='m'";
    url: "<?php echo site_url('task/getGridSavedState');?>",
    type: "post",

    dataType: "json",
    success: function(data){
                        //popout last column i.e command column
                         edit= options.columns.pop()
                         //add new command column explicitly.

        console.log("Error loding save grid state");

php - kendo ui grid edit button not working after loading persisting s...

php kendo-ui kendo-grid
Rectangle 27 0

var stationComboList = StationVM.GetComboList();
var transponderComboList = TransponderVM.GetComboList();

var grid = Html.Kendo().Grid<GroupStationTransponderVM>()
               .Columns(columns =>
                       columns.Bound(t => t.ntbOrdinal).Title("Orden").Width(80);
                       columns.ForeignKey(t => t.dllStationId, stationComboList, "Id", "Description").Title("Estaciones a utilizar").Width(180);
                       columns.ForeignKey(t => t.dllTransponderId, transponderComboList, "Id", "Description").Title("Transponders a utilizar").Width(200);
                       columns.Bound(t => t.cpColor).ClientTemplate("<div class='circle' style='background-color: #: cpColor #'></div>").Width(73);
                       columns.Command(command =>
                           }).Width(210).HtmlAttributes(new { style = "text-align: center;" });
               .ToolBar(toolbar => toolbar.Create())

               .Editable(editable => editable.Mode(GridEditMode.InLine))
               .DataSource(dataSource => dataSource
                                             .Events(events => events.Error("error_handler"))
                                             .Model(model =>
                                                     model.Id(t => t.Id);
                                                     model.Field(t => t.ntbOrdinal).DefaultValue(1);
                                                     model.Field(t => t.dllStationId).DefaultValue(42);
                                                     model.Field(t => t.dllTransponderId).DefaultValue(1);                    
                                                     model.Field(t => t.cpColor).DefaultValue(("#000000"));
                                             .Create(create => create.Action("GroupStationTransponder_Create", "Group"))
                                             .Read("GroupStationTransponder_Read", "Group")
                                             .Update("GroupStationTransponder_Update", "Group")
                                             .Destroy("GroupStationTransponder_Destroy", "Group")
               .Events(events => events.DataBound("onGrdDataBound")


As you can see on the top, I define two bars for each one of the combo list. In the VM you define a method like .GetComboList() :

public static IEnumerable<ComboItem> GetComboList()
    //here you should set you logic for getting the datasource of the combo
    return ComboItem.EnumerableFromDataTable(Transponder.GetComboList());

jquery - Show Dropdown in Kendo Grid - Stack Overflow

jquery kendo-ui kendo-grid
Rectangle 27 0

function fnAddDetails() {
        var content = {}; = $("#txtName").val();
        content.dob = $("#txtDOB").val(); = $("#ddlGroup option:selected").text(); = "No";
        if ($("#chkActive").attr("checked")) {
   = "Yes";
        var jsonText = JSON.stringify(content);
            type: "POST",
            url: "Test_sspl142_jQuery_JavaScript.aspx/GetDate",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: jsonText,
            success: function(data) {
                var dataget = $.parseJSON(data.d);
                    datatype: 'local',
                    data: dataget,
                    colNames: ['active', 'age', 'group', 'name'],
                    colModel: [
                        { name: 'name', index: 'name', width: 60 },
                        { name: 'group', index: 'group', width: 90 },
                        { name: 'active', index: 'active', width: 100 },
                        { name: 'age', index: 'age', width: 80, align: "right" }

                    rowNum: 10,
                    rowList: [10, 20, 30],
                    viewrecords: true,
                    loadonce: true
            error: function(ex) {
                alert("Error Occured while saving data in grid...");

Its not working. Still Showing the error: message - : Error Occured while saving data in grid... While debugging in browser, its once showing the jQGrid, but soon its getting destroyed. And column names are right but data within are just Undefined, as its showing.

javascript - jqgrid binding fails with error "[object Object]" in aler...

javascript jquery jqgrid
Rectangle 27 0

Please Use the following technique

<div class="DataGridXScroll">
    .DataKeys(keys => keys.Add(k => k.Unit_Code))
    .Columns(column =>
        column.Bound(s => s.Zone_Name).Width(100).HtmlAttributes(new { @class = "GridColumnLeftAlign" }).Hidden(true)
            .GroupHeaderTemplate(@<text>Zone: @item.Key</text>);
        column.Bound(s => s.Region_Name).Width(100).HtmlAttributes(new { @class = "GridColumnLeftAlign" }).Hidden(true)
            .GroupHeaderTemplate(@<text>Region: @item.Key</text>);
        column.Bound(s => s.Unit_Code).Width(100).HtmlAttributes(new { @class = "GridColumnLeftAlign" });
        column.Bound(s => s.Unit_Name).Width(150).HtmlAttributes(new { @class = "GridColumnLeftAlign" });

        column.Bound(s => s.TotalCustomer).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.TotalActiveCustomer).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.NoOfSalesInCurrentMonth).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.TotalRecoveredWithoutDP).Width(100).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.CollectionInCurrentMonth).Width(100).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.TotalOverdue).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.TotalAdvance).Width(70).HtmlAttributes(new { @class = "GridColumnRightAlign" }) .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Bound(s => s.TotalOutstanding).Width(80).HtmlAttributes(new { @class = "GridColumnRightAlign" })
             .Aggregate(aggreages => aggreages.Sum())
                .FooterTemplate(@<text> @item.Sum.Format("{0:N}") </text>)

        column.Template(@<a href="" target="_blank">Show</a>).Width(50);

        column.Bound(s => s.FinalizedByRM).Format("{0:dd-MMM-yyyy}").Width(90).HtmlAttributes(new { @class = "GridColumnLeftAlign" });
        column.Bound(s => s.FinalizedByZM).Format("{0:dd-MMM-yyyy}").Width(90).HtmlAttributes(new { @class = "GridColumnLeftAlign" });
        column.Bound(s => s.FinalizedByHO).Format("{0:dd-MMM-yyyy}").Width(90).HtmlAttributes(new { @class = "GridColumnLeftAlign" });

        column.Template(@<a href="#" onclick="return SaveSalesStatus('@item.Unit_Code','@item.FinalizedByRM','@item.FinalizedByZM','@item.FinalizedByHO');">Save</a>).Width(50);
    .Scrollable(scroll => scroll.Height(300))
    .Groupable(settings => settings.Groups(group =>
        group.Add(g => g.Zone_Name);
        group.Add(g => g.Region_Name);


Add the following CSS

    width: 1000px;
    overflow-x: scroll;
    text-align: left;

c# - Telerik Grid not styling properly when scrolling horizontal - Sta...

c# telerik telerik-grid telerik-mvc
Rectangle 27 0

@model IEnumerable<learnMVC.Models.EmployeeData>   
ViewBag.Title = "Index";

    <script lang="javascript" type="text/javascript" src=""></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

     function showPopView() {

      $("#ReplaceSection").dialog({          //resultView
        modal: true,
        width: "auto",
        height: "auto",
        position: "center",
        resizable: false,
        closeOnEscape: true,
        open: function (ev, ui) {

<h2 style="margin-left:40%">Index</h2> 

  <div style="float:right;">
    @Ajax.ActionLink("Create New Record", "Insert", 
        new AjaxOptions { HttpMethod = "GET", 
             InsertionMode = InsertionMode.Replace, 
             UpdateTargetId = "ReplaceSection",
             Confirm="Want to save this new record?"})

<div id="indexDivision" style="margin-left:25%">
        <table class="Grid" cellspacing="20">
                <th>Employee ID</th>
                <th>Employee Name</th>
                <th>Date Of Birth</th>
                <th>Date Of Joining</th>
                <th  colspan="2"></th>          

          @foreach (var p in Model)
                <td>@Html.ActionLink("Edit", "Edit")</td>
                <td>@Html.ActionLink("Delete", "Delete")</td>

    <div id="ReplaceSection">

@model learnMVC.Models.EmployeeData
@using (Ajax.BeginForm(@using (Ajax.BeginForm("InsertForm", new AjaxOptions { HttpMethod = "POST" }))) 

    <h1 style="margin-left:30%; width: 350px;">Insert New Record</h1>

        <div id="InsertDvivision" style="margin-left:30%; width: 350px;">
            <p>Employee ID :      @Html.TextBox("employeeID")</p>
            <p>Name :             @Html.TextBox("employeeName")</p>
            <p>Date Of Birth :    @Html.TextBox("dateOfBirth")</p>
            <p>Date Of Joining :  @Html.TextBox("dateOfJoining")</p>
            <p>Supervisor :       @Html.TextBox("supervisor")</p>           

        <input type="submit" value="Create" />
public ActionResult Index()
    var empList = new List<EmployeeData>();      

    EmployeeData tempvar = new EmployeeData();
    tempvar.employeeID = 40;
    tempvar.employeeName = "Amit";
    tempvar.dateOfBirth = (Convert.ToDateTime("02-02-2012")).Date;
    tempvar.dateOfJoining = (Convert.ToDateTime("02-02-2012")).Date;
    tempvar.supervisor = "Head";
    return View("Index",empList);

public PartialViewResult Insert()
    if (Request.IsAjaxRequest())
        return PartialView("Insert", new EmployeeData());
    return PartialView("Insert");

public ActionResult InsertForm(EmployeeData model)
    //do code for save
    return Json(new {Message="Successfully saved"});

NB:- Never use jquery library in both view and partial view.

If you want to reload your grid,you can move grid into partial view and return partial view with new data on success event of InsertForm action.

It would be helpful.

what about the pop up? how will i get that?

popup can be used as in your question. You can initialize dialog plugin in success event of Ajax link(Create New). I just tried to solve your issue. And I am very sorry, stackoverflow is discussion platform not a development platform. :)

c# - Ajax call not working in MVC4 (razor) for calling views in one an...

c# jquery ajax razor