Multi Selection Combobox in Kendo UI

<div>
<input id="product" placeholder="Select product..." />
    <br />
<input id="hf_product" type="hidden" />
    Selected values : <span id="spanproduct"></span>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $("#fabric").kendoComboBox({
            name: "fabric",
            dataTextField: "DataText",
            dataValueField: "DataValue",
            dataSource: [
                            { DataText: "Select All", DataValue: "0" },
                            { DataText: "Cotton", DataValue: "1" },
                            { DataText: "Polyester", DataValue: "2" },
                            { DataText: "Cotton/Polyester", DataValue: "3" },
                            { DataText: "Rib Knit", DataValue: "4" }
                        ],
            filter: "contains",
            suggest: true,
            template: "<input type='checkbox' id='chk_fabric_#=data.DataValue #' onclick='UpdateIdinHF(this);' value='#=data.DataValue #' name='fabric' />" + " " + "${ data.DataText }",
            close: onClose,
            change: onChange
        });

    });

    var IsItemChecked = false;
    function UpdateIdinHF(obj) {

        var id = $(obj).attr('id');
        var name = $(obj).attr('name');
        var value = parseInt($(obj).attr('value'));
        var IsChecked = $(obj).is(':checked');
        var hf = $("#hf_" + name).get(0);

        if (value != 0) {
            UpdateIdInHiddenField(hf, value, IsChecked);

            var totalchk = $('input[id*="chk_' + name + '"]').not("#chk_" + name + "_0").length;
            var checkedchk = $('input[id*="chk_' + name + '"]:checked').not("#chk_" + name + "_0").length;

            if (totalchk == checkedchk) {
                $("#chk_" + name + "_0").prop("checked", true);
            }
            else {
                $("#chk_" + name + "_0").prop("checked", false);
            }
        }
        else {
            $('input[id*="chk_' + name + '"]').each(function () {
                if (parseInt($(this).val()) != 0) {
                    if (IsChecked == true) {
                        $(this).prop("checked", true);
                        UpdateIdInHiddenField(hf, $(this).val(), IsChecked);
                    }
                    else {
                        $(this).prop("checked", false);
                        UpdateIdInHiddenField(hf, $(this).val(), IsChecked);
                    }
                }
            });
        }
        IsItemChecked = true;
    }
    function onClose(e) {
        if (IsItemChecked == true) {
            IsItemChecked = false;
            e.preventDefault();
        }
        else {
            ShowSelectedItem();
        }
    }
    function ShowSelectedItem() {
        $("#spanfabric").html($("#hf_fabric").val());
    }

    function UpdateIdInHiddenField(hf, id, IsAdd) {

        if (hf.value == "") {
            hf.value = ",";
        }

        if (IsAdd == true) {
            if (hf.value.indexOf("," + id + ",") == -1) {
                hf.value = hf.value + id + ",";
            }
        }
        else if (IsAdd == false) {
            if (hf.value.indexOf("," + id + ",") >= 0) {
                hf.value = hf.value.replace("," + id + ",", ",");
            }
        }
    }
    function onChange(e) {
        e.sender.value(null);
    }
</script>

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

<div>
<input id="product" placeholder="Select product..." />
    <br />
<input id="hf_product" type="hidden" />
    Selected values : <span id="spanproduct"></span>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $("#product").kendoComboBox({
            name: "product",
            dataTextField: "DataText",
            dataValueField: "DataValue",
            dataSource: [
                            { DataText: "Select All", DataValue: "0" },
                            { DataText: "Cotton", DataValue: "1" },
                            { DataText: "Polyester", DataValue: "2" },
                            { DataText: "Cotton/Polyester", DataValue: "3" },
                            { DataText: "Rib Knit", DataValue: "4" }
                        ],
            filter: "contains",
            suggest: true,
            template: "<input type='checkbox' id='chk_product_#=data.DataValue #' onclick='UpdateIdinHF(this);' value='#=data.DataValue #' name='product' />" + " " + "${ data.DataText }",
            close: onClose,
            change: onChange
        });

    });
</script>

LIVE DEMO

How to add multiple series dynamically in kendo UI chart

Method1

<script type="text/javascript">

    var dataSource;

    function GetSelectedDuration() {
        return $("input:radio[name=Duration]:checked").val();
    }

    function ReBindDataSource() {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://localhost/Home/GetDummydata",
                    cache: false,
                    data: { Duration: GetSelectedDuration() }
                }
            }
        });

        dataSource.fetch(function () {
            if (dataSource._data.length > 0) {
                var keys = Object.keys(dataSource._data[0]);
                ReDrawChart(keys);
            }
        });
    }


    function radioClicks() {
        ReBindDataSource();
    }


    $(document).ready(function () {

        $("input:radio[name=Duration]").bind("click", radioClicks);

        $("#mychart").kendoChart({
            title: {
                text: "Dynamic Column"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            valueAxis: {
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: true
                }
            },
            categoryAxis: {
                field: "Field1",
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.field #: #= value #%"
            }

        });


        ReBindDataSource();
    });

    // Add series dynamically in chart
    function ReDrawChart(keys) {

        var InvalidColumnName = new Array("_events", "uid", "parent", "Field1");

        var chart = $("#mychart").data("kendoChart");
        var chartOptions = chart.options;

        var SeriesCount = 0;
        for (var k = 0; k < keys.length; k++) {
            var mykey = keys[k];
            if ($.inArray(mykey, InvalidColumnName) == -1) {
                chartOptions.series.push(new Object());
                chartOptions.series[SeriesCount].field = mykey;
                SeriesCount++;
            }
        }
        chart.setDataSource(dataSource);
        chart.redraw();
    }

</script>
<div>
<input checked="checked" name="Duration" type="radio" value="1" />Annully
    <input name="Duration" type="radio" value="2" />Monthly
    <input name="Duration" type="radio" value="3" />Weekly
    <input name="Duration" type="radio" value="4" />Daily
</div>
<div id="mychart">
</div>

Below code snippet is only for reference to create Dummy data in MVC. Controller

public class HomeController : Controller
{
    [AllowAnonymous]
    [HttpGet]
    public JsonResult GetDummydata(int Duration)
    {
        List>TestModels> models = GetDummyData(Duration);

        return Json(models, JsonRequestBehavior.AllowGet);
    }

    public List<TestModels> GetDummyData(int Duration)
    {
        List<TestModels> models = new List<TestModels>();

        switch (Duration)
        {
            case (int)DurationType.Annully:

                TestModels testModel = new TestModels();
                testModel.Field1 = "Annully";
                testModel.Field2 = 20;
                testModel.Field3 = 50;
                testModel.Field4 = 70;
                models.Add(testModel);

                break;
            case (int)DurationType.Monthly:

                TestModels testModel2 = new TestModels();
                testModel2.Field1 = "Monthly";
                testModel2.Field2 = 50;
                testModel2.Field3 = 50;
                testModel2.Field4 = 50;
                models.Add(testModel2);

                break;
            case (int)DurationType.Weekly:
                TestModels testModel3 = new TestModels();
                testModel3.Field1 = "Weekly";
                testModel3.Field2 = 70;
                testModel3.Field3 = 10;
                testModel3.Field4 = 90;
                models.Add(testModel3);
                break;
            case (int)DurationType.Daily:
                TestModels testModel4 = new TestModels();
                testModel4.Field1 = "Daily";
                testModel4.Field2 = 11;
                testModel4.Field3 = 111;
                testModel4.Field4 = 1111;
                models.Add(testModel4);
                break;

        }

        return models;
    }
}

Model

[Serializable]
public class TestModels
{   
        public string Field1 { get; set; }
        public int Field2 { get; set; }
        public int Field3 { get; set; }
        public int Field4 { get; set; }
}

Method2

<script type="text/javascript">

    var dataSource;

    function radioClicks() {
        getDataSource();
    }


    function GetSelectedDuration() {
        return $("input:radio[name=Duration]:checked").val();
    }

    function getDataSource() {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://localhost:2116/Home/GetDummydata2",
                    cache: false,
                    data: { Duration: GetSelectedDuration() }
                }
            }
        });

        dataSource.fetch(function () {
            GenerateChartFromData();
        });
    }

    function GenerateChartFromData() {

        var chartSeries = [];

        var keys = Object.keys(dataSource._data[0]);
        var InvalidColumnName = new Array("_events", "uid", "parent", "Price");

        for (var k = 0; k < keys.length; k++) {
            var mykey = keys[k];
            if ($.inArray(mykey, InvalidColumnName) == -1) {
                chartSeries.push({ xField: "Price", yField: mykey, name: mykey.replace("_", ""), style: "smooth" });
            }
        }

        var titletxt = "Title text comes here - ";

        switch (parseInt(GetSelectedDuration())) {
            case 1:
                titletxt += "on " + chartSeries[0].name;
                break;
            case 2:
                titletxt += "with multiple series";
                break;
        }



        $("#chart").kendoChart({
            title: {
                text: titletxt
            },
            legend: {
                position: "right"
            },
            dataSource: dataSource,
            seriesDefaults: {
                type: "scatterLine"
            },
            series: chartSeries,
            xAxis: {
                min: 19,
                max: 46,
                labels: {
                    format: "{0}"
                }
            },
            yAxis: {
                // min: 80,
                labels: {
                    format: "{0}"
                },
                title: {
                    text: "testTitle"
                }
            }
        });

    }

    $(document).ready(function () {

        $("input:radio[name=Duration]").bind("click", radioClicks);

        getDataSource();
    });

</script>
<div>
<input checked="checked" name="Duration" type="radio" value="1" />Single series
    <input name="Duration" type="radio" value="2" />multiple series
</div>
<div id="chart">
</div>

Below code snippet is only for reference to create Dummy data in MVC. Controller

public JsonResult GetDummydata2(int Duration)
{


    switch (Duration)
    {
        case 1:

            List<testmodels_1> lst = new List<testmodels_1>();

            for (int i = 0; i < 20; i++)
            {
                int dtValue = 0;

                if (i < 10)
                {
                    dtValue = -478;
                }
                else if (i < 12)
                {
                    dtValue = -78;
                }
                else if (i < 14)
                {
                    dtValue = -28;
                }
                else if (i < 16)
                {
                    dtValue = 22;
                }
                else if (i < 18)
                {
                    dtValue = 72;
                }
                else
                {
                    dtValue = 122;
                }

                lst.Add(new TestModels_1() { Price = 20 + i, _07072014 = dtValue });
                lst.Add(new TestModels_1() { Price = 20.5M + i, _07072014 = dtValue });


            }

            return Json(lst, JsonRequestBehavior.AllowGet);
            break;
        case 2:

            List<testmodels_2> lst1 = new List<testmodels_2>();

            for (int j = 0; j < 20; j++)
            {
                int dtValue1 = 0;

                if (j < 10)
                {
                    dtValue1 = -478;
                }
                else if (j < 12)
                {
                    dtValue1 = -78;
                }
                else if (j < 14)
                {
                    dtValue1 = -28;
                }
                else if (j < 16)
                {
                    dtValue1 = 22;
                }
                else if (j < 18)
                {
                    dtValue1 = 72;
                }
                else
                {
                    dtValue1 = 122;
                }

                lst1.Add(new TestModels_2() { Price = 20 + j, _07072014 = dtValue1, _08072014 = dtValue1 - 20, _08082014 = dtValue1 - 30 });
                lst1.Add(new TestModels_2() { Price = 20.5M + j, _07072014 = dtValue1, _08072014 = dtValue1 - 70, _08082014 = dtValue1 - 80 });


            }
            return Json(lst1, JsonRequestBehavior.AllowGet);
            break;


    }


    return Json(new { IsError = true }, JsonRequestBehavior.AllowGet);
}

public DateTime? GetDateTimeFromString(string strDateTime)
{
    if (!string.IsNullOrEmpty(strDateTime.Trim()))
    {
        string pattern = "dd/MM/yyy";
        DateTime parsedDate;

        if (DateTime.TryParseExact(strDateTime.Trim(), pattern, null, System.Globalization.DateTimeStyles.None, out parsedDate))
        {
            return parsedDate;
        }
    }

    return null;
}

Model

[Serializable]
public class TestModels_1
{
        public decimal Price { get; set; }
        public decimal _07072014 { get; set; }
}

public class TestModels_2
    {
        public decimal Price { get; set; }
        public decimal _07072014 { get; set; }
        public decimal _08072014 { get; set; }
        public decimal _08082014 { get; set; }
}

DOWNLOAD DEMO

How to add a new worksheet after all of the others in Excel Interop

Worksheet xlNewSheet = null;

// Add new worksheet in workbook
xlNewSheet = (Excel.Worksheet)xlWorkbook.Worksheets.Add(missing, missing, missing, missing);

// Add new worksheet at the end of all sheets in workbook
xlNewSheet = (Excel.Worksheet)xlWorkbook.Sheets.Add(After: xlWorkbook.Sheets[xlWorkbook.Sheets.Count], Count: 1, Type: Excel.XlSheetType.xlWorksheet);

// Give worksheet name
xlNewSheet.Name = worksheetName;

Download Files From Grid in Kendo UI

View

@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Groupable(false);
        columns.Bound(p => p.Name);
        columns.Template(@).ClientTemplate("Download file").Title("Download1");
        columns.Template(@).ClientTemplate("" + Html.ActionLink("Download me", "DocumentDownload2", "Home", new { id = "#=ID#" }, null) + "").Title("Download2");

    })

     .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("Grid_Read", "Home"))
     )
)

Controller

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
{
    List<TestModels> models = new List<TestModels>();

    for (int i = 1; i < 6; i++)
    {
        TestModels model = new TestModels();
        model.ID = i;
        model.Name = "Name" + i;
        models.Add(model);
    }

    return Json(models.ToDataSourceResult(request));
}


public ActionResult DocumentDownload1()
{
    string contentType = "application/xlsx";
    string filePath = Server.MapPath("~/Files/YourFileName.xlsx");
    return File(filePath, contentType, "YourFileName.xlsx");
}

public ActionResult DocumentDownload2(int id)
{
    string contentType = "application/xlsx";
    string filePath = Server.MapPath("~/Files/YourFileName.xlsx");
    return File(filePath, contentType, "YourFileName_" + id.ToString() + ".xlsx");
}

How to use special characters in enums in asp.net

aspx

<telerik:radgrid autogeneratecolumns="False" id="RadGrid1" onitemdatabound="RadGrid1_ItemDataBound" onneeddatasource="RadGrid1_NeedDataSource" runat="server">
            <mastertableview datakeynames="Rating" editmode="InPlace">
                <columns>
                    <telerik:gridboundcolumn datafield="Shipper" headertext="Shipper" uniquename="Shipper">
                    </telerik:gridboundcolumn>
                    <telerik:gridboundcolumn datafield="ShipperName" headertext="ShipperName" uniquename="ShipperName">
                    </telerik:gridboundcolumn>
                    <telerik:gridtemplatecolumn uniquename="Rating">
                        <itemtemplate>
                            <asp:label id="Label1" runat="server" text="<%# Eval(&quot;Rating&quot;) %>"></asp:label>
                        </itemtemplate>
                        <edititemtemplate>
                            <telerik:radcombobox id="RadComboBox1" runat="server">
                            </telerik:radcombobox>
                        </edititemtemplate>
                    </telerik:gridtemplatecolumn>
                    <telerik:grideditcommandcolumn>
                    </telerik:grideditcommandcolumn>
                </columns>
            </mastertableview>
</telerik:radgrid>

aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
      Class1.BindDropDownListWithEnum(ref DropDownList1, typeof(Enums.ShipperRating));
    }
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Shipper", typeof(int));
        dt.Columns.Add("ShipperName", typeof(string));
        dt.Columns.Add("Rating", typeof(int));
        dt.Rows.Add("1", "ShipperName1", "1");
        dt.Rows.Add("2", "ShipperName2", "2");
        dt.Rows.Add("3", "ShipperName3", "2");

        RadGrid1.DataSource = dt;
    }
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item.IsInEditMode && e.Item is GridEditableItem)
        {
            GridEditableItem item = e.Item as GridEditableItem;
            RadComboBox RadComboBox1 = item.FindControl("RadComboBox1") as RadComboBox;
            int Rating = Convert.ToInt32(item.GetDataKeyValue("Rating"));
            Class1.BindRadComboBoxWithEnum(ref RadComboBox1, typeof(Enums.ShipperRating));

            if (RadComboBox1.Items.FindItemByValue(Convert.ToString(Rating)) != null)
            {
                RadComboBox1.Items.FindItemByValue(Convert.ToString(Rating)).Selected = true;
            }
        }
    }
Class1.cs
public class DisplayValue : Attribute
{
    private string _value;

   
    public DisplayValue(string value)
    {
        _value = value;
    }

    public string Value
    {
        get { return _value; }
    }
}

public class EnumListItem
{
    private int _value;
    public int Value
    {
        get { return this._value; }
        set { this._value = value; }
    }

    private string _displayName;
    public string DisplayName
    {
        get { return _displayName; }
        set { _displayName = value; }
    }

    private string _name;
    public string Name
    {
        get { return _name.Replace("_", " "); }
        set { _name = value.Replace("_", " "); }
    }

    public EnumListItem(int Value, string Name, string DisplayName)
    {
        _value = Value;
        _displayName = string.IsNullOrEmpty(DisplayName) ? Name : DisplayName;
        _name = Name;
    }
}


public class Enums
{

    public enum ShipperRating
    {
        [DisplayValue("1-3 (Poor)")]
        Poor = 1,
        [DisplayValue("4-5 (Fair/Average)")]
        Average = 2,
        [DisplayValue("6-7 (Good)")]
        Good = 3

    }
}

public static class Class1
{
    public static void BindDropDownListWithEnum(ref DropDownList ddl, Type enumType)
    {
        List<enumlistitem> el = GetEnumValues(enumType, false);
        ddl.DataSource = el;
        ddl.DataTextField = "DisplayName";
        ddl.DataValueField = "Value";
        ddl.DataBind();
    }

    public static void BindRadComboBoxWithEnum(ref RadComboBox radcmb, Type enumType)
    {
        List<enumlistitem> el = GetEnumValues(enumType, true);
        radcmb.DataSource = el;
        radcmb.DataTextField = "DisplayName";
        radcmb.DataValueField = "Value";
        radcmb.DataBind();
    }
    public static List<enumlistitem> GetEnumValues(Type type, bool isSelectRequired)
    {
        List<enumlistitem> el = new List<enumlistitem>();
        EnumListItem ei;
        foreach (int item in Enum.GetValues(type))
        {
            ei = GetEnumItem(type, item);
            el.Add(ei);
        }
        if (isSelectRequired)
        {
            el.Insert(0, new EnumListItem(0, "--Select--", "--Select--"));
        }
        return el;
    }
    public static EnumListItem GetEnumItem(Type type, int item)
    {
        string name = Enum.GetName(type, item);
        string displayName = string.Empty;
        object[] displayAttributes = type.GetField(Enum.GetName(type, item)).GetCustomAttributes(typeof(DisplayValue), false);
        if (displayAttributes.Length > 0)
            displayName = ((DisplayValue)displayAttributes[0]).Value;
        else
            displayName = name.Replace("_", " ");

        
        return new EnumListItem(item, name, displayName);
    }
}