Wednesday, 6 July 2016

How to add and remove filter dynamically from kendo UI Grid

Add and remove filter dynamically from kendo-UI Grid
 
      
 
     

        $(document).ready(function () {

            var products = [{
                ProductID: 1,
                ProductName: "Chai",
                SupplierID: 1,
                CategoryID: 1,
                QuantityPerUnit: "10 boxes x 20 bags",
                UnitPrice: 18.0000,
                UnitsInStock: 39,
                UnitsOnOrder: 0,
                ReorderLevel: 10,
                Discontinued: false,
                Category: {
                    CategoryID: 1,
                    CategoryName: "Beverages",
                    Description: "Soft drinks, coffees, teas, beers, and ales"
                }
            }, {
                ProductID: 2,
                ProductName: "Chang",
                SupplierID: 1,
                CategoryID: 1,
                QuantityPerUnit: "24 - 12 oz bottles",
                UnitPrice: 19.0000,
                UnitsInStock: 17,
                UnitsOnOrder: 40,
                ReorderLevel: 25,
                Discontinued: false,
                Category: {
                    CategoryID: 1,
                    CategoryName: "Beverages",
                    Description: "Soft drinks, coffees, teas, beers, and ales"
                }
            }, {
                ProductID: 3,
                ProductName: "Aniseed Syrup",
                SupplierID: 1,
                CategoryID: 2,
                QuantityPerUnit: "12 - 550 ml bottles",
                UnitPrice: 10.0000,
                UnitsInStock: 13,
                UnitsOnOrder: 70,
                ReorderLevel: 25,
                Discontinued: false,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }, {
                ProductID: 4,
                ProductName: "Chef Anton's Cajun Seasoning",
                SupplierID: 2,
                CategoryID: 2,
                QuantityPerUnit: "48 - 6 oz jars",
                UnitPrice: 22.0000,
                UnitsInStock: 53,
                UnitsOnOrder: 0,
                ReorderLevel: 0,
                Discontinued: false,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }, {
                ProductID: 5,
                ProductName: "Chef Anton's Gumbo Mix",
                SupplierID: 2,
                CategoryID: 2,
                QuantityPerUnit: "36 boxes",
                UnitPrice: 21.3500,
                UnitsInStock: 0,
                UnitsOnOrder: 0,
                ReorderLevel: 0,
                Discontinued: true,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }];

            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { type: 'number' },
                                UnitsInStock: { type: 'number' },
                                ProductName: { type: 'string' },
                                QuantityPerUnit: { type: 'string' },
                                UnitPrice: { type: 'number' },
                            }
                        }
                    },
                },
                filterable: {
                    mode: "row"
                },
                resizable: true,
                columns: [
                    { field: "ProductName" },
                    { field: "UnitsInStock", title: "UnitsInStock" },
                    { field: "QuantityPerUnit", title: "QuantityPerUnit" },
                    { field: "UnitPrice", title: "UnitPrice" },
                ]
            });



        });

        function AddFilterinGrid() {
            var grid = $("#grid").data("kendoGrid");
            addOrRemoveFilter(grid, "ProductName", "eq", "Chai");
        }

        function RemoveFilterinGrid() {
            var grid = $("#grid").data("kendoGrid");
            addOrRemoveFilter(grid, "ProductName", "eq", "");
        }

        function addOrRemoveFilter(grid, field, operator, value) {

            var newFilter = { field: field, operator: operator, value: value };
            var dataSource = grid.dataSource;
            var filters = null;
            if (dataSource.filter() != null) {
                filters = dataSource.filter().filters;
            }

            if (value && value.length > 0) {
                //Add filter
                if (filters == null) {
                    filters = [newFilter];
                }
                else {
                    var isNew = true;
                    var index = 0;
                    for (index = 0; index < filters.length; index++) {
                        if (filters[index].field == field) {
                            isNew = false;
                            break;
                        }
                    }
                    if (isNew) {
                        filters.push(newFilter);
                    }
                    else {
                        filters[index] = newFilter;
                    }
                }
            }
            else {
                //Remove filter 
                var removeIndex = -1;
                for (var x = 0; x < filters.length; x++) {
                    var temp = filters[x];
                    if (temp.field == field) {
                        removeIndex = x;
                        break;
                    }
                }
                if (removeIndex != -1)
                    filters.splice(removeIndex, 1);
            }
            dataSource.filter(filters);
        }
 


Thursday, 1 October 2015

Get row and column index on change event or on click event on Kendo-UI Grid

Get row and column index on click event
 
function onDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    $(grid.tbody).on("click", "td", function (e) {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        alert(rowIdx + '-' + colIdx);
    });
}

$(document).ready(function () {
    $("#Grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                dataType: "jsonp"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        dataBound: onDataBound,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "OrderID",
            filterable: false
        },
                        "Freight",
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            width: 120,
                            format: "{0:MM/dd/yyyy}"
                        }, {
                            field: "ShipName",
                            title: "Ship Name",
                            width: 260
                        }, {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 150
                        }
                    ]
    });
});
Get row and column index on Change event
 
 
    
    

Thursday, 29 August 2013

How to add serial number column in kendo ui grid

Using MVC
  

@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID);
        columns.Bound(p => p.Name);
        columns.Template(t => { }).Title("Row No").ClientTemplate(
            "#= renderNumber(data) #"
        );
        columns.Template(t => { }).Title("Record No").ClientTemplate(
            "#= renderRecordNumber(data) #"
        );

    })
    .Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true))
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Grid_Read", "Home"))

    )
        .Events(ev => ev.DataBound("resetRowNumber"))
)
Using Javascript
  

Wednesday, 14 August 2013

.net interview question

Question 1:
  
public class Person
{
    public string Name { get; set; }
}
public class Program
{
    private static void Main(string[] args)
    {
        var person1 = new Person { Name = "Test" };
        Console.WriteLine(person1.Name);//Output:Test

        Person person2 = person1;
        person2.Name = "Shahrooz";
        Console.WriteLine(person1.Name);//Output:Shahrooz

        person2 = null;
        Console.WriteLine(person1.Name);//Output:???
    }
}
For answer this please check below link. Click here to see Answer


Question 2:
  
public class MyClass
{
    public void Func(Object a)
    {
        Console.WriteLine("Object");
    }

    public void Func(String a)
    {
        Console.WriteLine("String");
    }
}
public class Program
{
    private static void Main(string[] args)
    {
        MyClass mc = new MyClass();
        mc.Func(null);
    }
}
For answer this please check below link.
Click here to see Answer
Click here to see Answer

Tuesday, 18 June 2013

Multi Selection Combobox in Kendo UI

  

Selected values :
  

If in your page combobox is used more then once then please check below code snippet:
  

Selected values :
  



LIVE DEMO