Questions on UI for ASP.NET MVC Forum

1 answer

258 views

Scheduler Custom TimelineView with overlapping events

I'm trying to extend TimelineView so that some events overlap and others are bumped to the next line depending on their status. I can overwrite the _arrangeRows method but can't get the collidingEvents to overwrite. How do I overwrite collidingEvents from the TimelineView?

Also, why are some of the functions prefixed with "_"? ie What is difference between "render()" and "_render()"?

Scheduler

answered on 29 Mar 2017

1 answer

913 views

DropdownBox values undefined after Ajax call

Hi,

I'm having trouble to populate a Kendo DropdownBox based upon an change event of a datapicker. I see that everything is working fine, even the json that is parsed after the Ajax call (while iterating through the result) is valid by checking it using alerts (see code below). For some reason the values in my dropdownbox are "Undefined" and i don't know how to resolve this. Can someone help me out with this?

I also tried to use the setDataSource as i read here in this forum, but my dropdownbox doesn't do anything (it's not showing any data at all).

Thanks in advance.

Best Regards,

Hans Oosterhuis

The definition of the DropDownBox:

<p>@(Html.Kendo().DropDownList()

.Name("AvailableTimes")

.DataTextField("Text")

.DataValueField("Value")

)

The Ajax call to populate the dropdownbox above:

function RefreshStartTimes() {

var employeeId = parseInt($('#Appointment_EmployeeId').val());

var worktypeId = parseInt($("#Appointment_WorkTypeId").val());

var plannedDate = parseDate($("#Appointment_AfspraakVan").val());

var filtermodel = {};

filtermodel = {

EmployeeId: employeeId,

WorkTypeId: worktypeId,

PlannedDate: plannedDate

};

var filter = JSON.stringify(filtermodel);

$.ajax({

url: '@Url.Action("GetAvailabeTimeSlots", "Appointment", new { area = string.Empty })',

type: "POST",

data: filter,

dataType: 'json',

contentType: 'application/json; charset=utf-8',

success: function (listItems) {

if (JSON.stringify(listItems) != "[]") {

//var ddl = $('#AvailableTimes').data("kendoDropDownList");

//ddl.setDataSource(listItems);

//ddl.refresh();

$.each(listItems, function (i, listItem) {

$("#AvailableTimes").data("kendoDropDownList")

.dataSource.add({ "text": listItem.Text, "value": listItem.Value });

alert('Listitem is' + listItem.Text);

alert('Value is' + listItem.Value);

alert('Selected is' + listItem.Selected);

})

//$.each(listItems, function () {

// $.each(this, function (k, v) {

// /// do stuff

// $("#AvailableTimes").data("kendoDropDownList")

// .dataSource.add({ "text": k, "value": v });

// });

//});

//$("#AvailableTimes").data("kendoDropDownList").refresh();

//$('#divSearchPNResults').show();

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert("ERROR RefreshCustomerDetail:" + errorThrown);

}

});

The Ajax call itself:

public JsonResult GetAvailabeTimeSlots(AppointmentFilter filter)

{

if (filter != null)

{

var listItems = _appointmentService.GetSuitableTimesForPlannedDate(filter.WorkTypeId,

filter.EmployeeId,

filter.PlannedDate)

.Select(s => new SelectListItem { Value = s, Text = s })

.ToList<SelectListItem>();

return Json(listItems, JsonRequestBehavior.AllowGet);

}

return Json(null, JsonRequestBehavior.AllowGet);

}

DropDownList

answered on 29 Mar 2017

1 answer

1.3K+ views

Font-size and Font-family

Hello Team,

When I select 12px in Html Editor it is being set as "9" in Word Document.

Similarly

13 px in Editor is being set as "10"

14px as "10.5"

15px as "11.5"

Is there any option that I can set "14.5px" in editor so that will be "11" in word document ?

Please find the attached word document for reference.

Also I need to add "Calibri" in Font-Names drop down.

Can you please help me with this issue ASAP ? Thanks in advance.

Editor

answered on 29 Mar 2017

1 answer

189 views

Grid PDF export flickering issue

When exporting the data from the Grid to PDF, the grid causes the UI to be distorted. Grid tries to recreate the grid and a progress bar is shown in the UI. Once pdf is generated, the grid comes back to normal before the browser save/cancel dialog is displayed.

So what is causes this flickering and how can i change (hide) this progress bar behavior.

The Grid uses the server side side binding. So the data is already available at the browser.

Grid

answered on 29 Mar 2017

1 answer

76 views

ClientDetailTemplateId - when RTL open icon is heading the wrong direction

Hi all

I have built a grid which uses ClientDetailTemplateId to display details per order row.

I am also using the RTL style to display the grid aligned to RTL languages.

Yet the icon to open the details for each row is still displayed to the LTR direction.

Any idea how to fix this?

Here is a working (or not working) sample code

Thanks

<div class="k-rtl">

<div class="container-fluid">

<div class="row">

<div class="col-xs-18 col-md-12">

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

<div class="orderRow">

<tr>

<td>

#:OrderID#

</td>

<td>

#:Freight#

</td>

<td>

#:OrderDate#

</td>

<td>

#:ShipName#

</td>

<td>

#:ShipCity#

</td>

</tr>

</div>

</script>

<script>

var rowTemplate = kendo.template($('#rowTemplate').html());

</script>

@(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Freight).Title("מספר ספינה");

columns.Bound(p => p.OrderDate).Title("תאריך הזמנה").Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.ShipName).Title("שם משלוח");

columns.Bound(p => p.ShipCity).Title("עיר משלוח");

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.ClientDetailTemplateId("template")

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Orders_Read", "Grid"))

)

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

)

@(Html.Kendo().ContextMenu()

.Name("menu")

.Target("#grid")

.Filter(".orderRow")

.Orientation(ContextMenuOrientation.Horizontal)

.Items(items =>

{

items.Add()

.Text("Forward");

})

)

</div>

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

@(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()

.Name("grid_#=OrderID#")

.Columns(columns =>

{

columns.Bound(o => o.OrderID).Title("מספר הזמנה").Width(110);

columns.Bound(o => o.ShipCountry).Title("ארץ משלוח").Width(110);

columns.Bound(o => o.ShipAddress).Title("כתובת משלוח").ClientTemplate("\\#= ShipAddress \\#").Width(110);

columns.Bound(o => o.ShipName).Title("שם משלוח").Width(300);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("Orders_Read", "Grid", new { employeeID = "#=OrderID#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

</div>

Grid

answered on 29 Mar 2017

1 answer

1.1K+ views

Context menu on grid rows

Hi all

I search in the forums and could not find that one thing that I am missing.

I have a simple grid implementation from your examples which I wanted to

add a context menu on it but it just does not do the job (I get the regular browser context menu).

here is my code (ASP.NET MVC)

<div class="container-fluid">

<div class="row">

<div class="col-xs-18 col-md-12">

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

<div class="orderRow">

<tr>

<td>

#:OrderID#

</td>

<td>

#:Freight#

</td>

<td>

#:OrderDate#

</td>

<td>

#:ShipName#

</td>

<td>

#:ShipCity#

</td>

</tr>

</div>

</script>

<script>

var rowTemplate = kendo.template($('#rowTemplate').html());

</script>

@(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()

.Name("AgilePointDashboardGrid")

.Columns(columns =>

{

columns.Bound(p => p.OrderID).Filterable(false);

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

columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");

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

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

})

.ClientRowTemplate("#=rowTemplate(data)#")

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Orders_Read", "Grid"))

)

@(Html.Kendo().ContextMenu()

.Name("menu")

.Target("#AgilePointDashboardGrid")

.Filter(".orderRow")

.Orientation(ContextMenuOrientation.Horizontal)

.Items(items =>

{

items.Add()

.Text("Forward");

})

)

</div>

<script>

$(document).ready(function() {

var menu = $("#menu");

var original = menu.clone(true);

original.find(".k-state-active").removeClass("k-state-active");

var initMenu = function () {

menu = $("#menu").kendoContextMenu({

target: "#AgilePointDashboardGrid",

filter: ".orderRow",

select: function(e) {

// Do something on select

}

});

};

initMenu();

});

</script>

</div>

I would love to know what am I missing here

Thanks

Grid

answered on 29 Mar 2017

1 answer

257 views

Kendo MVC Grid call Webapi caught error.

I am using two project MVC Controller project and Web api Controller, I am having telerik MVC kendo grid(Client side grid), In the grid I have called web api (Server side), Get and Post is woking fine but PUT and DELETE is getting error. I have done the CORS but still getting error.

Please find the code snippet and error details below.

MVC Controller Code :

@(Html.Kendo().Grid<EditableCity>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.iCityID).Hidden();
columns.Bound(c => c.sCityDesc).Title("City Description");
columns.Bound(c => c.sCountryCode).Title("Country");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => { toolbar.Create(); })
.Editable(ed => ed.Mode(GridEditMode.PopUp))
.Selectable()
.Filterable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.WebApi()
.PageSize(20)
.Model(m => m.Id(p => p.iCityID))
.ServerOperation(false)
.Read(read => read.Url("http://localhost:60018/api/city"))
.Create(create => create.Url("http://localhost:60018/api/city").Type(HttpVerbs.Post))
.Update(Update => Update.Url("http://localhost:60018/api/city/").Type(HttpVerbs.Put))
.Destroy(del => del.Url("http://localhost:60018/api/city/").Type(HttpVerbs.Delete))
)
)

CORS in WebApiConfig - Register

var cors = new EnableCorsAttribute("http://localhost:60018", "*", "*");
config.EnableCors(cors);

Web API controller Code:

//[RoutePrefix("api/catalog")]
public class CityController : ApiController
{
CityBL cityBL = new CityBL();

// GET: api/City
//[Route("city")]
[ResponseType(typeof(IQueryable<EditableCity>))]
[CacheFilter(TimeDuration = 10)]
//[Authorize]
public async Task<DataSourceResult> Get([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))] DataSourceRequest request)
{
var susername = HttpContext.Current.User.Identity.Name;
var gridData = await cityBL.GetCity();
var result = new DataSourceResult()
{
Data = gridData,
Total = gridData.Count()
};

return result;
}

// GET: api/City/5
//[Route("city/{id}")]
[ResponseType(typeof(EditableCity))]
public async Task<IHttpActionResult> Get(int id)
{
var result = await cityBL.GetCityById(id);
return Json(result);
}

// POST: api/City
public async Task<IHttpActionResult> Post(EditableCity value)
{
if (value.iCityID > 0)
await cityBL.UpdateCity(value);
else
await cityBL.InsertCity(value);

return Json(value);
}

//// PUT: api/City/5
//public async Task<IHttpActionResult> Put(EditableCity value)
//{
// await PutCity(value.iCityID, value);
// return Json(value);
//}

// DELETE: api/City/5
[HttpDelete]
public async Task<IHttpActionResult> Delete(int id)
{
await cityBL.DeleteCity(id);
return Ok();
}
}

I am getting error.(PUT and Delete)

OPTIONS http://localhost:60018/api/city/ 400 (Bad Request)

XMLHttpRequest cannot load http://localhost:60018/api/city/. Response for preflight has invalid HTTP status code 400

Uncaught SyntaxError: Unexpected token u in JSON at position 0
at Function.parse [as parseJSON] (<anonymous>)
at init.error_handler (City:76)
at init.trigger (kendo?v=GlJVUnHmCTfOQhn3vJxT3TaOscBWvurIgbVIZ_jm6_41:1)
at init.error (kendo?v=GlJVUnHmCTfOQhn3vJxT3TaOscBWvurIgbVIZ_jm6_41:1)
at Object.error (kendo?v=GlJVUnHmCTfOQhn3vJxT3TaOscBWvurIgbVIZ_jm6_41:1)
at c (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)
at Object.fireWith [as rejectWith] (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)
at b (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)
at XMLHttpRequest.<anonymous> (Scripts?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81:1)

Thanks

Suman

Grid

answered on 28 Mar 2017

1 answer

819 views

Add Only One New Row at a Time

@(Html.Kendo().Grid<BranchDirectoryProject.Domain.Models.BranchListModel>

()

.Name("GridOfBranchList")

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Events(e => e.Save("onSave"))

.Columns(columns =>

{

columns.Bound(c => c.BranchID);

columns.Bound(c => c.OpCo)

.Width(120);

})

//.ToolBar(tools => tools.Excel())

.ToolBar(toolBar =>

{

toolBar.Create();

toolBar.Save();

})

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

.Scrollable()

.Groupable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(c => c.BranchID);

})

.Read(read => read.Action("GridOfBranchList_Read", "Home"))

.Create(create=> create.Action("BranchUpdate", "Home").Data("AdditionalData"))

.Update(update => update.Action("BranchUpdate", "Home"))

.PageSize(20)

))



</div>

    <script>

        var eventobject;

        function AdditionalData(e) {

            alert("this is an alert");

            console.log(eventobject.model.BranchID);

            return {

                branch: eventobject.model.BranchID,

                OpCo : eventobject.model.OpCo

            }

        }

function onSave(e) {

            

            

            //if (e.model.BranchID != null) {

             //   branchBox = e.model.BranchID;

           // }

           // if (e.model.OpCo != null) {

          //      opcoBox = e.model.OpCo;

           // }

            console.log("Event Object");

            console.log(typeof(e));

            console.log("BranchBox");

            console.log(branchBox);

            console.log("e.model.BB");

            console.log(e.model.BranchID);

            console.log("opcoBox");

            console.log(opcoBox);

            console.log("e.model.OCB");

            console.log(e.model.OpCo);

            console.log(e.values.BranchID);

            eventobject = e;

Hi,

This is what my current kendo grid looks like. The scenario involves a sql table with the aim of displaying the contents of that table and providing the functionality to insert rows containing user entered data. Currently, I am providing that functionality with the toolbar kendo provides. I have a helper class in my controller which I am using to take the data from the client and place it in the action method. You can see the AdditionalData function which I have placed in my view and the onSave event below it. Those two are related to the helper class in the controller and I am using them to get the KendoGrid data back to my controller. I am not confident that this is the cleanest way to perform all of this, and any suggestions on that front are welcome.

However, my functionality is present in the current solution I have. I just dont understand why its not giving me errors when a user tries to add two rows at the same time. When the user clicks the add row button twice, it spawns two empty rows in the grid. If they go down and put data into both rows and then click save, both rows will be conveniently inserted into my database without crashing anything. How is this possible? The eventObject in the onSave event will be assigned twice and overwritten once. Yet the additionalData function will properly be called twice with distinct values of the eventObject each time.

Can anyone walk me through this code so that I can learn a little more? I want to know why additionalData doesnt get called twice with whatever value is last written to the eventObject variable. Will it continue to perform properly no matter how many empty rows are created with a single click of the save button? Or will it break at some limit or on some network conditions? I suspect there is a race condition. Lets talk about that.

And can anyone tell me how to disable the addRow Button in the toolbar? It would be great if the user could only click this once per click of the save button. So that they can only insert one row at a time. And can anyone tell me how to create a custom toolbar button that is basically a wrapper around the pre-defined toolbar buttons? Or how can I recreate the create toolbar button such that all of the interesting things that it does for me are exposed in my source code, so that I may properly fiddle with it? I would really like to be able to crack open the create toolbar button and see all of the things going on inside of it so that I can better understand the grid and so I can better devise custom solutions. I like having the knowledge of custom solutions in my back pocket because it means less time browsing the forums for out of the box solutions.

Thank you. Let me know if I can clarify anything.

Grid

answered on 28 Mar 2017

2 answers

997 views

Sorting items on autocomplete options while filtering

Hi,

I use filtering on kendo grid in row mode. This works fine, except one detail. I want to have the list sorted, not in that order you can see in the attached screen. I've noticed that if I changed the sort option to "Sort(sort => sort.Add("ClientName")", the autocomplete would get the items alphabetically. But what about another fields, where I also want to have the right order. And of course I don't want to change the global order.

@(Html.Kendo().Grid<PostTaskModel>().Name("AktualneGrid")

.Columns(cols =>

{

cols.Bound(p => p.CaseNumber).Width(80).ClientTemplate("#=gotoTaskWindow(data.CaseNumber, data.Ident)#")

.HtmlAttributes(new { @class = "link-cell" }).Locked().Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

cols.Bound(p => p.Subject).Width(200).ClientTemplate("<b>#=Subject#</b>").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

cols.Bound(p => p.DocumInfo).Width(50).Title("Niep.wiad.").ClientTemplate("#=BoldNotRead(data.DocumInfo, data.NoReadCnt)#");

cols.Bound(p => p.Description).Width(600).ClientTemplate("#:Truncate(Description, descLength)#").Title("Opis zgłoszenia . . . . .")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

cols.Bound(p => p.ModifyDate).Width(60).Format("{0:yyyy-MM-dd HH:mm}");

cols.Bound(p => p.Applicant).Width(100).Filterable(ftb => ftb.Multi(true));

cols.Bound(p => p.FinishTerm).Width(60).ClientTemplate("#=BoldBeforeNow(data.FinishTerm)#");

cols.Bound(p => p.EmployeeName).Width(100).Filterable(ftb => ftb.Multi(true));

cols.Bound(p => p.ClientName).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

cols.ForeignKey(p => p.IssueKindId, (IEnumerable)ViewData["casetypes"], "Ident", "Description")

.Title("Nazwa rodzaju").Width(200).Filterable(ftb => ftb.Multi(true)).Hidden();

cols.ForeignKey(p => p.Priority, (IEnumerable)ViewData["priorities"], "Symbol", "Description")

.Title("Opis kategorii").Width(100).Filterable(ftb => ftb.Multi(true));

cols.Bound(p => p.ProductName).Width(200).Filterable(ftb => ftb.Multi(true));

})

.Sortable()

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

.Pageable(pager => pager.PageSizes(new[] { 10, 15, 20, 30, 50 }).Input(true).Refresh(true))

.Groupable()

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

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

.ColumnMenu()

.Navigatable()

.Selectable(sel => sel.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))

.AllowCopy(true)

.HtmlAttributes(new { style = "min-width:1840px;" })

.Events(e => e.DataBound("gridFocusDataBound"))

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.Ident))

.ServerOperation(false)

.Sort(sort => sort.Add("ModifyDate").Descending())

.Read(read => read.Action("Aktualne_Read", "Async").Data("filterGrid"))

.Events(events => events.Error("errorHandler"))

))

I will be grateful for your help

Josef

Grid

answered on 28 Mar 2017

4 answers

550 views

Kendo Date Picker Date disappears in Chrome

Hi,

I have a datepicker on a page which was working perfectly until yesterday. Suddenly it stopped showing existing dates in Chrome. if I select new date from the picker it works fine. I get a javascript error in the browser. I have posted similar questions with javascript error couple of years back. http://www.telerik.com/forums/date-format-error-with-date-picker

It was resolved at that time using the Format.

@(Html.Kendo().DatePickerFor(m => m.BirthDate)

.Name("BirthDate")

.Value(Model.BirthDate)

.Format("MM/dd/yyyy")

.HtmlAttributes(new { @class = "form-control" }) )

Now as per the suggestion in the above link, i have change the code like this

@(Html.Kendo().DatePickerFor(m => m.BirthDate)

.Name("BirthDate")

.HtmlAttributes(new { type = "text" })

.Value(Model.BirthDate)

.Format("MM/dd/yyyy")