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

[Solved] Telerik MVC Grid

1 Answer 67 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Praivn
Top achievements
Rank 1
Praivn asked on 02 Jan 2013, 12:28 PM
I created every thing, paging and sorting is working fine, but resizing and filtering is not working.
For resizable, i find that <div class=t-resize-handle"><div> is not adding in my grid.
I added folowing css and js file.

CSS

<link href="@Url.Content("~/Content/css/telerik/telerik.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/telerik/telerik.vista.min.css")" rel="stylesheet" type="text/css" />

JS
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.common.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.draganddrop.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/telerik/telerik.grid.grouping.min.js")" type="text/javascript"></script>

/////////////////////////-------------------------------------------------------------------------------------//////////////////////////////
Action code
public ActionResult ColumnResizing(IDictionary<string, int> config)
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
            var activityModelList = new List<ActivityModel>();

            activityModelList.Add(new ActivityModel {action_type_code =12, activity_id = "ere", activity_no = "3odod" });
            activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
            activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
            activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
            activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });
            activityModelList.Add(new ActivityModel { action_type_code = 12, activity_id = "ere", activity_no = "3odod" });

            if (config != null)
            {
                config = new Dictionary<string, int>
                {
                    {"GridWidth", 0},
                    {"OrderIDWidth", 100},
                    {"ContactNameWidth", 200},
                    {"ShipAddressWidth", 450},
                    {"OrderDateWidth", 130}
                };
            }
            ViewData["config"] = config;

            return View(activityModelList);
        }

//////////////////////////-------------------------------------------------------------------------------------//////////////////////////////
View Code
@model IEnumerable<ConsultationActivitiesModel>
@{
    var config = (IDictionary<string, int>)ViewData["config"];
}    
@{ Html.BeginForm("columnresizing", "grid"); }    
<p>
    @{
       int i = 0;
       foreach (var setting in config)
       {
           // Create a hiden for the key and value of each item in the dictonary
           
            @Html.Hidden("config[" + i + "].key", setting.Key)
            @Html.Hidden("config[" + i + "].value", setting.Value)
           
           i++;
       }
    }

</p>
@{ Html.EndForm(); }
@(Html.Telerik().Grid(Model)
        .Name("Grid")
        .TableHtmlAttributes(new { style = "width:" + (config["GridWidth"] > 0 ? config["GridWidth"] + "px" : "100%") })
        .Columns(column =>
        {
            column.Bound(p => p.action_type).Title("Activity").Width(400);
            column.Bound(p => p.facility_name).Title("Facility Name").Width(350);
            column.Bound(p => p.Due_Date).Format("{0:d}").Groupable(false).Title("Due Date").Width(100);
        })
        .Scrollable()
        .Resizable(resizing => resizing.Columns(true))
        .Sortable()
        .Pageable()
        .Filterable()
        .ClientEvents(events => events.OnColumnResize("onResize"))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_ColumnResizing", "Grid"))
            .Resizable(c =>
            {
                c.Columns(true);
            })
            .Reorderable(c =>
            {
                c.Columns(true);
            })
            .ColumnContextMenu()

)
<script type="text/javascript">
    function onResize(e) {
        // update the hidden values which will be posted as IDictionary<string,int>
        var grid = $('#Grid').data('tGrid');
        $('#config_0__value').val(grid.$tbody.outerWidth());
        var index = $.inArray(e.column, grid.columns) + 1;
        $('#config_' + index + '__value').val(e.newWidth);
    }
</script>

is not working fine for resizing.
Kindly help.
Thanks
Pravin

1 Answer, 1 is accepted

Sort by
0
Mehmet Faruk
Top achievements
Rank 1
answered on 24 Jan 2013, 02:27 PM
Hi,
I'm dealing with a similar issue. I think our problem might be the same. I, also, have paging and sorting working fine but when I want to filter, group etc. it doesn't work properly. I figured out that it's a problem related with the 'urlFormat' property telerik grid uses. Because it gets the language and controller names right but the area part is missing. For example; it navigates to

"http://localhost:56870/tr/User?Users-page=1&Users-orderBy=~&Users-groupBy=~&Users-filter=UserName~eq~'enes'"

instead, it should go to:

http://localhost:56870/tr/Manager/User?Users-page=1&Users-orderBy=~&Users-groupBy=~&Users-filter=UserName~eq~'enes'

When I change the url to the correct one manually myself, i can see the correct filtered/grouped result. And in the page source it shows:

urlFormat:'/tr/User?Users-page=%7B0%7D&Users-orderBy=%7B1%7D&Users-groupBy=%7B2%7D&Users-filter=%7B3%7D'

So, the wrong url, i think, originates from this 'urlFormat' part. But since I'm not experienced much, I cannot solve the issue. Any help would be appreciated...
Tags
Grid
Asked by
Praivn
Top achievements
Rank 1
Answers by
Mehmet Faruk
Top achievements
Rank 1
Share this question
or