EzDevInfo.com

Reloading/refreshing Kendo Grid

How to reload or refresh a Kendo Grid using Javascript?

It is often required to reload or refresh a grid after sometime or after a user action.

Editable DataGrid in AngularJS

Is there any AngularJS module as for DataGrid which provides In-Line Editing? There is one in KendoUI http://demos.kendoui.com/web/grid/editing-inline.html

Can AngularJS & KendoUI be used together?

Kendo grid date column not formatting

I have a KendoGrid like below and when I run the application, I'm not getting the expected format for date column.

$("#empGrid").kendoGrid({
    dataSource: {
        data: empModel.Value,
        pageSize: 10
    },

    columns: [
        {
            field: "Name",
            width: 90,
            title: "Name"
        },

        {
            field: "DOJ",
            width: 90,
            title: "DOJ",
            type: "date",
            format:"{0:MM-dd-yyyy}" 
        }
    ]
});

When I run this, I'm getting "2013-07-02T00:00:00Z" in DOJ column. Why it is not formatting? Any idea?

How to change the height of Kendo ui Grid

How do I change the height of the Kendo Grid when using wrappers?

Kendo: Handling Errors in Ajax Data Requests

Using Kendo UI in MVC4 I have a Grid that makes Ajax calls for data back into the Controller:

    public ActionResult SearchUser_Read([DataSourceRequest]DataSourceRequest request)
    {
        var data = CreateAnExcaptionHere();
        return Json(data.ToDataSourceResult(request));
    }

How do I use this call to inform the page that there was an error?

Refresh a single Kendo grid row

Is there a way to refresh a single Kendo grid row without refreshing the whole datasource or using jQuery to set the value for each cell?

Could not load file or assembly 'WebGrease' or one of its dependencies

When i run my MVC4 Web application it gives me following error:

Could not load file or assembly 'WebGrease' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.IO.FileLoadException: Could not load file or assembly 'WebGrease' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

Source Error: 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

I was having web.config as:

 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-1.3.0.0" newVersion="1.3.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>

After refering some answers on SO , i changed it to:

<dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
      </dependentAssembly>

But still its not working.

What can be the issue?

Edit:

Edit 2:

Again following error after installation of package:

Server Error in '/' Application.

Configuration Error

Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately. 

Parser Error Message: Could not load file or assembly 'MySql.Web, Version=6.7.4.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d' or one of its dependencies. The system cannot find the file specified.

Source Error: 


Line 249:      <providers>
Line 250:        <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="LocalSqlServer" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="true" applicationName="/" requiresUniqueEmail="false" passwordFormat="Hashed" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="7" minRequiredNonalphanumericCharacters="1" passwordAttemptWindow="10" passwordStrengthRegularExpression="" />
Line 251:        <add name="MySQLMembershipProvider" type="MySql.Web.Security.MySQLMembershipProvider, MySql.Web, Version=6.7.4.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" connectionStringName="LocalMySqlServer" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="true" applicationName="/" requiresUniqueEmail="false" passwordFormat="Clear" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="7" minRequiredNonalphanumericCharacters="1" passwordAttemptWindow="10" passwordStrengthRegularExpression="" />
Line 252:      </providers>
Line 253:    </membership>

Please help me, i am first time working on MVC4 Kendu Application.

Change selected value of kendo ui dropdownlist

I have a kendo ui dropdownlist in my view:

$("#Instrument").kendoDropDownList({
    dataTextField: "symbol",
    dataValueField: "symbol",
    dataSource: data,
    index: 0
});

How can I change the selected value of it using jQuery? I tried:

$("#Instrument").val(symbol);

But it doesn't work as expected.

How to force a Kendo UI modal window to center in a page? and how to disable all the actions?

I'm trying to display a Kendo UI modal window in the center of the browser, but it keeps showing up at the bottom of the page, by this I mean the only visible part of the window is the top bar, the rest of the window is out of sight, only when you drag it around you can view it properly. I have no styles applied to the div that is being used for the window so I'm confused as to why it's being shown like that.

Also I want to disable all of the action button on the top bar of the window, tried to set an empty action array but a close button is being shown as default, is there a way to just show the title of the window on the top bar? I want the window to disappear when a button in it is clicked.

This is how I'm creating the window:

var accessWindow = $("#accessDiv").kendoWindow({
    actions: [],
    draggable: true,
    height: "300px",
    modal: true,
    resizable: false,
    title: "Access",
    width: "500px"
});

accessWindow.center();
accessWindow.open();

This is my div with only a label, an input and a button, no CSS is being applied to it at the moment:

<div id="accessDiv" style=" width: 100%; height: 100%; background-color: #fff;">
    <label>Enter access key</label>
    <input type="text" />
    <input type="button" title="Enter" value="Enter" />
</div>

Telerik KendoUI vs Sencha ExtJS? [closed]

We are going to build a enterprise grade application on Web and for that we have filtered down our choices to ExtJS and KendoUI.

Both are decent and have rich features / controls, KendoUI is faster in performance than ExtJS but then ExtJS is like much more complete package which includes every component required to build desktop like web application and Grid seems more powerful.

on other hand with KendoUI we have power of jQuery and feel like home familiarity and almost zero learning curve because team already uses jQuery.

Does anyone have experience building large enterprise class application using either of them? and if yes what is your experience? Please share be it bad or good so that I can have some ground before I end up going with anyone of them for long time.

I am leaned towards ExtJS more because we are going to use a scheduler control which is from CubeDrive (myCalendar) which is again in ExtJS.

So your thoughts and experiences are welcome for helping me taking a right decision.

how to get selected row value in the KendoUI

I have a kendoUI grid.

                @(Html.Kendo().Grid<EntityVM>()
                    .Name("EntitesGrid")
                                .HtmlAttributes(new { style = "height:750px;width:100%;scrollbar-face-color: #eff7fc;" })
                    .Columns(columns =>
                    {
                        columns.Bound(e => e.Id).Hidden().IncludeInMenu(false);
                        columns.Bound(e => e.EntityVersionId).Hidden().IncludeInMenu(false);
                        columns.Bound(e => e.Name).Width("70%").Title("Entity Name");
                        columns.Bound(e => e.EIN).Width("30%");
                    })
        .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' id='addEntity'><span class='k-icon k-add'></span>Entity</a>" +
             "<a class='k-button k-button-icontext' id='editEntity'><span class='k-icon k-edit'></span>Edit</a>"))
                    .DataSource(dataSource => dataSource
                    .Ajax().ServerOperation(false)
                    .Model(model => model.Id(e => e.Id))
                    .Read(read => read.Action("GetEntities", "Entity", new { projectId = Request.QueryString[DataKeyNameConstants.ProjectId] })))
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .Resizable(resize => resize.Columns(true))
                    .Reorderable(reorder => reorder.Columns(true))
                    .ColumnMenu()
                    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                    .Events(events => events.Change("entSelChange"))
            )

now, I need to get the value of EntityVersionId from the selected Row. but not sure how to do it.

here's my javascript function

$("#editEntity").click(function () {

    var entityGrid = $("#EntitesGrid").data("kendoGrid");

    // what should I do from here
});

UPDATE: add code to loop all rows.

function loadPreviousEntityVersion() {

    alert("sdfsdfsdf");
    var entityGrid = $("#EntitesGrid").data("kendoGrid");
    var data = entityGrid.dataSource.data();

    for(var i = 0; i<data.length; i++) {
        var currentDataItem = data[i];
        alert(dataItem.EntityVersionId);

    }
}

Get record count in Kendo Grid after dataSource.read

I want to be able to push the record count from my Kendo grid after read (refresh).

Here is my Kendo Grid:

    @(Html.Kendo().Grid(Model)
      .Name("SearchWindowGrid")
      .Columns(columns =>
          {
              columns.Bound(p => p.SYSTEM_ITEMS_SEGMENT1).Hidden();
          })
      .ClientRowTemplate(
          "<tr>" +
            "<td>" +
                "<span><b>#: SYSTEM_ITEMS_SEGMENT1#</b></span>&nbsp;<br/>" +
                "<span>#: DESCRIPTION# </span>" +
            "</td>" +
          "</tr>"
      )
      .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("PopulateSearchWindow", "Item").Data("additionalSearchWindowInfo"))
        .Events(ev => ev.Error("onErrorSearchWindow"))
      )
      .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
      .Scrollable(s => s.Enabled(true).Height(450))
  )

My Controller action:

    public ActionResult PopulateSearchWindow([DataSourceRequest] DataSourceRequest request, string option, string searchText, string searchDesc)
    {
        try
        {
            var derps= _idg.SearchItems(searchText, searchDesc, _adg.OrganizationCode).ToList();

            return Json(derps.ToDataSourceResult(request, ModelState));
        }
        catch (Exception e)
        {
            ModelState.AddModelError("ExceptionErrors", e.Message);
            return Json(new List<Derp>().ToDataSourceResult(request, ModelState));
        }
    }

Here is my function that forces data refresh:

    function refreshData(){
        $("#SearchWindowGrid").data("kendoGrid").dataSource.read();
        //TODO: get the total count and push to #countElement
        var count = $("#SearchWindowGrid").data("kendoGrid").length; //not sure what to do here
        $("#countElement").val(count);
    }

Where I put my TODO in the jQuery function I want to be able to get the number of rows and push that number into a specific elemnt on my page.

Adding bindeable checkbox column to grid

Have this column in a Kendo grid that currently display a MySQL Boolean value so we have either 1 or 0.

Made this demo to play on...

This in an autosync and inline:true grid.

I would like this column to be of type "Checkbox" but, for some weird reasons, i just cannot find a demo or an example on the web that displays "enabled" checkbox that changes 1 to 0 when unchecked and Vice-Versa.

Capture the event after a section element has finished loading

I have a div that contains sections:

<div class="Placeafterthis">
</div>
...
<div class="k-content">
<section class="rbs-section" id="id1" name="">
.. // section content
</section>
<section class="rbs-section" id="id2" name="">
.. // section content
</section>
<section class="rbs-section" id="id3" name="">
.. // section content
</section>
</div>

Now basically these sections are loaded when the DOM is ready. Is there a way I could check when a particular section has finished loading? Once its finished loading I need to clone that section and place it just after the "Placeafterthis" div. Any suggestions on how I can achieve this?

How to refresh the Kendo UI grid

I am trying to refresh a Kendo UI grid but have not yet been successful. Would anybody please advise what I missed or what I did wrong?

I have the following code:

.cshtml:

 $('#btnRefresh').click(function (e){

            $.ajax({
                type: 'POST',
                url: "@(Url.Content("~/Administration/RefreshAll/"))",

                success: function () {
                    $("#Product").data("kendoGrid").dataSource.read();
                    $('#Product').data('kendoGrid').refresh();
                    //grid.refresh();
                    location.reload(true);
                },
                error: function (){
                    $("#btnRefresh").removeAttr('disabled');
                }
            });


      });

Controller:

public ActionResult RefreshAll([DataSourceRequest] DataSourceRequest request)
        {
            db.ProcessAll();
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return View();
        }