Questions on UI for ASP.NET MVC Forum

1 answer

122 views

Grid binding to a collection list need to set the group columns fro mthe c# code

Hi all,

I'm having a already existing code where currently it is using a ulrtawebgrid (infragistic control). Now I'm in the process of replacing the grid to telerik rad grid.
The problem is that i need to bind the grid programatically and also need to set the group field and al. I have saw so many grouping C# code with a simple list.

If any of you have done the dynamic binding and grouping in C# from a list collection please let me know or share the code snippet.

Thanks in advance ,
Sabitha

Grid

answered on 26 Jan 2015

1 answer

1.2K+ views

Trigger select event manully pass item and item value to event handler

I set the selected item using the first code block below. But I need to pass the item and items value to the selected event function. Which is the second code block below. i also included the code for the Dropdownlist, the third code block. How do I do this? Thanks

function onIncDataBound() {

var dropdownlist = $("#IncludeExclude").data("kendoDropDownList");

if (dropdownlist.dataSource.data().length == 1) {

debugger;

var items = $("li.k-state-selected", $("#IncludeExclude-list"));

dropdownlist.trigger("select", { item: items, value: dropdownlist.text() });

}

function onInExSelect(e) {

debugger;

var projSq = '@Model.Project.ProjSq';

var typeDol = $('#type').val();

var county = $('#county').val();

var dataItem = this.dataItem(e.item);

var incExc = dataItem.Value;

var Url = '@Url.Action("GetDecision", "Shared")';

$.ajax({

url: Url,

type: 'GET',

dataType: 'HTML',

data: { cnty: county, projSq: projSq, includeExclude: incExc, type: typeDol }

})

@(Html.Kendo().DropDownListFor(d => d.RequestFlatten.IncludeExclude)
     .Name("IncludeExclude")
      .HtmlAttributes(new { style = "width:450px" })
      .OptionLabel("Select Include/Exclude")
      .DataTextField("Description")
      .DataValueField("Value")
      .CascadeFromField("Type")
      .Events(e => e.Select("onInExSelect").DataBound("onIncDataBound"))
      .CascadeFrom("FdolTypeCode")
        .AutoBind(false)
        .Enable(false)
        .DataSource(ds => ds.Read(r => r.Action("GetIncludeExcludeByCountyAndType", "Shared").Data("filterIncludeEx"))
      .ServerFiltering(true)))
@Html.HiddenFor(h => h.RequestFlatten.IncludeExclude, new { id = "incExc" })

DropDownList

answered on 23 Jan 2015

3 answers

113 views

Grid goes beyond its splitter pane

Our main window is vertically split into two. Left side has a grid and right has other views. We have also enabled Tooltip for the grid. We observed that even if the user moves the mouse pointer beyond the left splitter pane, the tooltip does not disappear. When we inspected the HTML elements, beyond the visible left pane, tr element of all grid rows extends to the right edge of the body and hence mouseout event does not occur.

We attempted to set the grid height and width to match the splitter pane without any success. We have observed this behavior in IE, Chrome and Firefox. We did not try in other browsers.

How to set the grid height and width same as that of splitter pane?

Grid

answered on 23 Jan 2015

1 answer

265 views

Auto Save and Move Down One Cell

When the user presses the Enter Key, I want to Save the changes and Move Down one cell unless I'm already on the last cell, then just stay there. I have the Save part working, but every time it saves the focus jumps to the upper left cell of the grid.

@(Html.Kendo().Grid<TransactionDetailEditable>()
              .Name("Grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.Id).Hidden(true).Width(5);
                  columns.Bound(c => c.Sequence).Width(25).Title("Seq").Hidden();
                  columns.Bound(c => c.Account).Width(60).Title("Account");
                  columns.Bound(c => c.PropertyDataCollectorName)
                         .Width(180)
                         .Title("Data Entry Description")
                         .ClientFooterTemplate("<div style='text-align:right'>Total:</div>")
                         .HtmlAttributes(new
                         {
                             style = "text-align:right;"
                         });
                  columns.Bound(c => c.TransactionHeaderId).Width(100).Title("Header Id").Hidden();
                  columns.Bound(c => c.PropertyDataCollectorId).Width(50).Title("PDC Id").Hidden();
                  columns.Bound(c => c.Amount)
                         .Width(95)
                         .Title("Amount")
                         .Format("{0:n}")
                         .HtmlAttributes(new { style = "text-align:right;" })
                         .ClientFooterTemplate("<div style='text-align:right'>#= kendo.toString(sum, 'n2') #</div>");
                  columns.Bound(c => c.Notes)
                         .Width(150)
                         .Title("Notes");
                  columns.Bound(c => c.IsEditable).Hidden();
              })
              .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
              .Pageable(p => { p.Refresh(true); p.PageSizes(true); })
              .Navigatable()
              .Scrollable()
              .Events(e =>
              {
                  e.Save("onGridSave");
                  // e.DataBound("onDataBound");
                  e.Edit("edit");
              })
              .DataSource(d => d
                                .Ajax()
                                .Aggregates(a =>
                                {
                                    a.Add(p => p.Amount).Sum();
                                })
                                .Batch(true)
                                .PageSize(20)
                                .ServerOperation(false)
                                .Events(e => e.Error("errorHandler"))
                                .Model(model =>
                                {
                                    model.Id(p => p.Id);
                                    model.Field(p => p.Id).Editable(false);
                                    model.Field(p => p.Account).Editable(false);
                                    model.Field(p => p.PropertyDataCollectorName).Editable(false);
                                    model.Field(p => p.Amount).Editable(@ViewBag.Editable);
                                    model.Field(p => p.Notes).Editable(@ViewBag.Editable);
                                })
                                .Read(read => read.Action("Read", "TransactionDetail"))
                                .Update(update => update.Action("Update", "TransactionDetail"))
                                .Create(create => create.Action("Create", "TransactionDetail"))
                                .Destroy(destroy => destroy.Action("Destroy", "TransactionDetail")))
)
function onGridSave(e) {
setTimeout(function (e) {
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.sync();

MoveDownOneCell();
});
}

function MoveDownOneCell(){
if (!LastCellInColumn){
MoveDownSomehow;
}
}

Grid

answered on 23 Jan 2015

1 answer

283 views

Custom Filter Template for Enum Field

Hi!

Im using a viewmodel that has an enumeration named "status".
The Grid auto-generates a filter from the enum, which is cool. But I'd like to do 2 things in the grid:
1: Change the enum text
2: Hide some enum options.

I attached a print of the filter with all enum options.

This is my grid:

@(Html.Kendo().Grid<MyViewModel>()

.Name("grid" + gridName)

.ToolBar(comands => comands.Template(templateHeader))

.Columns(columns =>

{

columns.Bound(c => c.name).Title("Name");

columns.Bound(c => c.status).Title("Status");

}

.Scrollable()

.Sortable()

.Filterable()

.ColumnMenu(c => c.Messages(m => m.SortAscending("Ordem Ascendente").SortDescending("Ordem Descendente").Columns("Colunas")))

//.Pageable(pageable => pageable.Input(true).Numeric(false))

.Resizable(resizable => resizable.Columns(true))

.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action(action, controller).Data("filtroAdicionalCargasPendentes")))

)

Thanks.

Grid

answered on 23 Jan 2015

2 answers

223 views

Filtering Columns with anonymous binding

Greetings,

I've created a grid, that displays details of an root-object. The Problem ist, that the detail-object is generated dynamically, so a direct binding to columns is not possible because we don't know what members this object has.

The "anonymous" columns in the detail-object should be filterable, but this doesn't work. Weird, because grouping is working. (The DatasourceRequest-Object in the controller seems to be correct - it has filter-definitions and group-definitions).

How can i get filtering working in my anonymous object?

This is the controller (the object "DynParts" ist the ICollection of the same dynamically created objects):

public ActionResult HierarchyBinding_Types([DataSourceRequest] DataSourceRequest request)

{

IQueryable<pxCore.Type> _types =_db.Types.OrderBy(t=>t.Kurzzeichen);

DataSourceResult _dsr = _types.ToDataSourceResult(request, _type => new Typeview(_type, _db));

return Json(_dsr);

}

public ActionResult HierarchyBinding_DynParts(Guid typeid, [DataSourceRequest] DataSourceRequest request)

{

Typeview typeview= new Typeview(_db.Types.Where(w=>w.Id==typeid).FirstOrDefault(), _db);

DataSourceResult _dsr = typeview.DynParts.ToDataSourceResult(request);

return Json(_dsr);

}

This is the view:

@(Html.Kendo().Grid<pxCore.Type>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(e => e.Kurzzeichen).Width(110);

columns.Bound(e => e.Bezeichnung).Width(510);

})

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.ClientDetailTemplateId("template")

.HtmlAttributes(new { style = "height:700px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("HierarchyBinding_Types", "Types"))

)

.Events(events => events.DataBound("dataBound"))

)

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<object>()

.Name("grid_#=Id#")

.Resizable(r=>r.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("HierarchyBinding_DynParts", "Types", new { typeID = "#=Id#" }))

)

.Pageable()

.Groupable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.Sortable()

.Reorderable(r=>r.Columns(true))

.ToClientTemplate()

)

</script

Grid

answered on 23 Jan 2015

3 answers

329 views

kendo.all.min.js is loaded with every ajax request.

Hi, I have a webpage where I load the main page, and then load kendo.ui components (ASP.NET MVC) via ajax calls. On checking, the kendo.all.min.js library - all 1,5 MB of it - gets loaded with every call. That is because I have the scripts included in the page loaded via ajax. However, were I to exclude these scripts, the page loaded via ajax will not work correctly because the kendo.ui components will not work correctly.

How can I make these pages loaded via ajax use the kendo.all.min.js library loaded during the loading of the main page?

Thanks in advance.

General Discussions

answered on 23 Jan 2015

3 answers

1.6K+ views

Grid with filterable and external search inptus

Hi,

I have a sortable, pageable, filterable ajax binding grid with an external search panel inputs and a search button and i need to include these inputs values to
every grid sort, paging and filter actions.

So i need to pass the search input values to the server read action method on every action mentioned above and after that i need to add them to
the DataSourceRequest.Filters object property.

I have search the internet especially for the first part of the issue, and i was able to send additional parameter to the action method as explained
in your documentation but the the additional parameter get send on the first call only, i don't now if is the default behavior.

Any help.

Grid

answered on 22 Jan 2015

1 answer

165 views

Grid Dropdown Filter: Populate dropdown from the model object

Hi All,

Thanks Telerik for addressing my issues. I am stuck with another problem.

I want to populate the grid with dropdown filters from the model object.
Currently, my Controller does the Database call and return data is binded to the kendo grid.
Another call to DB is done as a action from the view page of the grid to populate the dropdown.
I want to avoid another DB call to populate the drowndown in the grid. It would be ideal to retrieve the data from the model object and populate the dropdown in grid.

Following is my approach.

Controller:

public ActionResult AllMessages()
{
List<LogModel> logs = this.GetAllMessages();

return View(logs);

}

public ActionResult FilterMenuCustomization_ReceivePorts(LogModel logsinput)
{

List<LogModel> logs = this.GetAllMessages();
return Json(logs.Select(e => e.ReceivePortName).Distinct(), JsonRequestBehavior.AllowGet);

}

private List<LogModel> GetAllMessages()
{
DataAccess dataAccess = new DataAccess(_LogDBConnectionString);
DataTable dt = dataAccess.GetAllMessages();
List<LogModel> outboundMessages = dt.AsEnumerable().ToList().ConvertAll(x => new LogModel
{
ReceivePortName = (string)x.ItemArray[0],
SendPortName = (string)x.ItemArray[1],
ControlID = (string)x.ItemArray[2],
SenderID = (string)x.ItemArray[3],
ReceiverID = (string)x.ItemArray[4],
loggedDate = (DateTime)x.ItemArray[5],
LogID = x.ItemArray[7].ToString(),
ReplayedCount = (int)x.ItemArray[8],
InterchangeID = x.ItemArray[9].ToString(),
AckCode = (string)x.ItemArray[10],
RetryCount = (int)x.ItemArray[11]
});

return outboundMessages;
}

View:

@using (Html.BeginForm("ReplaySelectedInboundMessages", "Home"))
{
<div id="gridContent">
<h1>All Messages</h1>
@(Html.Kendo().Grid<ViaPath.MessageReplay.MvcApp.Models.LogModel>(Model)
.Name("gridTable")
.HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})

.Columns(columns =>
{
columns.Template(@<text><input class="box" id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.LogID"/></text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
//columns.Template(p => { }).ClientTemplate("<input type='checkbox' #= CheckSelect ? checked='checked':'' # class='chkbx' />");

columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ft => ft.UI("ReceivePortsFilter"));
columns.Bound(p => p.SendPortName).Width(100);
columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
columns.Bound(p => p.ControlID).Width(100);
columns.Bound(p => p.SenderID).Width(100);
columns.Bound(p => p.ReceiverID).Width(100);
columns.Bound(p => p.InterchangeID).Width(100);
columns.Bound(p => p.ReplayedCount).Width(100);
columns.Bound(p => p.RetryCount).Width(100);
columns.Bound(p => p.AckCode).Width(20);
})
// .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Filterable()
.Pageable(page => page.PageSizes(new int[]{10,25,50,100}).Enabled(true))
.Sortable()
.Scrollable(src => src.Height("auto"))
.Resizable(resize => resize.Columns(true))

)

<br />
<br />
<input type="Submit" name="btnReplayMessage" value="Replay" title="Replay Message" \>
</div>
<script type="text/javascript">
function ReceivePortsFilter(element) {
element.kendoDropDownList({
dataSource: {
transport: {
read: "@Url.Action("FilterMenuCustomization_ReceivePorts")"
}
},
optionLabel: "--Select Value--"
});
}
</script>

}

Grid

answered on 22 Jan 2015

5 answers

965 views

Select All CheckBox Not Working

Hi All,

In ASP.NET MVC application we are using Kendo Grid, the grid is bind to a data model.
We have a Checkbox column and CheckAll check box at the header.

At the initial page load, if I click on CheckAll CheckBox it works fine but after that event the checkall doesnt work. Not sure where I am doing wrong.

I have seperate javascript file which has toggleSelection() function.

toggleSelection = function() {
var chk = document.getElementById('allBox').checked;
$(".box").attr("checked", chk);
}

Following is my .cshtml code for grid.

<body>

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

@using (Html.BeginForm("ReplaySelectedInboundMessages", "Home"))
{
<div id="gridContent">
<h1>All Messages</h1>
@(Html.Kendo().Grid<ViaPath.MessageReplay.MvcApp.Models.LogModel>(Model)
.Name("gridTable")
.HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})
.Columns(columns =>
{
columns.Template(@<text><input class="box" id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.LogID"/></text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);

columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.SendPortName).Width(100);
columns.Bound(p => p.loggedDate).Width(100);
columns.Bound(p => p.ControlID).Width(100);
columns.Bound(p => p.SenderID).Width(100);
columns.Bound(p => p.ReceiverID).Width(100);
columns.Bound(p => p.InterchangeID).Width(100);
columns.Bound(p => p.ReplayedCount).Width(100);
columns.Bound(p => p.RetryCount).Width(100);
columns.Bound(p => p.AckCode).Width(20);
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable()
.Sortable()
.Scrollable(src => src.Height(430))
.Resizable(resize => resize.Columns(true))

)

<br />
<br />
<input type="Submit" name="btnReplayMessage" value="Replay" title="Replay Message" \>
</div>


}
</body>

Grid

answered on 22 Jan 2015