This project is read-only.

Knockoutjs custom binding to format deciaml and datetime values (example2)


These examples refer to the project Application30-beta0.85x into the download file javascript-to-IQueryable-extra1-beta-0.85.zip

In the reaease beta0.84 I added the support for query of type (integer,double,decimal,date,boolean). Client side (if linq is enabled) you must use the methods: koWhereObjectXXXAnd, koWhereObjectXXXOr, koWhereObjectIntOr, addWhereClauseXXX(pvalue1, pvalue2, pvalue3). By default the parameter sended to the server will be of type String. You must use the above methods to change the type. Server side (if linq is not enabled) you must use the the following methods to register the querystring mapping: AddWhereMapping(string field, string op, string param), AddWhereMappingXXX(string field, string op, string param), AddWhereMappingEq(string field, string param), AddWhereMappingNq(string field, string param), AddWhereMappingXXXEq(string field, string param), AddWhereMappingXXXNq(string field, string param).

@using JQueryLinq
@model Application1.OrderViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section header{
    <script src="@Url.Content("~/Scripts/zPageGrid1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/zPageGrid2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/GridController1/zPage02.js")" type="text/javascript"></script>
}

<h2>Index - Page02</h2>

<p>
<pre>
context.from("/Grid1/GetDataJson").where(r.value,r.param).orderBy(
         "CustomerID").pagingWithSize(10).applyTempClient(); 
</pre>
</p>

<div>
   <input id="gbutton1" type="button" value="Search" />&nbsp;
   <input id="gbutton2" type="button" value="MoveF" />&nbsp;
   <input id="gbutton3" type="button" value="MoveP" />&nbsp;
   <input id="gbutton4" type="button" value="MoveN" />&nbsp;
   <input id="gbutton5" type="button" value="MoveL" />&nbsp;
   <input id="refresh" type="button" value="Refresh" />&nbsp;
</div>

<br /><br />


<div id="gpane1" style="display:none;height:100px">
  <div style="vertical-align:top">
    <table style="vertical-align:top">    
    <tr>
      <td>ShipName: </td>
      <td><input id="text1" type="text" /></td>
    </tr>  
    <tr>
      <td>ShipVia: </td>
      <td><input id="text2" type="text" /></td>
    </tr> 
    <tr>
      <td>Freight: </td>
      <td><input id="text3" type="text" /></td>
    </tr>  
    <tr>
      <td>ShippedDate: </td>
      <td><input id="text4" type="text" /></td>
    </tr> 
    </table>
    <br /><br />
    <input id="gbutton6" type="button" value="Find" />
  </div>
</div>

<div id="gpane2" style="display:none;height:300px">
  <div>
    <table id="jtable1">
    <thead>
    <tr>
      <td> &nbsp; </td>
      <td> &nbsp; </td>
      <td data-sort="ShipName"> ShipName </td>
      <td data-sort="ShipVia"> ShipVia </td>
      <td data-sort="Freight"> Freight </td>
      <td data-sort="ShippedDate"> ShippedDate/1 </td>
      <td data-sort="ShippedDate"> ShippedDate/2 </td>
    </tr>
    </thead>
    <tbody id="jlist" data-bind="template: {name: 'temp1', foreach: $data}"></tbody>
    </table>
  </div>
</div>

<div id="gdialog1" style="display:none;height:100px">
  <div id="jlist1" data-bind="template:'jdetailTemplate'"></div>
</div>

<div id="gdialog2" style="display:none;height:100px">
  <div id="jlist2" data-bind="template:'jmodifyTemplate'"></div>
  <div>
    <a href="#" data-jupdateaction>Update</a>&nbsp;
    <a href="#" data-jcancelaction>Cancel</a>&nbsp;
  </div>
</div>

<div id="gpane3" class="pagingbase-ui-loading1" style="display:none">
  <div class="pagingbase-ui-loading2">
    <h1>Loading ...</h1>
  </div>
</div>

<br /><br />

<script id="temp1" type="text/html">
  <tr class="pagingbase-ui-selected-ou"> 
    <td><a href="#" data-jdetailaction>Detail</a></td>
    <td><a href="#" data-jmodifyaction>Modify</a></td>
    <td><span data-bind="text: ShipName" /></td>
    <td><span data-bind="text: ShipVia" /></td>
    <td><span data-bind="textDec: Freight, decimal: 2" /></td>
    <td><span data-bind="textDat: ShippedDate" /></td>
    <td><span data-bind="text: ShippedDate" /></td>
  <tr>
</script>

<script id="jdetailTemplate" type="text/x-jquery-tmpl">
  <b>ShipName: </b><span data-bind="text: ShipName" /><br>
  <b>ShipVia: </b><span data-bind="text: ShipVia" /><br>
  <b>Freight: </b><span data-bind="textDec: Freight, decimal: 2" /><br>
  <b>ShippedDate/1: </b><span data-bind="textDat: ShippedDate" /><br>
  <b>ShippedDate/2: </b><span data-bind="text: ShippedDate" /><br>
</script>

<script id="jmodifyTemplate" type="text/x-jquery-tmpl">
@using (Html.BeginForm()) {
<div> 
  <p>
    <b>ShipName: </b>@Html.KoTextBoxStrFor(model => model.ShipName)<br>
    @Html.ValidationMessageFor(model => model.ShipName)
  </p>
  <p>
    <b>ShipVia: </b>@Html.KoTextBoxIntFor(model => model.ShipVia)<br>
    @Html.ValidationMessageFor(model => model.ShipVia)
  </p> 
  <p>
    <b>Freight: </b>@Html.KoTextBoxDecFor(model => model.Freight)
    @Html.ValidationMessageFor(model => model.Freight)
  </p>
  <p>
    <b>ShippedDate: </b>@Html.KoTextBoxDatFor(model => model.ShippedDate)
    @Html.ValidationMessageFor(model => model.ShippedDate)
  </p>
</div>
}
</script>

You must use the properties ko.iqueryable.decimalPoint = "point" / ko.iqueryable.dateFormat = "date" to set the format of the decimal point and datetime type values. Point may be set to "." , ",". Date may be set to "mda", "dma", "amd". By default it will be set to "." and "mda". Internally the datetime format it will be in millisecond. You can also use the plugin property "tconvertJsonDate" to convert automatically the datetime values that they will be returned from the server. If you set tconvertJsonDate="true" every datetime field it will be converted in the corresponding string format. There are also some knockout.js custom binding to manage decimal and datetime value. For input field (valueStr, valueInt,valueDec, valueDat, valueBol) . For text field (textDec, textDat).

$(document).ready(function () {
    ko.iqueryable.decimalPoint = ".";
    ko.iqueryable.dateFormat = "mda";
    //ko.iqueryable.decimalPoint = ",";
    //ko.iqueryable.dateFormat = "dma";
    var settings = {
        tpane2: 'gpane2',
        tpane3: 'gpane3',
        tcontainer: "jlist",        
        ttemplate: "jtableTemplate", 
        tdetailPanel: "gdialog1",
        tdetailContainer: "jlist1",
        tmodifyPanel: "gdialog2",
        tmodifyContainer: "jlist2", 
        tdeleteCallBack: function (obj) {
            deletefrm(obj);
        },
        tupdateCallBack: function (obj) {
            updatefrm(obj);
        },    
        //tknockoutValidation: true,
        tconvertJsonDate: true,
        tcacheEnabled: false,        
        ttype: "2"
    };
    $("#gpane2").gridTemplate(settings, searchfrm1, searchfrm2);
    //
    $("#gpane2").bind('isloading', function (event) {
        //alert("isloading");
    });
    $("#gpane2").bind('databound', function (event) {
        //alert("databound");
    });  
    $("#refresh").click(function (e) {
        $("#gpane2").gridTemplate("refresh");
    });
});

function searchfrm1(context) {
    context.clearSearch();

    var text1 = $("#text1").val();
    var text2 = $("#text2").val();
    var text3 = $("#text3").val();
    var text4 = $("#text4").val();

    context.beginWhere("and");
    if (text1!= "") {
        context.addWhereClauseStr("ShipName"   , "=", text1);
    }      
    if (text2 != "") {
        context.addWhereClauseInt("ShipVia"    , "=", text2);
    }
    if (text3 != "") {
        context.addWhereClauseDec("Freight"    , "=", text3);
    }
    if (text4 != "") {
        context.addWhereClauseDat("ShippedDate", "=", text4);
    }
    var r = context.endWhere();   
         
    context.from("/Grid1/GetDataJson").where(r.value,r.param,r.ptype).orderBy(
                  "CustomerID").pagingWithSize(10).applyTempKo();    
}

function deletefrm(obj) {
    var entity = ko.toJSON(obj.dataitemJs);
    $.ajax({ url: "/Grid1/Delete/", type: 'post', data: entity,
        contentType: 'application/json',
        error: function (request, state, error) {
            alert("Ajax error:" + error);         
        },
        success: function (result) {
            //obj.context.refresh();
            alert(result);
        }
    });
};

function updatefrm(obj) {   
    var entity = ko.toJSON(obj.dataitemJs);
    $.ajax({ url: "/Grid1/Update/", type: 'post', data: entity,
        contentType: 'application/json',
        error: function (request, state, error) {
            obj.context.closeModifyDialogFeilure();
            alert("Ajax error:" + error);
        },
        success: function (result) {
            //obj.context.refresh();
            obj.context.closeModifyDialogSuccess();
            alert(result);
        }
    });
};


Classic page with knockout MVVM
jQuery mobile page with knockout MVVM
CRUD knockoutjs grid and MVVM pattern
jQuery mobile dynamic content with a knockoutjs template and MVC
Create a PhoneGap application using html5/javascript
How using RavenDB in a html5/javascript application
Knockoutjs and LINQ for JavaScript

My youtube channel


Last edited Sep 1, 2012 at 12:52 PM by mastefano64, version 11

Comments

No comments yet.