Questions on UI for ASP.NET MVC Forum

4 answers

460 views

Hi,

I need to bind the datasource to ASP.NET MVC Scheduler dynamically. In my scenario, I have 5 dropdownlists. Users will select item from the dropdownlists and then click Search buton and the scheduler will load the result. How can I do that with javascript?

Please see the attached image.

@(Html.Kendo().Scheduler<TaskViewModel>()

.Name("schedulerJob")

.Date(new DateTime(2015, 8, 31))

.StartTime(new DateTime(2015, 8, 31, 7, 00, 00))

.Height(600)

.Views(views =>

{

views.TimelineView();

})

.Timezone("Etc/UTC")

.Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))

.Resources(resource =>

{

resource.Add(m => m.TechName)

.Title("Techs")

.Name("Techs")

.DataTextField("emm_code")

.DataValueField("emm_code")

.DataSource(d => d.Read("Techs", "JOBS"));

})

.DataSource(d => d

.Model(m =>

{

m.Id(r => r.emm_code);

})

.Read("JobSchedule_Read", "JOBS")

.Create("JobSchedule_Create", "JOBS")

.Update("JobSchedule_Update", "JOBS")

.Destroy("JobSchedule_Delete", "JOBS")

)

public JsonResult JobSchedule_Read([DataSourceRequest] DataSourceRequest request)

{

DateTime startDateTime;

DateTime endDateTime;

List<JscDet> JscDet = (List<JscDet>)Session["JobScheduleDateTime"];

List<TaskViewModel> tasks = new List<TaskViewModel>();

foreach (var item in JscDet)

{

startDateTime = SchedulerUtility.GetDateTimeFromSeconds(item.jsd_sch_date, item.jsd_sch_start_time);

endDateTime = SchedulerUtility.GetDateTimeFromSeconds(item.jsd_sch_date, item.jsd_sch_end_time);

tasks.Add(new TaskViewModel()

{

TaskID = item.jsd_jobno,

TechName = item.jsd_sch_assto,

emm_code = item.jsd_sch_assto,

Title = "Job Title",

Start = new

DateTime(startDateTime.Year, startDateTime.Month, startDateTime.Day, startDateTime.Hour, startDateTime.Minute, startDateTime.Second),

End = new

DateTime(endDateTime.Year, endDateTime.Month, endDateTime.Day, endDateTime.Hour, endDateTime.Minute, endDateTime.Second),

Description = "Description 101",

IsAllDay = false

});

}

return Json(tasks.ToDataSourceResult(request));

}

Thanks in advance

Scheduler

answered on 24 Sep 2015

2 answers

95 views

Loading data in blocks or alternative

I have this multiselect on my asp.net mvc project

<div class="demo-section user-selection">

<h3 class="title">1. Select one or more Users</h3>

@(Html.Kendo().MultiSelect()

.Name("customers")

.DataTextField("givenName")

.DataValueField("description")

//.Placeholder("No users selected")

.Events(events => events.Change("NewSelection"))

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCustomers", "Home");

});

})

.Height(300)

//.HtmlAttributes(new { style = "width: 400px" })

.HeaderTemplate("<div class=\"dropdown-header dropdown_Users\">" +

"<span class=\"k-widget k-header\">Photo</span>" +

"<span class=\"k-widget k-header\">Contact info</span>" +

"</div>")

.ItemTemplate("<span class=\"k-state-default item-user userPic\"><img

class=\"userPhoto\" src=\"" + @System.Configuration.ConfigurationManager.AppSettings["BaseUrl"] + "user/image?userIid=#:data.IID#\" /></

span>" +

"<span class=\"k-state-default item-user \"><h3>#: data.givenName # #: data.sn #</h3><p>#: data.description #</p></span>")

)

</div>

the data i load is of 2000 users that then appear in the multiselect list with their photo, first and last name and role.

my problem is that the loading takes about 5 or 6 seconds, and when scrolling down the list it sometimes gets a bit "clunky"
.

Is there anyway to improve the loading of data maybe making it load in blocks of 200 users at a time , or another way of improving performance?

MultiSelect

answered on 24 Sep 2015

2 answers

274 views

Detail Grid Date Format is Ignored

I have a hierarchical grid which is rendering fine except that the date formatting for the detail grid is being ignored and a JSON date is being rendered instead. The same formatting works fine in the Master grid. Data for the sub-grid comes from a List collection in the object that populates the master. The data was returned as one List of objects.

The detail grid renders

/Date(-62135568000000)/

instead of something like

01/23/2013 04:43 PM

Here's the code:

@model IEnumerable<KUI_CS_Test1.ROAMHostSvc.BatchHeader>

@{

ViewBag.Title = "Kendo UI for MVC (C#) Test App";

}

<h2>Batch List</h2>

@(Html.Kendo().Grid(Model)

.Name("batchGrid")

.Sortable()

.Pageable()

.Filterable()

.Columns(columns =>

{

columns.Bound(b => b.BatchID)

.Width("200");

columns.Bound(b => b.Transmitted_DateTime)

.Width("15")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Transmitted");

columns.Bound(b => b.Completed_DateTime)

.Width("15")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Completed");

columns.Bound(b => b.Created_DTTM)

.Width("15")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Created");

columns.Bound(b => b.Created_Emp_Name)

.Width("18")

.Title("Created By");

}

)

.ClientDetailTemplateId("transactions")

.Events(e => e.DetailInit("detailInit"))

.DataSource(dataSource => dataSource

.Ajax()

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

)

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

@(Html.Kendo().Grid<KUI_CS_Test1.ROAMHostSvc.TransactionBase>()

.Name("Transactions_#=BatchID#")

.Columns( columns =>

{

columns.Bound(t => t.ID)

.Width("200")

.Title("Transaction ID");

columns.Bound(t => t.Version)

.Width("10")

.Title("Version");

columns.Bound(t => t.TranTypeDisplayText)

.Width("15")

.Title("Tran Type");

columns.Bound(t => t.PostingFlagDisplayText)

.Width("15")

.Title("Posting Flag");

columns.Bound(t => t.Posting_DTTM)

.Width("15")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Posting Date/Time");

columns.Bound(t => t.PostingMessage)

.Width("300")

.Title("Posting Message");

})

.ToClientTemplate()

)

</script>

<script type="text/javascript" language="javascript">

function detailInit(e) {

var grid = $("#Transactions_" + e.data.BatchID).data("kendoGrid");

grid.dataSource.data(e.data.TranCollection);

}

</script>

Grid

answered on 24 Sep 2015

1 answer

390 views

Kendo MVC Grid - Preserve State issue

We are trying to implement kendo grid preserve state functionality. Requirement is a grid state (filter, page etc) is already pre saved in the db and every times page loads, we have to show grid with the pre saved state. We followed the example given in link ( http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side ) and able to achieve the requirement in two steps.
Step 1: Load the page with default grid option

@(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
      .Name("grid")
      .DataSource(ds => ds.Ajax().Read("Read", "Home"))
      .Pageable()
      .Groupable()
      .Sortable()
      .Reorderable(r => r.Columns(true))
      .Resizable(r => r.Columns(true))
)

and then,
Step 2: on document ready, make an ajax call , get the pre saved grid options , destroy the existing grid and set the grid options

$(document).ready(function ()
{
    var grid = $("#grid").data("kendoGrid");

    var dataSource = grid.dataSource;

    $.ajax({
        url: "/Home/Load",
        success: function(state) {
            state = JSON.parse(state);

            var options = grid.options;

            options.columns = state.columns;

            options.dataSource.page = state.page;
            options.dataSource.pageSize = state.pageSize;
            options.dataSource.sort = state.sort;
            options.dataSource.filter = state.filter;
            options.dataSource.group = state.group;

            grid.destroy();

            $("#grid")
               .empty()
               .kendoGrid(options);
        }
    });
});

Problems with this approach are

- grid’s data read server side method “Read” is hit twice. One for default load and other for state load.
- Grid shows all records first , then truncates and then shows the data with saved grid options. It does not look good.

Is there any way to apply the grid options first time itself, not on document ready. I want to avoid multiple server side calling and grid data reads.

Grid

answered on 24 Sep 2015

2 answers

181 views

Set specifics columns DINAMICALLY in a Kendo Grid helper

Hi,
I implemented Kendo Grid helper in a MVC 4 with WebApi application, but I don't know how can I set de column list to change dinamically the rows that it shows. I don't want put all columns, only a list of columns pre-selects by diferents criterials (user config preferences).

My Helper code:

@(Html.Kendo().Grid<Bitacora.WebUI.Models.WhiteBoard.XXXGridModel>()
.Name("Grid")
.AutoBind(true)
.EnableCustomBinding(true)
//.BindTo(Model.xxxx.YYYList)
.Columns(c =>
{
c.AutoGenerate(column =>
{
//customize autogenereted column's settings
column.Width = "150px";

//column.ClientTemplate = "<input type='checkbox' name='checkbox' />";

});
})
.Scrollable(scrolling => scrolling.Enabled(true).Height("auto"))
.Resizable(x => x.Columns(true))
.Events(events => events.Change("searchCalls"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("Search", "api/ActionApi")
.Data("getFiltersSelected")
.Type(HttpVerbs.Post))
.ServerOperation(true)) // Paging, sorting, filtering and grouping will be done server-side
//.ColumnMenu()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Reorderable(reorder => reorder.Columns(true))
.Groupable(grouping => grouping.Enabled(true))
.Filterable(filterable => {filterable
.Operators(operators =>
{operators.ForString(strFilter => strFilter.Clear().Contains("contains"));
operators.ForNumber(strFilter => strFilter.Clear());
});
filterable.Extra(false);
}) //--> sólo se muestra el contains en las columnas Texto
.Sortable(s=> s
.SortMode(Kendo.Mvc.UI.GridSortMode.MultipleColumn)
.AllowUnsort(true))
.Pageable(pager => pager
.Enabled(true)
.Input(true)
.PageSizes(new [] { 5, 10, 20, 30, 40, 50 })) // MULTIDIOMA RESOURCES

My Model:

public class XXXGridModel
{
[Display(Name = "Id", ResourceType = typeof(WhiteBoardGridVMResource))]
public int Id { get; set; }
[Display(Name = "DateCreated", ResourceType = typeof(WhiteBoardGridVMResource))]
public DateTime DateCreated { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string CallNumber { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string FileNumber { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string DUE { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdBranchOffice { get; set; }
[Display(Name = "BranchOfficeName", ResourceType = typeof(WhiteBoardGridVMResource))]
public string BranchOfficeOfficeName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdCompany { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string CompanyCompanyName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdOffice { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string OfficeOfficeName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdShip { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string ShipShipName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdPort { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string PortPortName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdCallStatus { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string CallStatusStatusName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int? IdOwner { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string OwnerThirdPartyName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int? IdOperator { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string OperatorThirdPartyName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int? IdInductor { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string InductorThirdPartyName { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public bool IsNominatorOwner { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public bool IsNominatorOperator { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public bool IsNominatorInductor { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public int IdCreatedBy { get; set; }
[Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
public string CreatedByUserName { get; set; }
}

Anyone can Help me?!
Thanks in advance

Grid

answered on 24 Sep 2015

2 answers

188 views

Change event firing off unexpectedly?

I recently came across a strange issue happening with the kendo Scheduler regarding firing off change events.

I have a custom event handler set so that when a user clicks on an item in the Scheduler it opens a link to a separate details page (in a new tab). The problem is that after doing this, other (unrelated) UI elements in the Scheduler will fire off the exact same event when I click on them.

You can actually see this behavior on the Scheduler Events sample page here: http://demos.telerik.com/kendo-ui/scheduler/events

To replicate:
Click on the Month View button.
Click on (highlighting) the item "HR Lecture", on the 06th. This will fire off a Change event.
Now click on the Month View button again. In between the dataBinding and dataBound events, another Change event will fire off for the same time slot. (Prior to clicking on HR Lecture, this is not the case. You'll only see events for navigation, dataBinding, and dataBound events)

This doesn't seem to happen with all events, HR Lecture just appears to be one that *does* trigger the behavior.

Is this expected? If so, is there any way to prevent this from happening?

Scheduler

answered on 23 Sep 2015

4 answers

249 views

Entering date manually in a date filter in the grid

Hello all,

I have a grid with a date filter, if I pick the date from the date picker included in the filter it all works fine.

If I enter the date as 06/17/2013 that works fine, but on the other hand if I enter the date 06/17/13 (2 digit year) I do not get results back.

What can I do to over come this issues.

Grid

answered on 23 Sep 2015

11 answers

1.2K+ views

Kendo grid column names does not scroll horizontally

I want to have a Kendo Grid with several columns. I am able to create a Kendo Grid with several columns and it has horizontal scroll bar. The columns are able to scroll horizontally, But the grid column names (column header names) does NOT scroll horizontally.
I also referred to the link : "http://www.telerik.com/forums/horizontal-scroll-bar-in-grid-but-not-working-for-header-".

I tried several things (like changing jquery version etc) but the problem is NOT resolved.
Can you let us know what am I missing?

The Kendo version we are using is Q1 2014 (2014.1.415).

---------------------------------------------------------------------

Following is the code snippet from Index.cshtml.

<script src="../../../../Scripts/kendo/2014.1.415/jquery.min.js" type="text/javascript"></script>

<script src="../../../../Scripts/kendo/2014.1.415/kendo.all.min.js" type="text/javascript"></script>

<script src="../../../../Scripts/kendo/2014.1.415/kendo.aspnetmvc.min.js" type="text/javascript"></script>

@(Html.Kendo().Grid((IEnumerable<TelerikMvcApp1.Areas.UIConfig.Models.GenericUIClass>)ViewBag.GridData)

      .Name("grid")
      .Columns(columns =>
      {

          foreach (string key in ViewBag.Columns.Keys)
          {
              List<string> value = ViewBag.Columns[(string)key];

              columns.Bound(genericUI => genericUI.column1).Width(200).Title(key);


          }



      })

       .Scrollable(s => s.Enabled(true))

Grid

answered on 22 Sep 2015

1 answer

228 views

Argument Exception

Hi all,

I am trying to display an object in a Kendo grid in a MVC Website, however this object contains a dictionary and it seems like the grid is unable serialize it.

This is the error message I am getting:

Type 'System.Collections.Generic.Dictionary`2[[ExactModels.SalesOrderLine, ExactModels, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[ExactModels.Item, ExactModels, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]' is not supported for serialization/deserialization of a dictionary, keys must be strings or objects.

I am using Kendo.Mvc.dll version 2015.2.902.545.

And this is the object which contains the dictionary that is causing the problem.

public class CustomOrder

{

[Key]

public Guid ID { get; set; }

//public SalesOrder salesOrder { get; set; }

private SalesOrder order;

public SalesOrder salesOrder

{

get { return order; }

set

{

order = value;

if (order != null)

{

this.ID = order.OrderID;

}

public Account account { get; set; }

public Dictionary<SalesOrderLine, Item> salesOrderLineItem { get; set; }

public Boolean Checked { get; set; }

}

Anyone any idea of how to fix this?

Thanks in advance.

Grid

answered on 22 Sep 2015

2 answers

5.4K+ views

Setting default value in kendodropdown from JSON data

Please find the below code as i want to set default value of dropdown instead of optionlable from JSON data which is returned
from controller .

Please find the below code

public ActionResult GetOrders()
       {
           List<usp_IDQ_GetLicenseDistrictsVO> objresult1 = new List<usp_IDQ_GetLicenseDistrictsVO>();
           objresult1 = objConnection.usp_IDQ_GetLicenseDistricts(User.Identity.Name, true).ToList();
           return Json(objresult1, JsonRequestBehavior.AllowGet); ;
       }

@(Html.Kendo().DropDownList()
              .Name("DropDownList1")

                      //.Events(ev => ev.DataBound("SalesPersonID_DataBound"))
                      .OptionLabel("Select ...")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select ...")
              .DataTextField("District_Id")
              .DataValueField("Location_ID")

                      .DataSource(source =>
           {
               source.Read(read =>
                  {
                      read.Action("GetOrders", "IDTDashboard");
                  })
                  .ServerFiltering(true);
           })
           .AutoBind(false)

DropDownList

answered on 22 Sep 2015