Questions on UI for ASP.NET MVC Forum

2 answers

941 views

Hi,

I declared the below Kendo grid with checkbox column. Below is the javascript script

@model IEnumerable<NotificationTypesModel>

<script type="text/javascript">

The below is the kendo grid

@(Html.Kendo().Grid(Model)
.Name("NotificationTypes")
.Columns(columns =>
{
columns.Select().Width(39).HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center", tabindex = "1" });
columns.Bound(p => p.NotificationTypeID).Visible(false);
columns.Bound(p => p.IsRowSelected).Visible(false);
columns.Bound(p => p.NotificationTypeName);
})
.Pageable(page =>
{
page.PageSizes(true);
page.PreviousNext(true);
page.Input(true);
page.PageSizes(new int[] { 5, 10, 20, 50, 100 });
})
.Sortable()
.PersistSelection()
.Events(e => e.DataBound("OnNotificationsBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(5)
.Model(model => model.Id(p => p.NotificationTypeID))
.ServerOperation(false)
)
)

Below is the class I am using to bind

public class NotificationTypesModel
{
public Guid NotificationTypeID { get; set; }
public string NotificationTypeCode { get; set; }
public string NotificationTypeName { get; set; }
public bool IsRowSelected { get; set; }
}

When the page loads I am selecting the rows based on the data retrieved from the database. This is done inside the OnNotificationsBound event.

And on the page there is a button which will save the selections back to the database. The issue I am having is in the SaveNotificationPreferences() method I am not getting the records of selections from all the pages. I am unable to figure out the issue.

I am using the below version of Kendo.

2017.3.1018.545

Grid

answered on 16 Aug 2018

3 answers

646 views

Adding CSS class to parent row in client template

I have a grid that I want to have a secondary grid show if the user clicks the detail. Normally I have a databound method that is called on the parent grid to color the rows based on the data there but I don't seem to be able to do this for the parent grid if I use the client detail template for the secondary grid. Am I missing something? here is the grid declarations for both grids. It works if i remove the client detail grid.

@(Html.Kendo().Grid<tbl_Quote_Scheduled_Locations>()
.Name("locations")
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("LocationsGetList", "Import").Data("onLocationRead"))
.Update(update => update.Action("UpdateLocation", "Import"))
.Destroy(update => update.Action("DeleteLocation", "Import"))
.Aggregates(agg =>
{
agg.Add("LocationName", typeof(int?)).Count();
agg.Add(p => p.TIV).Sum();
})
.Events(e => e.RequestEnd("onChange"))
)
.Columns(columns =>
{
columns.Bound(p => p.LocationName).Title("Location Name").ClientFooterTemplate("Count: #=count#");
columns.Bound(p => p.Address).Title("Address");
columns.Bound(p => p.City).Title("City");
columns.Bound(p => p.State).Title("State");
columns.Bound(p => p.Zip).Title("Zipcode");
columns.Bound(p => p.TIV).Title("TIV").Format("{0:c}").ClientFooterTemplate("Total TIV: #=kendo.toString(sum, 'C')#");
columns.Bound(p => p.Error).Hidden(true);
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
})
.Events(e => e
.DataBound("onLocationsGridBound")
)
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Location"))
.ClientDetailTemplateId("errorTemplate")
)

Grid

answered on 16 Aug 2018

3 answers

441 views

Can't get selected (Parent)Row in Popup-Editing-Window

Hello community!

I have a problem with my grid and the popup-editing feature.

In my popup there is another grid which needs the email address from the selected row from parent grid (to get the right data in the child grid).

I already tried the "grid.dataItem(grid.select())"-Function. But its return false.

Maybe I misunderstand the problem.

This is my Main-Grid:

@(Html.Kendo().Grid<NPHE2016Management.Models.MailboxViewModel>()
.Name("mailboxes")
.Columns(columns =>
{
columns.Bound(c => c.mailboxID).Hidden();
columns.Bound(c => c.upn).Hidden();
columns.Bound(c => c.mailboxType);
columns.Bound(c => c.firstName);
columns.Bound(c => c.lastName);
columns.Bound(c => c.email);
columns.Bound(c => c.mailboxSize).Title("Mailbox Größe (MB)");
columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(150);
})
.ToolBar(toolbar => toolbar.Create())
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Sortable()
.Selectable(x => x.Mode(GridSelectionMode.Single))
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("MailboxTemplate")
.Window(window => window.Width(1000).HtmlAttributes(new { style = "width:700px;" }))
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.mailboxID))
.Read(read => read.Action("MailboxRead", "Home"))
.Create(update => update.Action("MailboxCreate", "Home")).Events(ev => ev.Error("onErrorMailbox"))
.Update(update => update.Action("MailboxUpdate", "Home")).Events(ev => ev.Error("onErrorMailbox"))
.Destroy(update => update.Action("MailboxDelete", "Home")).Events(ev => ev.Error("onErrorMailbox"))
.PageSize(20)
)
.Events(e =>
{
e.Edit("onEdit");
e.Remove("onRemove");
e.Change("onRowChange");
})
)

Thank you very much.

Best regards

Patrick

Grid

answered on 16 Aug 2018

13 answers

1.4K+ views

Grid<dynamic> and ForeignKey (for dropdown)

Hi,

I'm creating grid with dynamic model structure. But i could not use ForeignKey for dropdowns.

i'am using same viewdata method for non-dynamic grid structure and its working. Because i know model name and model tree.

I want to use dropdowns with dynamic grid structure.

var countries = _adminBusinessLayer.Get("sys_Address_Countries"); //Countries for dropdown

ViewData["Countries"] = countries;

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

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

var c = columns.Bound(column.ColumnName);

if (column.ColumnName == "CountryID")

{

//columns.ForeignKey(d => d.CountryID, (System.Collections.IEnumerable)ViewData["Countries"], "CountryID", "countryNameTr").HeaderTemplate("<

i class='fa fa-user'></i> Country");

}

...

Grid

answered on 15 Aug 2018

5 answers

1.5K+ views

ClientGroupHeaderTemplate not picking up data

Hi All,

I'm having problems when trying to add a clickable hyperlink to my header template on my grid. The idea is to add a hyperlink with the text of ClientName from the dataitem that will call my controller and pass the ClientCode of the underlying data item.

.Columns(columns =>

{

columns.Bound(u => u.ClientName)

.ClientGroupHeaderTemplate(Html.ActionLink("\"<#= ClientName#>\"", "blalbalba", "blabla", new { clientCode = "<#= ClientCode #>" }).ToString());

columns.Bound(u => u.Status).Width("50px").Title("Collat").ClientTemplate("<i class='#= Status ? 'fa fa-check fa-3x red-text' : 'fa' #'/>");

columns.Bound(u => u.Quantity).Width("100px");

columns.Bound(u => u.Security).Title("Security");

columns.Bound(u => u.Value).Format("{0:C}")

.ClientGroupFooterTemplate("#=kendo.toString(sum, '£0.00') #")

.ClientFooterTemplate("#= kendo.toString(sum, '£0.00') #").Width("100px");

columns.Bound(u => u.CollatValue).Format("{0:C}")

.ClientGroupFooterTemplate("#=kendo.toString(sum, '£0.00') #")

.ClientFooterTemplate("#= kendo.toString(sum, '£0.00') #").Title("Collat. Value").Width("100px");

})

.NoRecords("No records found")

.Pageable(pageable => pageable.Refresh(true))

.Sortable()

.Navigatable()

.AutoBind(true)

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates =>

{

aggregates.Add(p => p.Value).Sum();

aggregates.Add(p => p.CollatValue).Sum();

}).Group(group => group.Add(x => x.ClientName))

.PageSize(100)

cheers

Grid

answered on 15 Aug 2018

1 answer

900 views

Issue with custom adding a new row on a groupable kendo grid after grouping

Hi Team,

I have a custom add new row button on each row, which adds a new row adjacent to the current row which works fine with the below js code:

var grid = $("#grid").data("kendoGrid");
customRowDataItem = this.dataItem($(e.currentTarget).closest("tr"));
currentCommissionMemoId = customRowDataItem.uidCommissionMeemoBusiness;

var idx = grid.dataSource.indexOf(customRowDataItem);
console.log(idx);

var newItem = grid.dataSource.insert(idx, {});
var newRow = grid.items().filter("[data-uid='" + newItem.uid + "']");
grid.editRow(newRow);

The issue is, I am trying to do the same after grouping the grid data using the drag and drop grouping option. The add new row acts weird after grouping,

1. New row is not added adjacent to the current row

2. When trying to add a new row in a different page (grid is pageable), does not add a new row at all.

My primary intention is to add a new row inside the group after grouping the kendo grid data, is this possible?

Thank you in advance,

Sam

Grid

answered on 15 Aug 2018

5 answers

162 views

Add a link in DetailTemplate

Hello,

I would like to know if i can add an ActionLink in a column in my DetailTemplate:

The only way I've found is by using a Template , for exemple :

.Columns(col => {

col.Bound(p => p.Etat).Template(@<text>@Html.ActionLink("Edit", "Edit")</text>);

})

But like i'm already in a DetailTemplate , i get an error when i try to do this :

.DetailTemplate(
@<text>
             @(Html.Kendo().Grid<Affaire>()
                       .Name("Affaires_" + item.Id)
                       .Columns(col => {
                                                    col.Bound(p => p.Name).Template(@<text>@Html.ActionLink("Edit", "Edit")

</text>)

Is there another way to make this link work ?

Thanks

Grid

answered on 15 Aug 2018

5 answers

1.6K+ views

kendogrid return null to controller (IEnumerable<T> is null but when I use T there is only one element returned from view)

Hi,

We are using KendoGrid in "inCell" mode with "Batch" mode enabled and according to telerik examples we've created our model like following :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace webArta.Models

{

public class ASoratModel

{

public long id { get; set; }

public String name { get; set; }

public String title { get; set; }

}

Then I've create my BLL as following :

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

namespace webArta.Models

{

public class ASoratService

{

private String sqlCnStr = functions.GetConnectionString(false);

public List<ASoratModel> Read()

{

List<ASoratModel> data = new List<ASoratModel>();

using (SqlConnection connection = new SqlConnection(sqlCnStr))

{

connection.Open();

using (SqlCommand command = new SqlCommand("select * from [test]", connection))

{

using (SqlDataReader reader = command.ExecuteReader(CommandBehavior.CloseConnection))

{

while (reader.Read())

{

ASoratModel m = new ASoratModel();

m.id = (long)reader["id"];

m.title = (string)reader["title"];

m.name = (string)reader["name"];

data.Add(m);

}

return data;

}

public void Create(ASoratModel model)

{

model.name = "";

model.title = "";

String sql =

"INSERT INTO [test] (name,title) VALUES ('" + model.name + "','" + model.title + "')";

using (SqlConnection connection = new SqlConnection(sqlCnStr))

{

connection.Open();

using (SqlCommand command = new SqlCommand(sql, connection))

{

command.ExecuteNonQuery();

}

public void Update(ASoratModel model)

{

String sql =

"update [test] set name='" +model.name+"',title='"+model.title+"' where id="+model.id;

using (SqlConnection connection = new SqlConnection(sqlCnStr))

{

connection.Open();

using (SqlCommand command = new SqlCommand(sql, connection))

{

command.ExecuteNonQuery();

}

public void Delete(ASoratModel model)

{

}

and my controller as following :

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

return Json(aSoratService.Read().ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Update([DataSourceRequest] DataSourceRequest request,

IEnumerable<ASoratModel> asorats

){

foreach(var item in asorats)

{

aSoratService.Update(item);

}

return Json(asorats.ToDataSourceResult(request,ModelState));

}

and this is my view :

@using webArta.Models

@using System.Linq

@using System.Data

@(Html.Kendo().Grid<webArta.Models.ASoratModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.name);

columns.Bound(p => p.title);

//columns.Command(c =>

//{

// c.Edit();

// c.Destroy();

//});

})

.ToolBar(t =>

{

t.Save();

t.Create();

})

.DataSource(dataSource => dataSource

.Ajax()

.AutoSync(true)

.Batch(true)

.Model(m => m.Id(p => p.id))

.Read(r => r.Action("Read", "MY_CONTROLLER"))

.Create(update => update.Action("Create", "MY_CONTROLLER"))

.Update(update => update.Action("Update", "MY_CONTROLLER"))

.Destroy(update => update.Action("EditingInline_Destroy", "MY_CONTROLLER"))

.ServerOperation(true)

)

.Navigatable()

.Pageable()

.Sortable()

.Editable(ed =>

{

ed.Mode(GridEditMode.InCell);

ed.CreateAt(GridInsertRowPosition.Bottom);

})

.Scrollable()

.Filterable()

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

)

yet when we try to update the data inside the Grid the Update method will get null value for it's second argument (IEnumerable<ASoratModel> asorats) but when we omit the IEnumerable<T> we only get one item.

we want need to get collection of all items when they are updated for showing them correctly in the Grid.

We are confused since we can't find any clue where are we doing wrong.
One thing to note : we don't have any ViewModel class it is all we have that I've copied here.

Grid

answered on 15 Aug 2018

3 answers

291 views

Grid Popup editing update command

Is there a way to have the pop up editor only call the update command on an edited item when the update button is pressed on the popup? It looks like when they click in the next field to update the previous field calls the update command and it causes a lot of database overhead/ time waste if there are multiple fields that need to be updated. I may be missing something or my update code is messy (which it is) but it seems like I should be able to only have the one write back to the model instead of one after every field change.

Grid