Rectangle 27 1

The built-in Kendo UI sorting mechanism can only work with single scalar values (strings, numbers, dates, booleans). Sorting of date ranges is not defined and not supported, for example it is unclear how a date range should be sorted - by start date, by end date or by duration?

If you want to sort by one of the dates, then do not merge them in the data to which the Grid is bound. Use two separate fields in the Grid dataSource and bind a column to the field by which you want to sort. You can display both dates in the same column via column template:

columns: [{
    field: "StartDateField",
    title: "Date Range",
    template: "#= kendo.toString(StartDateField, 'MM/dd/yyyy') # - #= kendo.toString(EndDateField, 'MM/dd/yyyy') #"
}]

The two dates must be JavaScript Date objects, not strings. Their data field type should be set to "date" in dataSource.schema.model.fields:

Alternatively, you can keep the two dates in a single data field client-side and use server-side data operations to sort via server code. This will also allow you to sort by range length.

javascript - How to sort the from-date and to-date in same column in k...

javascript kendo-ui telerik kendo-grid telerik-grid
Rectangle 27 4

Since the id of your Kendo UI Grid is DefectGrid so you should use:

var grid = $("#DefectGrid").data("kendoGrid");
grid.dataSource.read();

You should not modify kendoGrid since the Widget that you want to update is a kendoGrid.

  • If you want to access a Kendo ListView you should do: $("#elem_id").data("kendoListView"); (being elem_id the id of the HTML element that includes the ListView).
$("#elem_id").data("kendoDropDownList");

When KendoUI creates a Widget, it stores a reference to the object that holds the methods and private data to that Widget in data. This is something not specific of KendoUI but inherited from jQuery (see documentation about jQuery data here).

I made the changes, but it didn't work. The grid still does not refresh on drop down selection change event

javascript - Refresh Kendo UI grid on dropdown selected index change e...

javascript kendo-ui telerik kendo-asp.net-mvc
Rectangle 27 2

Put the document ready handler below the initialization of the Grid. The Grid also uses document ready function which is executed after your script - this is why the exception is thrown - the Grid is still not initialized.

I thought that too and tried moving it after the grid and then I called it via a button and both changes still gave same error - "Uncaught Type Error: Cannot read property 'datasource' of undefined". I will add my _Layout code to this thread as I feel that maybe my scripts are somehow not set up correctly.

1) Makere sure that you are not loading jQuery library more than once 2) wgrid.dataSource.Read(); read is not with capital letter.

jquery - populate kendo ui grid in Javascript - Stack Overflow

jquery asp.net-mvc kendo-ui kendo-grid
Rectangle 27 1

Please try with the below code snippet. If you write any text between # (hash) the grid try to find that field in your datasource that's why you got the undefined error.

function Delete(id, gridname) {
            var grid = $("#" + gridname).data("kendoGrid");
            console.log(id, gridname)
}
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid2\");'></a>",

You always rock bro.i think you have done phd on kendo ui grid as because u\you only answer most of question on kendo ui grid.

How to pass hardcoded string value from javascript onclick with templa...

javascript kendo-ui telerik kendo-grid telerik-grid
Rectangle 27 1

Please try with the below code snippet. If you write any text between # (hash) the grid try to find that field in your datasource that's why you got the undefined error.

function Delete(id, gridname) {
            var grid = $("#" + gridname).data("kendoGrid");
            console.log(id, gridname)
}
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid2\");'></a>",

You always rock bro.i think you have done phd on kendo ui grid as because u\you only answer most of question on kendo ui grid.

How to pass hardcoded string value from javascript onclick with templa...

javascript kendo-ui telerik kendo-grid telerik-grid
Rectangle 27 31

Basically when you want to update a record you should use the set method of the model. For example to update the first record of the dataSource you should update it like this:

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');

The above should automatically mark the flag as dirty and it will notify the Grid that there are changes, so the Grid will automatically refresh.

Also if you want to retrieve the object related to a specific row directly you could use the dataItem method of the Grid.

thanks @Pechka, it works! but somehow my grid does not show the dirty flag. Any idea? Tried. grid.refresh() still the same...

Dirty flag is handled by the Grid itself not through the dataSource, so it is supported only when you update the Grid by hand. Sadly there is no work-around to enable this dirty marking in the current case.

it is showing "set is not a function"?

To avoid refreshing the Grid , update the value of the model directly without using the set method e.g. firstItem.FirstName = "The New Name" At the end when you are done modifying all the models or fields that you want you can call $('#GridName').data('kendoGrid').refresh()

firstItem.set('value','true');

data binding - Kendo-UI grid Set Value in grid with Javascript - Stack...

javascript data-binding kendo-ui kendo-grid
Rectangle 27 2

Thanks to James' hint, I wound up using the Masked Input jQuery plugin and wiring up to dynamically created events using jQuery.on.

Here is the helper function I wrote (simplified for example):

applyDynamicInputMask = function(container, selector, event, mask) {
    $(container).on(event, selector, function() {
        var $this = $(this);
        $this.mask(mask);
    });
};
applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");

Eric, this looks like what I need as well. But sorry, I am confused about where to call this from in a Kendo Grid scenario. Do you call this it he Change event, databound?

javascript - How to mask phone number input in Kendo UI Grid Column - ...

javascript knockout.js kendo-ui kendo-grid
Rectangle 27 11

See this sample code taken from the documentation (API docs on events are here) on how to bind an event handler using MVC wrappers:

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Events(e => e
          .DataBound("grid_dataBound")
          .Change("grid_change")
      )
)
<script>
function grid_dataBound() {
    //Handle the dataBound event
}

function grid_change() {
    //Handle the change event
}
</script>

If you want to bind a handler in JavaScript, you need to access the grid like this:

var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", function(e) {});
$('#grid').kendoGrid({
    dataBound: function(e) {
        console.debug('data bound..');
    }
});

you actually create a new grid instance.

right on.. i missed that new-instance part, and the events i was looking at were on DataSource, and not on Grid. the problem with the documentation you posted, is it's a long a-z how to article. i really wanted to find just a Events api documentation.. which seemed like a impossible task

actually DataBound still happens too soon. it happens at the same time as getting the collection back, but before the contents are rendered. i know this because im calling some javascript that selects rendered elements.. i'll post a sample

as a fun bonus, when i add that dataBound: function(e) definition with just the console.debug line, my whole grid header drops to the bottom of the grid!

javascript - Kendo UI Grid post rendered or post databound event? - St...

javascript kendo-ui telerik kendo-grid telerik-grid
Rectangle 27 1

Added an input with an Id of fooNameInput

<script type="text/javascript">


$(function () {
    $('#fooNameInput').on("keyup change", function () {
        var Value = $(this).val();
        if (Value.length) {
            FilterGridByName(Value, 'Name');
        }
        else {
            $('#fooTable').data("kendoGrid").dataSource.filter([]);
        }
    });



    function FilterGridByName(Value, Field) {
        if (Field != "") {
            if (Value != "") {
                $('#fooTable').data("kendoGrid").dataSource.filter({ field: Field, operator: "startswith", value: Value })
            }
            else {
                $('#fooTable').data("kendoGrid").dataSource.filter([]);
            }
        }
    }
});
</script>

This is working as I wanted it to work but if there is a better way please let me know in the comments and I will update this answer/remove it.

I would recommend specifying the .Data(string handler) method available on the data source, for example

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

This allows you to specify a javascript function that returns a JSON object defining additional parameters to append to the ajax request.

You can use something like this:

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

And to trigger a refresh of the grid (from a key up event or similar):

$("#fooTable").data("kendoGrid").dataSource.read();

javascript - Filtering a Kendo UI Grid in MVC with Remote Data Binding...

javascript c# asp.net-mvc kendo-ui
Rectangle 27 1

I would recommend specifying the .Data(string handler) method available on the data source, for example

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

This allows you to specify a javascript function that returns a JSON object defining additional parameters to append to the ajax request.

You can use something like this:

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

And to trigger a refresh of the grid (from a key up event or similar):

$("#fooTable").data("kendoGrid").dataSource.read();

That is a great solution as well but would require modification of the controller to support the modification to the request. Positive smaller data sets returned, Negative need to modify the controller.

javascript - Filtering a Kendo UI Grid in MVC with Remote Data Binding...

javascript c# asp.net-mvc kendo-ui
Rectangle 27 1

edit: function (e) {
    //if edit click
    if (!e.model.isNew()) {
        $('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
        //init mask widget
        kendo.init($('input[name=Time]'));
    }
}

I feel this is the more "kendo-y" way of achieving this. Use of isNew() and init() makes it very clean.

javascript - How to mask phone number input in Kendo UI Grid Column - ...

javascript knockout.js kendo-ui kendo-grid
Rectangle 27 1

You can bind the plugin to any jQuery selector, so just slap a custom class on the input that needs formatted, and use that to hook up the plugin. Not sure if this is a viable solution, but it's what I've used in the past. HTH! :)

I did wind up using that plugin along with jQuery.on to mask the dynamically created elements that the Kendo UI Grid creates. Thanks!

javascript - How to mask phone number input in Kendo UI Grid Column - ...

javascript knockout.js kendo-ui kendo-grid
Rectangle 27 2

I have implemented this previously using parameterMap using angular, but I imagine it would be very similar when just using jQuery. See this url.

$scope.pageableData = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            pageSize: $scope.pageSize,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            transport: {
                read: {
                    url: $rootScope.projectURL + '/api/DocLibItems/PageableGridItems',
                    dataType: 'json',
                    type: 'post'

                },
                parameterMap: function (data, type) {
                    $scope.pageableGridCreateCache = false;
                    var filter = data.filter === undefined ? null : data.filter;
                    if (filter) {
                        angular.forEach(filter.filters, function (item) {
                            item._operator = item.operator;
                        });
                    }
                    return {
                        ProjectID: $scope.projectID,
                        PageNumber: data.page,
                        PageSize: data.pageSize,
                        Sorting: data.sort === undefined ? null : data.sort,
                        Filtering: filter
                    };
                }
            }
});

ParmeterMap is returning ProjectID, PageNumber, PageSize, Sorting, and Filtering. The api should expect to recieve that data and return data based on that.

The initial call will call the same api where the pageNumber would be 1, pageSize would be the default pageSize, sorting would be null, and there would be no filtering.

The call to the api is a post, so there will not be any parameters in the url.

Thanks a lot. I didn't thought transforming params is this easy.

javascript - kendo ui grid query parameters - Stack Overflow

javascript angularjs asp.net-web-api kendo-grid kendo-datasource
Rectangle 27 4

You can implement this using a template column. Here is a live demo showing how to do that: http://jsbin.com/olutin/10/edit

I'd like to achive this with a grid with pagination. This answer only works when the grid has one page.

javascript - Kendo UI Grid Serial number column - Stack Overflow

javascript kendo-ui kendo-grid
Rectangle 27 67

The accepted answer is the obvious solution however presentation logic should remain in view and not in controllers or models. Also I wasn't able to get the OP's solution to work.

Here are two ways to do create grid system when you have a flat list(array) of items. Say our item list is a alphabet:

$scope.alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                   'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

The outer loop execute after every 4 iterations and creates a row. For each run of the outer loop the inner loop iterates 4 times and creates columns. Since the inner loop runs 4 times regardless of whether we have elements in array or not, the ng-if makes sure that no extraneous cols are created if the array ends before inner loop completes.

This is much simpler solution but requires angular-filter library.

<div class="row" ng-repeat="letters in alphabet | chunkBy:4">
  <div class="col-xs-3 letter-box" ng-repeat="letter in letters" >
    <div>Letter {{$index + 1}} is: <b> {{letter}}</b></div>
  </div>
</div>

The outer loop creates groups of 4 letters, corresponding to our 'row'

[['A', 'B', 'C', 'D'], ['E', 'F', 'G', 'H'], ... ]

The inner loop iterates over the group and creates columns.

Note: Method 2 might require evaluation of filter for each iteration of outer loop, hence method 2 may not scale very well for huge data sets.

This is much better than my answer (I really agree with keeping presentation logic out of the controller, it can get really messy if you don't). Also, the filter in method 2 should be really easy to write on your own even if you don't user angular-filter.

@Clawish, If you want to have 3 columns then you'll also need to change the column class to col-xs-4. There are 12 columns in bootstrap, so 3 columns means each column takes 4 blocks, hence col-xs-4. If you keep it unchanged to col-xs-3, the gouping still happens but the columns just 'wrap up' to make no visual difference. Check plnkr.co/edit/L207RC5Dmxk61fusC2rr?p=preview

item in items | filter:x as results

Just a heads up, groupBy is now chunkBy: n in angular-filter

javascript - angular.js ng-repeat for creating grid - Stack Overflow

javascript angularjs twitter-bootstrap
Rectangle 27 67

The accepted answer is the obvious solution however presentation logic should remain in view and not in controllers or models. Also I wasn't able to get the OP's solution to work.

Here are two ways to do create grid system when you have a flat list(array) of items. Say our item list is a alphabet:

$scope.alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                   'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

The outer loop execute after every 4 iterations and creates a row. For each run of the outer loop the inner loop iterates 4 times and creates columns. Since the inner loop runs 4 times regardless of whether we have elements in array or not, the ng-if makes sure that no extraneous cols are created if the array ends before inner loop completes.

This is much simpler solution but requires angular-filter library.

<div class="row" ng-repeat="letters in alphabet | chunkBy:4">
  <div class="col-xs-3 letter-box" ng-repeat="letter in letters" >
    <div>Letter {{$index + 1}} is: <b> {{letter}}</b></div>
  </div>
</div>

The outer loop creates groups of 4 letters, corresponding to our 'row'

[['A', 'B', 'C', 'D'], ['E', 'F', 'G', 'H'], ... ]

The inner loop iterates over the group and creates columns.

Note: Method 2 might require evaluation of filter for each iteration of outer loop, hence method 2 may not scale very well for huge data sets.

This is much better than my answer (I really agree with keeping presentation logic out of the controller, it can get really messy if you don't). Also, the filter in method 2 should be really easy to write on your own even if you don't user angular-filter.

@Clawish, If you want to have 3 columns then you'll also need to change the column class to col-xs-4. There are 12 columns in bootstrap, so 3 columns means each column takes 4 blocks, hence col-xs-4. If you keep it unchanged to col-xs-3, the gouping still happens but the columns just 'wrap up' to make no visual difference. Check plnkr.co/edit/L207RC5Dmxk61fusC2rr?p=preview

item in items | filter:x as results

Just a heads up, groupBy is now chunkBy: n in angular-filter

javascript - angular.js ng-repeat for creating grid - Stack Overflow

javascript angularjs twitter-bootstrap
Rectangle 27 4

Here's my razor code needed on the column for this to work, i added a class name so it can be used in the jquery selector later.

columns.Bound(r => r.RoomRate).HtmlAttributes(new { @class = "grid-allotment-roomrate" });

Here's my Jquery code to update the cell and mark the edited cell after a success data retrieval from server side.

var dataSource = $("#grid-allotments").data("kendoGrid").dataSource;
var data = dataSource.data();
$.each(data, function (index, rowItem) {
    var checkbox = $("#checkbox_" + rowItem.RoomTypeId + "_" + rowItem.Date.getTime());
    if (checkbox != null && checkbox.is(':checked')) {
        $.ajax({
            url: "RackRate/GetRackRateForRoomTypeOn",
            type: "POST",
            data: { roomTypeId: rowItem.RoomTypeId, date: rowItem.Date.toUTCString() },
            success: function (result) {
                data[index].set('RoomRate', result);
                $('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
            }
        });
    }
});

Below is the line of code that is responsible for the dirty flag highlight.

$('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');

Late addition to this, but I discovered that (due to the grid read caused by the set() call), if you want to do this to multiple grid items, you have to set the dirty flag in a separate each() call after the set() calls, or only the last item shows the dirty flat.

data binding - Kendo-UI grid Set Value in grid with Javascript - Stack...

javascript data-binding kendo-ui kendo-grid
Rectangle 27 39

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:

  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Rock solid - backed by a suite of 2600+ unit tests

What does "Non-destructive DOM interaction" mean? Having a tough time understanding why this is novel or a feature, and what it covers/guarantees.

it is not free software I think, mmm, a problem with it.

seems these cool DataTables grids are not editable, and if you need it - you have to pay for the editable version: editor.datatables.net/purchase/index

Best dynamic JavaScript/JQuery Grid - Stack Overflow

javascript jquery grid
Rectangle 27 38

The best entries in my opinion are Flexigrid and jQuery Grid.

Till now I started liking jQuery Grid. trirand.com/blog/jqgrid/jqgrid.html But still I'm not sure. Keep you updated...

@Somnath - Is jQuery grid the one you were most happy with? I have a similar need, and have been evaluating DataTables, but adding rows (and having them be part of the sort order) is not working well.

@MattW Yes i like jQuery Grid, Adding data is really easy. Also you can make every column sortable just by setting a flag. My requirements list was really big. But few thing I build myself and for few cases I'm using jQuery Grid. It got cool and easy API also. At this point of time i'm happy with jQuery Grid. Its good.

Best dynamic JavaScript/JQuery Grid - Stack Overflow

javascript jquery grid
Rectangle 27 5

function anonymous(data) {
    var o, e = kendo.htmlEncode;
    with(data) {
        o = '<input type=\'checkbox\' ' + (isAdmin ? checked = 'checked' : '') + ' />';
    }
    return o;
}

As you can see, your template section is used without changes. When your cell is rendered, this function is executed (your data item, e.g. the grid's row model, is passed in) and the resulting string is used as content for the cell.

From the perspective of the rendered HTML, this here:

"<input type='checkbox' #= isAdmin ? 'checked' : '' # />"

since checked='checked' will simply evaluate to 'checked'. Using the first variant however will also set the checked attribute on the data which is passed into the template function (see demo for illustration).

Aha! I get it. My confusion is due to the fact that I didn't realize that the generated html, in the case of a true condition, is simply <input type='checkbox' checked/> . I didn't know that an attribute without a value is even legal. And when inspected in the browser, the tools are 'helpful' enough to convert it to standard form and show me "checked='checked'" even though that wasn't the original html. So I've been spending time wondering how the template generated "checked='checked'" when it never did. Gracias.

javascript - Not understanding this kendo template that generates a ch...

javascript templates telerik kendo-ui kendo-grid